nuxt: Hot Reloading Issue / This page could not be found
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;
}
}
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 5
- Comments: 49 (5 by maintainers)
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 š
@tetreault Donāt worry. @galvez and I will look into all the issues with the
pwa-moduleand bring it up to date! šProblem is still there
@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.
@pi0 Any idea when 2.x will be released?
i can confirm when developing a static site in nuxt locally, every so often
hot-update.jsonthrows a 404 status and makes the page freak out and reload constantly. re-runningnpm run devin 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.
Encountered this same issue while upgrading to Nuxt 1 and relevant PWA, SSL, Bootstrap packages. Strangest things started happening, like
paramsof thefetch ({ 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,
package.json,cssproperty ofnuxt.config.jshead: { link: [... { href:...property ofnuxt.config.js.It took away 404-hot.update errors, including DevTool warning of sourceMappping, etc.
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 generatewhilenpm run devis also active in another terminal tab nuxt crashes and points a finger atsw.jsnot being installed or available.Having the same issue. Opening DevTools in Chrome and checking āDisable Cacheā under Network tab temporarily solves the issue.
@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ā¦
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.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 userbootstrap.css.mapand the whole thing explodes because itās rendered in the samecontext(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:
Removing the mapping line as @Duzbee suggests above should work, but thatās not a viable solution because every time
npm iis 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!
This is an issue with https://github.com/nuxt-community/pwa-module
@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.
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.
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:
can you remove
proxy_redirectfrom your nginx cong and retry? and alsolocalhost:8443(your development nuxt server) has ssl? if not pleaseproxy_passtohttp://localhost:8443