Nuxt.js: DevTools failed to parse SourceMap

[kyrsquir]

Version

v2.11.0

Reproduction link

https://github.com/kyrsquir/nuxt-source-map-bug

Steps to reproduce

Chrome 80.0.3987.87, bootstrap vue starter boilerplate.

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn dev

Open the console, reload the page and look for console warnings.

What is expected ?

No console warnings.

What is actually happening?

The following console warnings are shown:

DevTools failed to parse SourceMap: http://localhost:3000/bootstrap.css.map
DevTools failed to parse SourceMap: http://localhost:3000/bootstrap-vue.css.map

Additional comments?

Probably related to https://developers.google.com/web/updates/2020/01/devtools#sourcemaperrors

Might be related to https://github.com/nuxt/nuxt.js/issues/2840 but its solution does not work, looks like 404ed files are still considered as invalid by Chrome.

[vincent-kean]

I'm having the same issue. any advice?

[luochuanyuewu]

same thing happen to me.

[ramigs]

here also
Nuxt: v2.10.2
Chrome: Version 80.0.3987.87 (Official Build) (64-bit)

I don't recall seeing this before. Maybe only started happening with this Chrome version?

[cain]

"nuxt": "^2.11.0"
Chome: 80.0.3987.87

[cain]

Removing chrome vuejs extension fixes this for me 🤷‍♂️:(

[kyrsquir]

Removing chrome vuejs extension fixes this for me 🤷‍♂️:(

Not for me though

[maxkaido]

Disabling CSS and JS source maps in Dev Console Preferences cleared the warnings for me.

[Bernardchoo]

using different browser returns different console.log info.
Seems like a browser thingy :(

[thisromantelecom]

[jonmalave]

Disabling CSS and JS source maps in Dev Console Preferences cleared the warnings for me.

This does the trick! Thanks @maxkaido

[mikedcook]

Disabling CSS and JS source maps in Dev Console Preferences cleared the warnings for me.

This does the trick! Thanks @maxkaido

That's not really a fix, though. I want it to parse sourcemaps. This fix just tells it to stop trying.

[ghost]

Disabling CSS and JS source maps in Dev Console Preferences cleared the warnings for me.

This does the trick! Thanks @maxkaido

That's not really a fix, though. I want it to parse sourcemaps. This fix just tells it to stop trying.

This works for me.

nuxt.config.js
module.exports = {
modules: ['bootstrap-vue/nuxt'],
bootstrapVue: {
bootstrapCSS: false,
bootstrapVueCSS: false
}
}

~/assets/scss/custom.scss
@import 'bootstrap/scss/bootstrap.scss';
@import 'bootstrap-vue/src/index.scss';

~layouts/default.vue
<script>
import "~/assets/scss/custom.scss";
</script>

[paulirish]

I debugged this a little using @kyrsquir's example repo. I'm not a vue or webpack expert, but I do know chrome devtools and sourcemaps kinda well.

hopefully this helps a nuxt core developer..

In this project the http://localhost:3000/bootstrap-vue.css.map resource oddly 404's but delivers actual content: {"version": "3", "sources": [], "mappings": "" } (an empty sourcemap).

My best guess is that this failure case is related to the fact that these bootstrap files are pulled in via a nuxt module.

During build the css contents are inlined into the HTML, but the sourcemap reference points to a file that next doesn't have record of:

Interestingly, I tried editing this line:
https://github.com/nuxt/nuxt.js/blob/75bb0884cb922188edb7381e0729d391734fbcb8/packages/webpack/src/config/client.js#L23
to just return 'inline-source-map'. The nice part is that the CSS sourcemaps now work great, however..

1. it takes a while to build
   
   
   
   • there is probably another webpack devtool option that'd be faster to build and still resolve
   
   
2. the console error and 404 still exist..
   
   
   
   • it's just these style assets are being registered via other means (which I don't totally understand.)
   
   

---

generally, i guess what's happening is the /*# sourceMappingURL=xxx.js.map */ comments have url paths that are not part of the rest of the nuxt/webpack pipeline. the pipeline probably knows the actual sourcemap for it, but just lost the association.

good luck.

[irvv17]

same here :(

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[cain]

bump

[RaphaelDDL]

I did read @paulirish's reply but I do have some concern if is really nuxt or Chrome instead.

_My reasoning_: I've been using nuxt 2.9.2 since it's release (Aug 28, 2019) and keep using it up to this day. That's because 2.10.x onwards gives me CSP error using helmet as I did not allow eval policy and >=2.10.x uses modules with eval while 2.9.2 uses entire module (as I pointed at https://github.com/nuxt/nuxt.js/issues/4876#issuecomment-545152774 ).

Keeping in mind that I always had soucemaps working in my project and that nuxt was never updated past that point, I do see that Chrome now does not render my sourcemaps anymore and I cannot debug my project as before. Since I did not upgrade my nuxt but chrome does upgrade itself, I'm going towards the idea that DevTools sourcemap parser is broken.

To illustrate further, see the below screenshot:

The sourcemaps of chrome extensions are now giving the same error HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME but clicking on them does fare the file, e.g., the include.postload.js.map in the screenshot is part of Adblock, and clicking on the "404" url does give a correct sourcemap

While network reports it to be a 200:

Considering this issue is from February and both Chrome Stable and Canary are now giving same ERR_UNKNOWN_URL_SCHEME even on Nuxt released last year, seems the parser issue went into Chrome Stable?

Ideas?

[1shaked]

same problome here v81
does someone now if it has any effect of the app that is runnig

[brokenthorn]

Same error here:

While clicking the link doesn't actually return 404, it returns an empty sourcemap file:

{"version": "3", "sources": [], "mappings": "" }

My guess is that "sources":[] is empty so that might trigger a GET to a wrong address, which explains the 404? Or having an empty sourcemap file is sort of equal to a 404.

Like @paulirish said, this is an issue with the Nuxt client.js webpack configuration.

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[kyrsquir]

bump I guess

[msurguy]

Same thing is happening here, latest Nuxt.

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[Xide]

bump

[thisVioletHydra]

DevTools failed to load SourceMap

[floanwelt]

Disabling CSS and JS source maps in Dev Console Preferences cleared the warnings for me.

This does the trick! Thanks @maxkaido

That's not really a fix, though. I want it to parse sourcemaps. This fix just tells it to stop trying.

This works for me.

nuxt.config.js
module.exports = {
modules: ['bootstrap-vue/nuxt'],
bootstrapVue: {
bootstrapCSS: false,
bootstrapVueCSS: false
}
}

~/assets/scss/custom.scss
@import 'bootstrap/scss/bootstrap.scss';
@import 'bootstrap-vue/src/index.scss';

~layouts/default.vue
<script>
import "~/assets/scss/custom.scss";
</script>

You can also import it globally in the nuxt.config.js instead of the script section of default, depending on your needs.
I followed the guide in here to solve it: https://medium.com/javascript-in-plain-english/customize-bootstrap-in-nuxt-3da863703b35

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[MentalGear]

Getting this message on initial load, but not after.
Config file shows:

config {                                                                                                                                                               12:34:34
  name: 'client',
  mode: 'development',
  devtool: 'cheap-module-eval-source-map',