Fixing sourcemap errors in Webpack 5

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?

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

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

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.

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