Error Could not resolve entry module React + Rollup - reactjs

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!

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/plugin-typescript#8.3.3 --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

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.
run npm install tslib --save-dev
add "type": "module" to package.json
in tsconfig.json, add "rootDir": "src"
in rollup.config.js, change plugins: [dts()] to plugins: [dts.default()]
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.

Answer 3

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.