Fixing sourcemap errors in Webpack 5

Ionic Framework Ionic React
1

I updated to Ionic 6 and then, since everything was working, I tried to break things again by updating to the latest Create React App alpha:

"react-scripts": "5.0.0-next.58+657739fb",

Actually, this is working well; I can now build my Ionic app with webpack 5. However, when I run npm run serve, I noticed I am getting several sourcemap errors:

[react-scripts] Failed to parse source map from '/home/anon/d/ionic/node_modules/@capacitor/app/src/definitions.ts' file: Error: ENOENT: no such file or directory, open '/home/anon/d/ionic/node_modules/@capacitor/app/src/definitions.ts'
[react-scripts] Failed to parse source map from '/home/anon/d/ionic/node_modules/@capacitor/app/src/index.ts' file: Error: ENOENT: no such file or directory, open '/home/anon/d/ionic/node_modules/@capacitor/app/src/index.ts'
[react-scripts] Failed to parse source map from '/home/anon/d/ionic/node_modules/@capacitor/app/src/web.ts' file: Error: ENOENT: no such file or directory, open '/home/anon/d/ionic/node_modules/@capacitor/app/src/web.ts'
[react-scripts] Failed to parse source map from '/home/anon/d/ionic/node_modules/@capacitor/browser/src/definitions.ts' file: Error: ENOENT: no such file or directory, open '/home/anon/d/ionic/node_modules/@capacitor/browser/src/definitions.ts'
[react-scripts] Failed to parse source map from '/home/anon/d/ionic/node_modules/@capacitor/browser/src/index.ts' file: Error: ENOENT: no such file or directory, open '/home/anon/d/ionic/node_modules/@capacitor/browser/src/index.ts'
[react-scripts] Failed to parse source map from '/home/anon/d/ionic/node_modules/@capacitor/browser/src/web.ts' file: Error: ENOENT: no such file or directory, open '/home/anon/d/ionic/node_modules/@capacitor/browser/src/web.ts'
[react-scripts] Failed to parse source map from '/home/anon/d/ionic/node_modules/@capacitor/camera/src/definitions.ts' file: Error: ENOENT: no such file or directory, open '/home/anon/d/ionic/node_modules/@capacitor/camera/src/definitions.ts'
[react-scripts] Failed to parse source map from '/home/anon/d/ionic/node_modules/@capacitor/camera/src/index.ts' file: Error: ENOENT: no such file or directory, open '/home/anon/d/ionic/node_modules/@capacitor/camera/src/index.ts'
[react-scripts] Failed to parse source map from '/home/anon/d/ionic/node_modules/@capacitor/camera/src/web.ts' file: Error: ENOENT: no such file or directory, open '/home/anon/d/ionic/node_modules/@capacitor/camera/src/web.ts'
[react-scripts] Failed to parse source map from '/home/anon/d/ionic/node_modules/@capacitor/haptics/src/definitions.ts' file: Error: ENOENT: no such file or directory, open '/home/anon/d/ionic/node_modules/@capacitor/haptics/src/definitions.ts'
[react-scripts] Failed to parse source map from '/home/anon/d/ionic/node_modules/@capacitor/haptics/src/index.ts' file: Error: ENOENT: no such file or directory, open '/home/anon/d/ionic/node_modules/@capacitor/haptics/src/index.ts'
[react-scripts] Failed to parse source map from '/home/anon/d/ionic/node_modules/@capacitor/haptics/src/web.ts' file: Error: ENOENT: no such file or directory, open '/home/anon/d/ionic/node_modules/@capacitor/haptics/src/web.ts'
[react-scripts] Failed to parse source map from '/home/anon/d/ionic/node_modules/@capacitor/keyboard/src/definitions.ts' file: Error: ENOENT: no such file or directory, open '/home/anon/d/ionic/node_modules/@capacitor/keyboard/src/definitions.ts'
[react-scripts] Failed to parse source map from '/home/anon/d/ionic/node_modules/@capacitor/keyboard/src/index.ts' file: Error: ENOENT: no such file or directory, open '/home/anon/d/ionic/node_modules/@capacitor/keyboard/src/index.ts'
[react-scripts] Failed to parse source map from '/home/anon/d/ionic/node_modules/@capacitor/local-notifications/src/definitions.ts' file: Error: ENOENT: no such file or directory, open '/home/anon/d/ionic/node_modules/@capacitor/local-notifications/src/definitions.ts'
[react-scripts] Failed to parse source map from '/home/anon/d/ionic/node_modules/@capacitor/local-notifications/src/index.ts' file: Error: ENOENT: no such file or directory, open '/home/anon/d/ionic/node_modules/@capacitor/local-notifications/src/index.ts'
[react-scripts] Failed to parse source map from '/home/anon/d/ionic/node_modules/@capacitor/local-notifications/src/web.ts' file: Error: ENOENT: no such file or directory, open '/home/anon/d/ionic/node_modules/@capacitor/local-notifications/src/web.ts'
[react-scripts] Failed to parse source map from '/home/anon/d/ionic/node_modules/@capacitor/network/src/definitions.ts' file: Error: ENOENT: no such file or directory, open '/home/anon/d/ionic/node_modules/@capacitor/network/src/definitions.ts'
[react-scripts] Failed to parse source map from '/home/anon/d/ionic/node_modules/@capacitor/network/src/index.ts' file: Error: ENOENT: no such file or directory, open '/home/anon/d/ionic/node_modules/@capacitor/network/src/index.ts'
[react-scripts] Failed to parse source map from '/home/anon/d/ionic/node_modules/@capacitor/network/src/web.ts' file: Error: ENOENT: no such file or directory, open '/home/anon/d/ionic/node_modules/@capacitor/network/src/web.ts'
[react-scripts] Failed to parse source map from '/home/anon/d/ionic/node_modules/@capacitor/push-notifications/src/definitions.ts' file: Error: ENOENT: no such file or directory, open '/home/anon/d/ionic/node_modules/@capacitor/push-notifications/src/definitions.ts'
[react-scripts] Failed to parse source map from '/home/anon/d/ionic/node_modules/@capacitor/push-notifications/src/index.ts' file: Error: ENOENT: no such file or directory, open '/home/anon/d/ionic/node_modules/@capacitor/push-notifications/src/index.ts'
[react-scripts] Failed to parse source map from '/home/anon/d/ionic/node_modules/@capacitor/splash-screen/src/definitions.ts' file: Error: ENOENT: no such file or directory, open '/home/anon/d/ionic/node_modules/@capacitor/splash-screen/src/definitions.ts'
[react-scripts] Failed to parse source map from '/home/anon/d/ionic/node_modules/@capacitor/splash-screen/src/index.ts' file: Error: ENOENT: no such file or directory, open '/home/anon/d/ionic/node_modules/@capacitor/splash-screen/src/index.ts'
[react-scripts] Failed to parse source map from '/home/anon/d/ionic/node_modules/@capacitor/splash-screen/src/web.ts' file: Error: ENOENT: no such file or directory, open '/home/anon/d/ionic/node_modules/@capacitor/splash-screen/src/web.ts'
[react-scripts] Failed to parse source map from '/home/anon/d/ionic/node_modules/@capacitor/storage/src/definitions.ts' file: Error: ENOENT: no such file or directory, open '/home/anon/d/ionic/node_modules/@capacitor/storage/src/definitions.ts'
[react-scripts] Failed to parse source map from '/home/anon/d/ionic/node_modules/@capacitor/storage/src/index.ts' file: Error: ENOENT: no such file or directory, open '/home/anon/d/ionic/node_modules/@capacitor/storage/src/index.ts'
[react-scripts] Failed to parse source map from '/home/anon/d/ionic/node_modules/@capacitor/storage/src/web.ts' file: Error: ENOENT: no such file or directory, open '/home/anon/d/ionic/node_modules/@capacitor/storage/src/web.ts'

Any ideas about how to fix these sourcemap errors?

2

This is still happening with CRA5 official release. It seems to be an issue with Webpack 5 and source-image-loader. More details here.

3

Is there any update on this? I’ve the same problem but can’t resolve it.

4

Yeah this is still an issue. npm serve will work despite the errors, but it would be great to find a way to clean them up at some point.

5

The problem here is that Ionic React 6 uses react-scripts@5. This new version of react-scripts has sourcemap parsing enabled and will log a warning when no sourcemaps are found for a library. This did not happen in Ionic React 5 as that version required react-scripts@4 which did not have sourcemap parsing.

To ignore the source map, you can create an .env file in the root of the project and add this setting:

# .env
GENERATE_SOURCEMAP=false
1 Like
6

I did solve it. Under closer inspection, the CSS source maps point to scss files. Importing them into JS directly will not work. So what I did was I created an App.scss file and used the @use rule like so:

/* Core CSS required for Ionic components to work properly */
@use '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
@use '@ionic/react/css/normalize.css';
@use '@ionic/react/css/structure.css';
@use '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
@use '@ionic/react/css/padding.css';
@use '@ionic/react/css/float-elements.css';
@use '@ionic/react/css/text-alignment.css';
@use '@ionic/react/css/text-transformation.css';
@use '@ionic/react/css/flex-utils.css';
@use '@ionic/react/css/display.css';

I then imported my App.scss file into my App.tsx file as usual. Just make sure to have the sass preprocessor installed as a dependency.

The @import rule has been deprecated in Sass: Sass: The Module System is Launched

1 Like
7

Thanks, that’s a great solution!

In my case, to get it to work, I had to drop the .css extension like this:

@use '@ionic/react/css/core';