Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map

[andisaba]

Have used 'React Awesome Reveal' with React 17... no problems... works extremely well!

However, I have installed and tried to implement in current React 18 project and now receiving 100 errors in terminal... basically all reveal error types ...the following is an example:

WARNING in ./node_modules/react-awesome-reveal/dist/module.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '.../node_modules/react-awesome-reveal/dist/fadeIn.ts' file: Error: ENOENT: no such file or directory, open '.../node_modules/react-awesome-reveal/dist/fadeIn.ts'

Is 'React Awesome Reveal' not compatible with react 18 yet OR is there some other possible explanation that I am overlooking?

Thanks in advance for your prompt reply!

Andrew

[morellodev]

React Awesome Reveal is fully compatible with React 18 starting from v4, this is not an issue related to React 18 support.

It seems your setup tries to read the source maps from an invalid path (source maps are shipped with the package), may you give me additional details?

[andisaba]

OK ... my only main difference between my last project and this one is Material UI installed.
Dependencies include:

"@mui/icons-material": "^5.8.4",
"@mui/material": "^5.9.0",
"@mui/styled-engine-sc": "^5.8.0",
"react-awesome-reveal": "^4.0.1"

I installed 'react-awesome-reveal' via NPM ...npm install react-awesome-reveal

No errors on install shown!

In my component:

import { Fade } from 'react-awesome-reveal;

Wrapped 2 divs as shown(these are styled divs) :

  <Fade>
    <HeaderTitleText>Hello</HeaderTitleText>
    <HeaderTitleText1>World</HeaderTitleText1>
  </Fade>

The problem seems to be in the import phase... so if I comment out the import there are no errors
Any suggestions?

Edited: Tried deleting and reinstalling 'node_modules' and 'package-lock.json' files WITHOUT success!

[animesh28]

This issue persists on my end too, I've got 100 compile warnings from one import 😢

[OlegGlo]

Same issue here, but component works as expected.

[fidaay]

I got the same issue andisaba presents.

[Soapalin]

same for me and I also use Material UI...

[fidaay]

To anyone stopping by, I did this with react-app-rewired to neutralize the warning messages:

module.exports = {
  webpack: function (config, env) {
    return {
      ...config,
      stats: 'none',
      ignoreWarnings: [/Failed to parse source map/],
    };
  },
};

[morellodev]

So I guess you are using create-react-app, it was not specified when the issue was opened. If I have time I will look into this, but it is not an issue with the lib itself.

[andisaba]

Yes confirmed ...used create-react-app ...would be great if you could look into this and indicate a fix!

Ignoring warnings as indicated by 'fidaay' isn't addressing the underlying issue

[fidaay]

Yes confirmed ...used create-react-app ...would be great if you could look into this and indicate a fix!

Ignoring warnings as indicated by 'fidaay' isn't addressing the underlying issue

I shared what I did, didn't indicate anything. In that way I can develop without seeing 100 warning messages.

[morellodev]

Fixed in v4.1.0

[andisaba]

Thanks for the fix... that's fantastic!

I'm keen to give it another go... fingers crossed!

Cheers!