search

maxeth / react-type-animation

A React typewriter animation based on typical with extended functionality and customization.
https://react-type-animation.netlify.app/
MIT License
427 stars 24 forks source link

Warnings caused by package #7

Open harrisonhoward opened 2 years ago

harrisonhoward commented 2 years ago 
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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

When starting the development version

maxeth commented 2 years ago

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: https://github.com/facebook/create-react-app/pull/11752, don't think one can do anything right now besides ignoring the warnings, like this: https://github.com/facebook/create-react-app/pull/11752#issuecomment-1135009556

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 commented 2 years ago

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 commented 2 years ago

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

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

Veylkh commented 2 years ago

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 commented 2 years ago

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 commented 1 year ago

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

XurxoMF commented 1 year ago

No, anything :(

jason1642 commented 1 year ago

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 commented 1 year ago

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