Error Could not resolve entry module React + Rollup

Question

I need to build shareable React component which could be used across apps.

For this, I was/am following the below article

• https://dev.to/alexeagleson/how-to-create-and-publish-a-react-component-library

My Configuration looks exactly the same except the npm packages version (even tried with the same versions)

The folder structure looks the same as below

rollup.config.js

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import dts from "rollup-plugin-dts";

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()],
},
];

npm script

"rollup": "rollup -c"

However when I run npm run rollup this throws the below error

[!] Error: Could not resolve entry module (dist/esm/types/index.d.ts).
Error: Could not resolve entry module (dist/esm/types/index.d.ts)

Please suggest. Thanks!

Amiens

Change dist/esm/types/index.d.ts -> dist/esm/index.d.ts in rollup.config.js – Fustanella

@Eliot yes your suggestion fixed the issue. A Big Thank you. :) – Amiens

@Eliot Your suggestion works. Thanks a lot – Excrescency

So changing to input: "dist/esm/index.d.ts" did not work for me. These are the package versions I used "@rollup/plugin-commonjs": "^24.0.1", "@rollup/plugin-node-resolve": "^15.0.1", "@rollup/plugin-typescript": "^11.0.0", "rollup": "^3.10.1", "rollup-plugin-dts": "^5.1.1", – Cotten

@Cotten i am running into the same issue, how did you solve? – Isaisaac

@jamesemanon I did not. I ditched typescript and continued with plain js which worked. – Cotten

Answer 1

I also ran into the same problem you are experiencing when working with rollup. After spending some while digging for the solution, I finally got to solve this problem.

My Configuration looks exactly the same except the npm packages version (even tried with the same versions)

The exception you have stated is actually the problem. The problem lies in package versioning. The package @rollup/plugin-typescript versions later than 8.3.3 are not generating nor storing the declaration files in the types folder expected to be at the path: dist/cjs/ and dist/esm/.

The latest version at this point in time is 8.5.0 which still breaks. Hopefully it is fixed in near future.

Steps to fix your error

• Make sure your tsconfig.json file has "declarationDir": "types" to direct the bundler's typescript plugin to create and store declaration files in the types folder when you run npm run rollup
• Uninstall the existing @rollup/plugin-typescript package version by running npm un @rollup/plugin-typescript --save-dev
• Install @rollup/plugin-typescript with the command npm i @rollup/[email protected] --save-dev. As you see, we are picking a specific version.

If you still encounter problems:

• Manually update the package.json file like: "@rollup/plugin-typescript": "8.3.3". Note that I have removed the caret(^) symbol to tie the package to version 8.3.3.
• Delete the node_modules folder. You could use the command rm -rf node_modules.
• Delete package-lock.json.
• Run npm i to install the packages again with versions specified in package.json

UPDATE

---

This issue is fixed as from version 10.0.0. Things should work normally without being stuck at an old version.

Microcircuit

Using the exact version of @rollup/[email protected] solved it for me – Bastian

Is there a GitHub issue that we can follow for updates on @rollup/plugin-typescript? – Testudinal

rollup seem to be having many issues. Can someone provide a webpack configuration for the similar setup, please? – Dissolvent

@Maria This issue is fixed. You can install latest version which at time of this writing is 11.0.0. It should work – Microcircuit

Answer 2

Here's an working answer for people coming from 2023 that doesn't lock you to an outdated version of @rollup/plugin-typescript:

Preconditions: Make sure that you get rid off your package-lock.json and your node_modules directory so that you can start from a clean slate and install your project again.

1. run npm install tslib --save-dev
2. add "type": "module" to package.json
3. in tsconfig.json, add "rootDir": "src"
4. in rollup.config.js, change plugins: [dts()] to plugins: [dts.default()]
5. back in package.json, add --bundleConfigAsCjs as a parameter to the rollup command in scripts

After that you should be able to continue with the tutorial and be able to create a new build via npm run rollup.

Alagoas

Answer 3

I tried everything , I solved by this

In rollup.config.mjs In Plugins I changed this

   typescript({
      tsconfig: './tsconfig.json'
   })

Into this

   typescript({
      tsconfig: './tsconfig.json',
      declaration: true,
      declarationDir: 'dist',
   })

You must also put declaration and declarationDir here

Megaron

Answer 4

I fixed the error of 'Could not resolve entry module (dist/esm/index.d.ts)'.

I tried removing types, downgrading react to match the version in the tutorial but none worked.

I found this comment on the tutorial which was helpful: https://dev.to/nasheomirro/comment/239nj

• I got rid of main and common js set up in both rollup config and package json.
• i changed the packagejson variable to import packageJson from "./package.json" assert { type: "json" };
• added types back into the input in the rollup config
• Set "@rollup/plugin-typescript" to be version "8.3.3" as mentioned above.

I now have a Dist folder with an ESM folder and didn't get any errors.

Dissolution

Answer 5

Rename your file from file.d.ts to file.ts.

Okay