Nuxt.js: Hot Reloading Issue / This page could not be found

[Duzbee]

I tried creating apps with each of these configurations (With create-nuxt-app, but I tried without it and I had the same issue after adding a simple error page and a nuxt link to a random page to check the error page):
no custom server framework, no custom UI framework, universal, no axios, no eslint, npm
express, bootstrap, universal, no axios, no eslint, npm

I need to specify that I tried with https only.

After I start the dev server with npm run dev and try to go to the dev server address I see the page and it always refreshes with the following server logs:

And this chrome console output:

EDIT: I just tried connecting with the IP and port, not the domain, and it now works perfectly. I think the problem is from the nginx reverse proxy. Here is my configuration:

server {
    listen   443 ssl;

    ssl on;
    ssl_certificate /etc/nginx/ssl/api/ssl.pem;
    ssl_certificate_key /etc/nginx/ssl/api/ssl.key;

    ssl_session_timeout 5m;

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv3:+EXP;
    ssl_prefer_server_ciphers on;

    server_name beta.example.com;

    location / {
        proxy_set_header        Host $host;
        proxy_set_header        X-Real-IP $remote_addr;
        proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header        X-Forwarded-Proto $scheme;
        proxy_pass              https://localhost:8443;
        proxy_read_timeout      90;
        proxy_redirect          https://localhost:8443 https://beta.example.com;
    }
}

_{This question is available on Nuxt.js community (#c2354)}

[BatuhanK]

can you remove proxy_redirect from your nginx cong and retry? and also localhost:8443 (your development nuxt server) has ssl? if not please proxy_pass to http://localhost:8443

[Duzbee]

Thank you, @BatuhanK!
I removed the proxy_redirect and kept the https because the dev server has ssl and it works perfect now.

[Duzbee]

Actually I tried to update nuxt and bootstrap-vue to latest version and the problem appeared again only on the domain. I downgraded them but even before this everytime I tried to access the server through the domain I got a 404 error for /bootstrap.css.map and in the chrome console I get a lot of there errors after a while:

[Duzbee]

I updated again and added proxy_redirect off; at the top of location / in the nginx config but the bootstrap.css.map error is still there only when connecting through the reverse proxy.

[Duzbee]

bootstrap.css.map issue fixed by removing /*# sourceMappingURL=bootstrap.css.map */ from node_modules/bootstrap/dist/css/bootstrap.css. Looks like it's working well now.

[Duzbee]

I just tried to add socket.io-client from the with sockets example and I have the first problem again (/_nuxt/...hot-update.json 404 error on dev server and page refresh every second, only on nginx reverse proxy, it works ok with direct ip). Can somebody give me a working nginx reverse proxy config to make this work properly?

[Duzbee]

I purged cache and activated development mode in cloudflare and somehow this stopped that error but now I get another one which also doesn't happen on direct IP:

[Duzbee]

Looks like everytime I change something I need to use npm run build otherwise I get errors or the production server doesn't work. I'm really confused.

[mhpm]

can anybody help me here?

[developius]

I'll second this.

I'm using Nuxt SSR with boostrap-vue and encountering exactly the same error you are - the 404 on bootstrap.css.map.
This is causing serious problems for me because Chrome devtools reads the bootstrap CSS, sees this line and attempts to load the CSS map.

/*# sourceMappingURL=bootstrap.css.map */

Now, I'm using nuxt's router which means that if the user is on the page /user/finnian, the path for the CSS map will resolve to /user/bootstrap.css.map. What happens here? The SSR code will attempt to find the user bootstrap.css.map and the whole thing explodes because it's rendered in the same context (not sure if that's the correct phrase here) as the original page load. This causes some _very_ strange errors in the browser which are totally unrelated to the original problem.

This was pretty hard to track down but having run through _all_ my code to no avail, I finally spotted this line in the logs that highlighted the problem:

nuxt:render Rendering url /users/finnian +0ms
nuxt:render Data fetching /users/finnian: 101ms +0ms
nuxt:render Rendering url /users/bootstrap.css.map +726ms <-- what?!

Removing the mapping line as @Duzbee suggests above should work, but that's not a viable solution because every time npm i is run, it will overwrite the change.

I'm a bit lost on what to do next, so if anyone fancies giving me a suggestion I'd really appreciate it!

[pi0]

Hi. We are sorry for inconveniences, this is a known issue with nuxt 1 and is almost resolved and will be available soon with 2.x release :)

[ChristophAnastasiades]

@pi0 Any idea when 2.x will be released?

[mariangemarcano]

@pi0 do you have any suggestions on how to handle errors related bootstrap.min.css.map while we wait for 2.x fix release?

{ statusCode: 404,
path: '/bootstrap.min.css.map',
message: 'This page could not be found' }

[DanjBethel]

Having this issue as well, any idea when the fix would be available?

[noncototient]

@mariangemarcano @DanjBethel

Clearing browser cache for localhost:3000 or whatever port you're using for development temporarily fixes the issue. That is until you add an external resource, which causes the infinite reload again. Clearing cache again resolves it.

So, keep clearing browser cache until 2.x comes out.

[aldarund]

@noncototient clearing cache doesnt fix that ssr rendering of css.map with 404 error. I use vuetify and it endups rendering 15+ urls which slowdown page a lot.

[DanjBethel]

@aldarund exact same issue here with vuetify. it's annoying.

[DanjBethel]

@aldarund know if there is anyway we can at least disable those render messages? or disable the mapping?

Meh.

[aldarund]

@DanjBethel i tried to set cssSourceMap to false but it doesnt change anything and the issue still exist, didnt find any other relevant settings, so i dont know..

[Kordonme]

Having the same issue. Opening DevTools in Chrome and checking "Disable Cache" under Network tab temporarily solves the issue.

[rlataguerra]

Problem is still there

[DanjBethel]

@Kordonme doesn't fix it for me. i'm having this issue using vuetify.

Anyone found a solution as yet?

[aldarund]

Disable cache change nothing for me too with vuetify. Page load from a second to 20-60 seconds due to this, thats pretty close to unusable...

[DanjBethel]

@aldarund weird. i don't actually get any performance issues bc of this so not sure if that's the cause of the load issues your having. I honestly only get the really annoying renderer error messages in console. Seems to be about it

[aldarund]

@DanjBethel content not fully rendered till all that 404 messages stop appearing on console ( and so loading indicator in chrome show that page is loading). And in console i see that js pieces not loaded until this errors stops to pop up in server console.
https://i.imgur.com/semUN6T.png
And the that 404 errors popup one by one, some of them takes 12ms some of them takes 5second.

nuxt:render Rendering url /apply/4a00dc66-eaa7-4ece-af41-c531e6416859/node_modules/vuetify/src/stylus/components/_small-dialog.css.map 

+15ms

  nuxt:render Rendering url /apply/4a00dc66-eaa7-4ece-af41-c531e6416859/node_modules/vuetify/src/stylus/components/_radio-group.css.map 

+5s

[DanjBethel]

@aldarund ah i see. maybe because I'm currently trying it with a fresh app i'm not seeing the full effects. 20-60 seconds for me is definitely unusable. hopefully this gets fixed soon.

[DanjBethel]

@aldarund weird, not sure if they changed something. but setting cssSourceMap to false under "build" in the nuxt config file works for me now. errors are gone.

[Krutie]

Encountered this same issue while _upgrading_ to Nuxt 1 and relevant PWA, SSL, Bootstrap packages. Strangest things started happening, like params of the fetch ({ store, params }) method started returning '_bootstrap.css.map_', instead of returning URL parameter of dynamic routes!

I was able to resolve it with the followings,

• removing Bootstrap dependencies from package.json,
• hence removing bootstrap from css property of nuxt.config.js
• AND included Bootstrap via CDN link under head: { link: [... { href:... property of nuxt.config.js.

It took away 404-hot.update errors, including DevTool warning of sourceMappping, etc.

[tetreault]

i can confirm when developing a static site in nuxt locally, every so often hot-update.json throws a 404 status and makes the page freak out and reload constantly. re-running npm run dev in my scenario resolves this but its pretty gnarly when this issue/bug happens.

I notice this for some reason tends to happen more often when developing a site and checking/tweaking it inside the ios simulator.

[liquidvisual]

@tetreault I get this all the time also. I really hope 2.0 solves it.

[tetreault]

if there any way to bump this up in terms of priority? It now is happening constantly in the iOS simulator. I love nuxt so much but this bug really sucks.

Also related, if you run npm run generate while npm run dev is also active in another terminal tab nuxt crashes and points a finger at sw.js not being installed or available.

[tetreault]

hi i wanted to expand on my issue a little bit. this issue has since been resolved for me. the root cause for this issue was me using the nuxt PWA module. the nuxt PWA module has some pretty bad bugs, one bug is this issue documented in the thread. the other issue is the fact that the nuxt PWA module breaks HTML5 video in desktop/mobile safari.

I am working on one project, encountered a bug where autoplaying HTML5 video inside a project worked EVERYWHERE except for safari. To make things more weird the video would play in safari over HTTP, but it would not play in safari over HTTPS. I tried every possible thing you could think of, but in the end commenting out the nuxt PWA module resolved both this issue above and the html5 video on safari over HTTPS. Needless to say, it was a pretty long day. Thankfully a PWA was a "nice to have" and not a client demand, so i could just easily resolve the problem.

[tetreault]

relevant thread for my comment: https://github.com/nuxt-community/pwa-module/issues/64. Angular also seems to have the same issue regarding service workers/html5 video/safari interestingly enough.

[vintprox]

Also...

 WAIT  Compiling...                                                     14:37:13


  ████████████████████ 100%

Build completed in 1.299s



 DONE  Compiled successfully in -9701ms                                 14:37:15

  nuxt:render Rendering url / +36s
  nuxt:render Data fetching /: 0ms +0ms
  nuxt:render Rendering url /_nuxt/img/hha-background-heaven.2167727.png +2s
{ statusCode: 404,
  path: '/_nuxt/img/hha-background-heaven.2167727.png',
  message: 'This page could not be found' }

Workaround: remove .nuxt directory while dev server's off and run it again.

[manniL]

This is an issue with https://github.com/nuxt-community/pwa-module

[tetreault]

right @manniL but it seems like there’s no intent to maintain the module from its creator, and none of the PRs are getting resolved, not issues being addressed. might as well promote visibility about issues somewhere, if no one pays attention to the PWA module.

[manniL]

@tetreault Don't worry. @galvez and I will look into all the issues with the pwa-module and bring it up to date! :wink:

[danieldenis01]

I have same problem. But I'm not using PWA Module.

[manniL]

@danieldenis01 You are using custom service workers or workbox then? :)

[dev7ch]

if you are using nuxt v1.0.0 changing to "nuxt": "^1.4.2" in package.json might partially solve it
as was the case for me (no PWA)

Update

Just changing the version, doesn^t work properly, but after yarn add node-sass sass-loader the hot-reload error dissapperd.

[danieldenis01]

I used the nuxt-community/starter-template project to start my app. So I added axios, dotenv and auth module as dependencies. Also I'm using bootstrap-vue.

To ensure that no dependency was causing this bug, I updated them. Currently the nuxt version is 1.4.2.

Apparently without adding any new packages in my project begin to have this strange behavior. The only things that change was new components that I created. None of them have syntax error or something like that.

If more details of the project are needed, let me know.

[dev7ch]

@danieldenis01 do you have this error also if you add sass plugins?

yarn add node-sass sass-loader

[n8udd]

Having the same issue.

Using the nuxt-community/starter-template and have the sass plugin npm install sass-loader node-sass --save-dev

npm run dev gives me the following:

Note: using Bulma CSS.

[vadim-givola]

I have the same issue, I'm using nuxt.js + vuetify
Setting cssSourceMap: false helped me so far

[danieldenis01]

@dev7ch I installed sass dependencies, but nothing changed. As a last resort, I deleted node_modules folder and run yarn command. For now, it's working normally.

[JoshuaScorrar]

Same problem with nuxt + vuetify, @vadim-givola Where did you set cssSoureMap to false? :)

[vadim-givola]

@JoshuaScorrar in nuxt.config.js build section, just added a new line cssSourceMap: false,

[JoshuaScorrar]

Thanks @vadim-givola But that didn't help me. To get it working for me, I deleted the .nuxt folder and re-ran the npm run dev

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.