Discussion on: How to Create and Publish a React Component Library

[Luiz Azevedo]

Hi Alex!

Congratulations for the tutorial and the beautiful explanation.
After a long time of your tutorial, it is still possible to apply it in a simple way.

I'm currently getting a Warning when I run npm start of a project created with create-react-app referring to the package created from your tutorial.
I've been looking for a solution but haven't found it yet.

When running npm start from the application that is using my package I get this warning:

warning in ./node_modules/my_package/dist/esm/index.js

Module Warning (from ./node_modules/source-maploader/dist/cjs.js)

Failed to parse source map from '.../components/my_component.tsx' file: Error ENOENT: no such file or directory, open '.../components/my_component.tsx' @ ./src/index.tsx

I know it's just a warning, but I wanted to resolve it.

Thanks.

[xingming2020]

I have the same warning. Did you fix it?

[Malith Ranasinghe]

create new react app and install your custom npm package.
then,
Create an environment variables file named .env in the project root and add GENERATE_SOURCEMAP=false to it.

OR

Run npm i -D cross-env and then in the package.json file update the start script to the following:

"scripts": {
"start": "cross-env GENERATE_SOURCEMAP=false react-scripts start"
}

[Malith Ranasinghe]

or comment out sourcemap in rollup.config.js file

{
file: packageJson.main,
format: "cjs",
** // sourcemap: true,**
},
{
file: packageJson.module,
format: "esm",
** // sourcemap: true,**
},

[Lyuboslav Ilkov]

Not Alex, but.
Did faced the same problem as you. I don't think we get sourcemaps working following the guide and this error is actually handaled to be displayed in the react-scripts v5 above.
My solutions:

1. use "react-scripts": "4.0.2" or
2. you can fix sourcemaps via @rollup/plugin-sucrase and rollup-plugin-sourcemaps like here and here dev install these libs and do few changes in rollup.config.mjs add on top:

import sourcemaps from 'rollup-plugin-sourcemaps';
import sucrase from '@rollup/plugin-sucrase';

add in plugins:

[
   sourcemaps(),
...
   sucrase({
       exclude: ['node_modules/**'],
       transforms: ['typescript', 'jsx'],
   }),
]

plugins order matters: depsExternal > resolve > sourcemaps > commonjs > typescript > postcss > sucrase > terser - is doing the trick for me. Executing rollup --config will throw warning and you can add:

onwarn(warning, warn) {
    if (warning.code === 'THIS_IS_UNDEFINED') return;
    warn(warning);
},

like in here
Much love to Alex, it's a great guide <3

[William Ferreira Nunes]

@lyubosumaz, I fallowed this steps and I could build. However when I init the app which has the dependency for my lib I got that react is not defined. Did you faced something similar?

[pheroMona13]

You should just add 'src' to the 'files' in your package.json so it will be included in your published folder for souremaps to work properly without error.

{
  ...
  "files": [
    "dist",
    "src"
  ],
  ...
}