Source map error: Error: Invalid URL how to fix it?

Question

I have next.js app using chakra ui styles . Its movie app and its fetching images from movie db. When i open my site before image load I can see only ulr text for this img then after 1s image laodes. How to prevent this ?

And i get that error form firefox:

Source map error: Error: Invalid URL: webpack://[name]_[chunkhash]/webpack/bootstrap Resource URL: http://127.0.0.1:3001/_next/static/development/dll/dll_01ec57fc9b90d43b98a8.js?ts=1574263926643 Source Map URL: dll_01ec57fc9b90d43b98a8.js.map

Answer 1

Try to config output.devtoolNamespace.

This option determines the modules namespace used with the output.devtoolModuleFilenameTemplate. When not specified, it will default to the value of: output.library. It's used to prevent source file path collisions in sourcemaps when loading multiple libraries built with webpack.

If you use firefox to debug, you'd better config output.devtoolModuleFilenameTemplate to use http:// instead of webpack://.

Answer 2

I had the same error and found out that there seems to be a bug concerning source maps and Firefox:

https://github.com/vercel/next.js/issues/9471

Chrome does not show this problem...