Warnings caused by package

[harrisonhoward]

WARNING in ./node_modules/react-type-animation/dist/esm/index.es.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\Harrison Howard\Documents\Github Repos\Portfolio\harrison-portfolio\node_modules\react-type-animation\src\components\TypeAnimation\index.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Users\Harrison Howard\Documents\Github Repos\Portfolio\harrison-portfolio\node_modules\react-type-animation\src\components\TypeAnimation\index.tsx'

WARNING in ./node_modules/react-type-animation/dist/esm/index.es.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\Harrison Howard\Documents\Github Repos\Portfolio\harrison-portfolio\node_modules\react-type-animation\src\typical.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\Harrison Howard\Documents\Github Repos\Portfolio\harrison-portfolio\node_modules\react-type-animation\src\typical.ts'

[harrisonhoward]

Recent update that added useEffectOnce has the same issue.

WARNING in ./node_modules/react-type-animation/dist/esm/index.es.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\Harrison Howard\Documents\Github Repos\Portfolio\harrison-portfolio\node_modules\react-type-animation\src\hooks\useEffectOnce.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Users\Harrison Howard\Documents\Github Repos\Portfolio\harrison-portfolio\node_modules\react-type-animation\src\hooks\useEffectOnce.tsx'

[maxeth]

I have no idea what I could do because rollup automatically generates source maps, also I'm not getting any warnings. When I look at the build output the source maps look alright. When exactly are you getting the warnings?

[harrisonhoward]

When starting the development version

[maxeth]

I assume you use create-react-app and It's probably something internal then, like webpack, because I don't get any warnings with next.js

I think this is related: facebook/create-react-app#11752, don't think one can do anything right now besides ignoring the warnings, like this: facebook/create-react-app#11752 (comment)

or completely omitting sourceMaps if you don't use them:

"scripts": {
    "start": "GENERATE_SOURCEMAP=false react-scripts start",
  },

but that may be a step too far if you utilize source maps of other packages

[harrisonhoward]

For my case disabling source maps is fine but I'm unsure of the cause. This was working fine on 1.1.3 and started when updating to 2.0.9

[Veylkh]

It seems to me that the references are split between CJS and ESM in the package. Meaning that /src/ becomes /dist/esm or /dist/cjs.

In my case, it was react-scripts's source-map-loader that failed to parse the source map.

[Veylkh]

Some differences I've noticed:

1.1.3 package.json

    "main": "",
    "types": "index.d.ts",

2.1.3 (latest) package.json

  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.es.js",
  "jsnext:main": "dist/esm/index.es.js",
  "files": [
    "dist"
  ],
  "types": "dist/index.d.ts",

(along build script that is using rollup.js and babel)

[XurxoMF]

WARNING in ./node_modules/react-type-animation/dist/esm/index.es.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\xurxo\Documents\xurxomf.me\node_modules\react-type-animation\src\components\TypeAnimation\index.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Users\xurxo\Documents\xurxomf.me\node_modules\react-type-animation\src\components\TypeAnimation\index.tsx'

WARNING in ./node_modules/react-type-animation/dist/esm/index.es.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\xurxo\Documents\xurxomf.me\node_modules\react-type-animation\src\hooks\useEffectOnce.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Users\xurxo\Documents\xurxomf.me\node_modules\react-type-animation\src\hooks\useEffectOnce.tsx'

WARNING in ./node_modules/react-type-animation/dist/esm/index.es.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\xurxo\Documents\xurxomf.me\node_modules\react-type-animation\src\typical.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\xurxo\Documents\xurxomf.me\node_modules\react-type-animation\src\typical.ts'

This error shows up every time I run my project, It works perfectly but those warnings are so annoying. If you could fix it It would be great. :)

[HelenLangers]

I'm getting the same error, has a fix been found?

[XurxoMF]

No, anything :(

[jason1642]

Hi, I've faced the exact issue with rollup with my npm package for the past few days. It turns out you need to provide the actual content of the src in your bundled package. You can of course disable source mapping, but it sounds like it would lead to some problems and it's probably there for a reason. In my stack overflow answer here - https://stackoverflow.com/questions/70599784/failed-to-parse-source-map/75998318#75998318 , I explain how to make sure rollup includes it in the final build (even though after running npm run rollup, the src folder didn't appear in the dist directory, only after publishing). Doing this didn't increase my package size that much, and does provide all the content the source mapping was referring to in the cjs and esm files.

I've figured this out when I've investigated other random npm packages I've used, and some had the src folder with the components in them, while others had contents of their src folder content spread out in the first level. For instance, this package has a src folder which the source mapping is referring to - https://www.npmjs.com/package/react-table?activeTab=code

This worked for me, and it seems to be what other packages using rollup has. But to me, having a src folder with all your exact react components doesn't sound optimal, and there probably is a correct way to have those files read by the source mapping by changing the rollup config to make it so the cjs/esm folders are "sourcemapping" files in a different way. If you would like to discuss this more, because rollup can be pretty frustrating, please let me know!

[jason1642]

Alright, after a lot more testing with rollup, it seems that I just needed a sourcemaps plugin ( npm i rollup-plugin-sourcemaps), make sure the plugins are declared in the array in the correct order, and add a few tsconfig.json fields to target src. You really don't need that src folder after all and it all just works. Hope this helps lead you in the right direction, I've updated my answer on stackoverflow