Rollup doesn't bundle all the files exported in my input src

Question

I have a problem. I'm currently making a component library for react, it works perfectly in storybook. But when I do a npm rollup, or install my package from npm. I look inside the cjs and esm folders and not all my necessary files are there.

Here are my config files:

const packageJson = require("./package.json");

export default [
  {
    input: "src/index.ts",
    output: [
      {
        file: packageJson.main,
        format: "cjs",
        sourcemap: true,
      },
      {
        file: packageJson.module,
        format: "esm",
        sourcemap: true,
      },
    ],
    plugins: [
      resolve(),
      commonjs(),
      typescript({ tsconfig: "./tsconfig.json" }),
    ],
  },
  {
    input: "dist/esm/types/index.d.ts",
    output: [{ file: "dist/index.d.ts", format: "esm" }],
    plugins: [dts()],
  },
];

rollup.config.ts

export * from "./components";
export * from "./core";
export * from "./themes";
export * from "./hooks";

src/index.ts

export { default as GlobalTheme } from "./global-theme";
export { default as LightTheme } from "./light-theme";
export { default as DarkTheme } from "./dark-theme";

themes/index.ts

When I try to use my library in another project it gives me a lot of compile errors :

Failed to parse source map from '...\node_modules\@gitname\LIBRARY_NAME\src\themes\light-theme.ts' file: Error: ENOENT: no such file or directory

and the same message for every single component I created in the library.

I'm honestly stuck, I tried every solution on the internet none worked.

Thank you in advance for your help

Answer 1

It has to do with way you are importing your components. I had exactly the same issue with the same configuration as you have. In my case I had something like:

{
    input: "dist/types/index.d.ts",
    output: [{ file: "dist/index.d.ts", format: "esm" }],
    plugins: [dts()],
  }

When you are using the components you have to import from where the actual bundled files are. In my case it was in dist folder. so just import it like so,

Import {Button} from "@yourlib/your-lib/dist"