bridge
bridge copied to clipboard
nuxt
`nuxi dev` infinite refresh loop
Environment
- Operating System:
Windows_NT - Node Version:
v16.13.1 - Nuxt Version:
2.16.0-27358576.777a4b7f - Package Manager:
[email protected] - Bundler:
Webpack - User Config:
head,srcDir,css,plugins,components,buildModules,modules,moment,tailwindcss,pwa,i18n,axios,proxy,router,build,alias,server,bridge - Runtime Modules:
@nuxtjs/[email protected],8n,@nuxtjs/[email protected],@nuxtjs/[email protected],[email protected] - Build Modules:
@nuxtjs/[email protected],@nuxtjs/[email protected],@nuxt/[email protected],@pinia/[email protected],@nuxt/[email protected]
Reproduction
As much as I cannot publicly share the repository containing the project's source code, I'd be more than happy to provide access through e.g. TeamViewer to one of the Nuxt team members.
Describe the bug
I have recently attempted to "experience Nuxt 3 features on existing Nuxt 2 projects" by following the instructions: https://v3.nuxtjs.org/getting-started/bridge/
When running npm run dev (nuxi dev), the project builds successfully, but is stuck in an infinite refresh loop, as shown on the below video:
https://drive.google.com/file/d/1Ce0Qv67EvyBbucwgFj5pmAy5o5Y73RHD/view?usp=sharing
UPDATE
This is the piece of code that triggers an infinite loop:
Additional context
package.json file content:
{
"name": "(...)",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxi dev",
"build": "nuxi build",
"start": "nuxi preview"
},
"dependencies": {
"@chenfengyuan/vue-countdown": "^1.1.5",
"@googlemaps/js-api-loader": "^1.13.4",
"@nuxtjs/axios": "^5.13.6",
"@nuxtjs/i18n": "^7.2.0",
"@nuxtjs/proxy": "^2.1.0",
"@nuxtjs/pwa": "^3.3.5",
"@pinia/nuxt": "^0.1.8",
"@popperjs/core": "^2.11.2",
"@tailwindcss/forms": "^0.4.0",
"@vueform/slider": "^2.0.8",
"@vuelidate/core": "^2.0.0-alpha.34",
"@vuelidate/validators": "^2.0.0-alpha.26",
"animate.css": "^4.1.1",
"browser-image-compression": "^1.0.17",
"cookie-universal-nuxt": "^2.1.5",
"core-js": "^3.19.3",
"lodash.get": "^4.4.2",
"mitt": "^3.0.0",
"nuxt-edge": "latest",
"pinia": "^2.0.11",
"portal-vue": "^2.1.7",
"reading-time": "^1.5.0",
"swiper": "^7.4.1",
"v-calendar": "^2.3.4",
"vue": "^2.6.14",
"vue-agile": "^2.0.0",
"vue-awesome-swiper": "^4.1.1",
"vue-clamp": "^0.4.0",
"vue-ellipse-progress": "^1.3.1",
"vue-infinite-loading": "^2.4.5",
"vue-lottie": "^0.2.1",
"vue-material-design-icons": "^5.0.0",
"vue-server-renderer": "^2.6.14",
"vue-tailwind": "^2.5.0",
"vue-template-compiler": "^2.6.14",
"vuedraggable": "^2.24.3",
"webpack": "^4.46.0"
},
"devDependencies": {
"@babel/eslint-parser": "^7.16.3",
"@nuxt/bridge": "npm:@nuxt/bridge-edge@^3.0.0-27406801.569aaeb",
"@nuxt/postcss8": "^1.1.3",
"@nuxt/types": "^2.15.8",
"@nuxtjs/eslint-config-typescript": "^6.0.1",
"@nuxtjs/eslint-module": "^3.0.2",
"@nuxtjs/moment": "^1.6.1",
"@nuxtjs/stylelint-module": "^4.1.0",
"@types/gapi": "^0.0.41",
"@types/lodash.get": "^4.4.6",
"@vue/runtime-dom": "3.2.30",
"autoprefixer": "^10.4.2",
"eslint": "^7.29.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-nuxt": "^3.1.0",
"eslint-plugin-vue": "^7.12.1",
"moment-duration-format": "^2.3.2",
"postcss": "^8.4.4",
"postcss-html": "^1.3.0",
"prettier": "^2.5.1",
"prettier-plugin-tailwindcss": "^0.1.5",
"sass": "^1.49.7",
"sass-loader": "^10.2.1",
"stylelint": "^14.1.0",
"stylelint-config-prettier": "^9.0.3",
"stylelint-config-standard": "^24.0.0",
"tailwindcss": "^3.0.16"
}
}
tsconfig.json file content:
{
"extends": "./.nuxt/tsconfig.json",
"compilerOptions": {
"types": [
"@nuxt/types",
"@nuxtjs/i18n",
"@nuxtjs/axios",
"@types/node",
"@nuxtjs/moment",
"@types/gapi",
"@pinia/nuxt"
]
}
}
nuxt.config.ts file content:
import path from "path";
import { defineNuxtConfig } from "@nuxt/bridge";
export default defineNuxtConfig({
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: "(...)",
meta: [
{ charset: "utf-8" },
{
name: "viewport",
content: "width=device-width, initial-scale=1"
},
{ hid: "description", name: "description", content: "" },
{ name: "format-detection", content: "telephone=no" }
],
link: [{ rel: "icon", type: "image/png", href: "/favicon.png" }],
script: [
{
src: "https://apis.google.com/js/api.js"
}
]
},
// Nuxt source directory location
srcDir: "./src/",
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
"~/assets/css/fonts.css",
"~/assets/css/main.css",
"~/assets/css/tailwind.css",
"animate.css/animate.min.css"
],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
"~/plugins/bus.client.ts",
"~/plugins/v-calendar.client.ts",
"~/plugins/variant-js.ts",
"~/plugins/vue-agile.ts",
"~/plugins/vue-ellipse-progress.client.ts",
"~/plugins/vue-tailwind.ts"
],
// Auto import components: https://go.nuxtjs.dev/config-components
components: [
(...)
],
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// https://go.nuxtjs.dev/stylelint
"@nuxtjs/stylelint-module",
// // https://go.nuxtjs.dev/tailwindcss
// "@nuxtjs/tailwindcss",
// https://github.com/nuxt-community/moment-module
"@nuxtjs/moment",
// https://tailwindcss.com/docs/guides/nuxtjs
"@nuxt/postcss8",
// https://pinia.vuejs.org/ssr/nuxt.html#installation
"@pinia/nuxt"
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/axios
"@nuxtjs/axios",
// https://i18n.nuxtjs.org
"@nuxtjs/i18n",
// https://go.nuxtjs.dev/pwa
"@nuxtjs/pwa",
// https://github.com/nuxt-community/proxy-module
"@nuxtjs/proxy",
// https://github.com/microcipcip/cookie-universal/tree/master/packages/cookie-universal-nuxt
"cookie-universal-nuxt"
],
moment: {
locales: ["cy"],
plugins: ["moment-duration-format"]
},
// https://tailwindcss.nuxtjs.org/options
tailwindcss: {
configPath: "../tailwind.config.js"
},
// PWA module configuration: https://go.nuxtjs.dev/pwa
pwa: {
manifest: {
lang: "en"
}
},
// https://i18n.nuxtjs.org/options-reference
i18n: {
locales: [
{
code: "en",
iso: "en-GB"
},
{
code: "cy",
iso: "cy-GB"
}
],
defaultLocale: "en",
vueI18nLoader: true,
detectBrowserLanguage: {
alwaysRedirect: true,
fallbackLocale: "en",
onlyOnRoot: false,
useCookie: true,
cookieCrossOrigin: false,
cookieDomain: null,
cookieKey: "i18n_redirected",
cookieSecure: false
}
},
// auth: {
// redirect: {
// login: "/authentication/sign-in",
// logout: "/",
// callback: false,
// home: "/"
// },
// localStorage: false,
// // resetOnError: true,
// strategies: {
// local: false,
// cookie: {
// // scheme: "refresh",
// endpoints: {
// login: {
// url: "/api/authentication/sign-in",
// method: "post"
// },
// logout: {
// url: "/api/authentication/sign-out",
// method: "delete"
// },
// // refresh: {
// // url: "/api/authentication/refresh",
// // method: "get"
// // },
// user: {
// url: "/api/authentication/user",
// method: "get"
// }
// },
// // token: {
// // required: false,
// // type: false
// // },
// // refreshToken: {
// // property: "auth.refresh_token",
// // maxAge: 604800
// // },
// user: {
// property: false,
// autoFetch: false
// }
// }
// }
// },
// https://axios.nuxtjs.org/options
axios: {
proxy: true,
credentials: true
},
// https://github.com/nuxt-community/proxy-module#proxy
proxy: {
"/api/": {
target: "http://localhost:8000/api/",
pathRewrite: {
"^/api/": ""
}
}
},
router: {
middleware: ["authentication-middleware"]
},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
transpile: ["vue-agile"],
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
},
standalone: true,
extend(config: any) {
config.resolve.alias["@icons"] = path.resolve(
__dirname,
"node_modules/vue-material-design-icons"
);
},
hotMiddleware: {
client: {
// turn off client overlay when errors are present
overlay: false
}
}
},
// https://nuxtjs.org/docs/configuration-glossary/configuration-alias/
alias: {
"@global": path.resolve(__dirname, "../types/*"),
"@icons/*": path.resolve(
__dirname,
"node_modules/vue-material-design-icons/*"
)
},
server: {
host: process.env.HOST || "0.0.0.0",
port:
process.env.PORT && typeof process.env.PORT === "number"
? parseInt(process.env.PORT)
: 3000
}
});
Logs
No response
From what you've said, it sounds like this might be more helpfully dealt with in https://github.com/nuxt-community/tailwindcss-module. Or do you think this is a Bridge-specific issue?
Hi @danielroe , I tried using the TailwindCSS module but the dev env still goes into the loop. Do you have any other suggestions how to fix the issue?
Hey @danielroe,
I have created a repository to illustrate the problem. To my surprise, this time the inifinite loop is there even though in other project I do not experience it with the @nuxtjs/tailwindcss module installed. I wanted to create the repo to illustrate the CSS loading delay for other issue (nuxt/bridge#134), but seems like the refresh loop is in place regardless... Let's treat this Github repo as a starter for both.
https://github.com/DamianGlowala/nuxt-bridge-css-loading-delay-repro
Please note the std-env dev dependency I had to explicitly add. If removed, the project won't build. This is a third issue to add on top of the above two.
Also experiencing issues with this. What causes the issue for me is that the configuration syntax seems to have changed. You have to change this:
// nuxt2, no bridge:
export default {
build: {
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
}
},
}
to this:
// nuxt2, with bridge:
export default defineNuxtConfig({
build: {
postcss: {
postcssOptions: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
},
},
})
That's fine so far. Now the infinite refresh loop is gone. Issue now that postcss seems not to work quite right anymore. It doesn't pick up the .css file and therefore tailwind just doesn't work.
My question to the authors of nuxtjs: Where would the best place be to create issues for this? (I am not using nuxt-tailwind, so not there).
- here in nuxt/framework?
- in @nuxt/postcss8
- or at tailwind?
Thanks @madebyfabian. ~~This issue may well be resolved by https://github.com/nuxt/framework/pull/2812, in that case. I've a test repo so can confirm shortly.~~ 👍
Update: not resolved by that PR.
Last days I been test the fb login sdk, but it doesn't let me use sdk without https, I notice of the infinite reload problem when change dev script to run it over https, first of all I thought that the problems comes from fb-sdk (maybe fb script check that is not a real ssl cert or somenting and it make a reload to prevent fraud), but after searching over hours with no results, finally I decide to start a new empty project and I got the same problem:
// windows 10 terminal
npx nuxi init nuxt3-app
code nuxt3-app
npm install
Then modify the package.json scripts to:
// nuxt.config.ts
{
"private": true,
"scripts": {
"dev": "nuxi dev --https", // before: "nuxi dev",
"build": "nuxi build",
"start": "node .output/server/index.mjs"
},
"devDependencies": {
"nuxt3": "latest"
}
}
And finally:
// VSCode terminal
npm run dev
And then I have an infinite loop reload page.
I recently ran into this problem, but it seemed to occur when hot-reloading after changing the config file. Stopping and starting the dev server fixed it. Not sure if it's related.
Update
So I found out what is making this happen, at least in my case.
If I enter 127.0.0.1:3000 in the browser URL, it enters this infinite loop. This may be due to it trying to redirect to the login page or the home page, depending on whether the client is logged in or not. This never happened before updating to Nuxt Bridge, so it could be that my redirection logic may need to be updated.
If I enter 127.0.01:3000/login or something similar, then I am able to navigate to this page. However, the infinite loop continues in the background, eating up resources!
However, I'm not quite sure what to do yet to resolve this.
(dockerized app) same on localhost:3000 If I enter http://172.18.0.2:3000 it's work without infinite refresh loop
I have the same issue, and I'm not sure if it's related to this.
But from what I can tell in my app it's the proxy-module that's not working properly. I'm proxying http://localhost:3000/api/* to http://my-api-url/*, but since the proxy-module is not working in bridge (from what I can tell?), the nuxt-app is calling itself instead of the proxied url, which leads to a redirect loop.
I have found a fix for this issue, at least for me. I was using a remote development environment, and Visual Studio Code only port-forwarded port 3000. For the vite-websocket, port 24678 is also required. You can fix this by going down to your console in VSC, and clicking on the Ports tab. Then you can add the port. Hope this helps!
I was proxying Nuxt in development mode on a subdomain and I faced the infinite reload issue:
[Warning] [HMR] Cannot find update (Full reload needed)
[Warning] [HMR] (Probably because of restarting the server)
[Warning] [HMR] Reloading page
However, accessing the server the app via IP address and port number worked.
In my case the issue was caused by Cloudflare's cache. Disabling the cache fixed the problem.
https://github.com/nuxt/bridge/issues/29#issuecomment-1140298758
I have found a fix for this issue, at least for me. I was using a remote development environment, and Visual Studio Code only port-forwarded port 3000. For the vite-websocket, port 24678 is also required. You can fix this by going down to your console in VSC, and clicking on the Ports tab. Then you can add the port. Hope this helps!
This one fix the problem for me!
I have found a fix for this issue, at least for me. I was using a remote development environment, and Visual Studio Code only port-forwarded port 3000. For the vite-websocket, port 24678 is also required. You can fix this by going down to your console in VSC, and clicking on the Ports tab. Then you can add the port. Hope this helps!
This one fix the problem for me!
Yes!!! You saved my life, I used VSC in remote dev environment, it refreshes infinitely, and your suggestion is priceless!
I have found a fix for this issue, at least for me. I was using a remote development environment, and Visual Studio Code only port-forwarded port 3000. For the vite-websocket, port 24678 is also required. You can fix this by going down to your console in VSC, and clicking on the Ports tab. Then you can add the port. Hope this helps!
also solved it for me in docker-compose environment
I have found a fix for this issue, at least for me. I was using a remote development environment, and Visual Studio Code only port-forwarded port 3000. For the vite-websocket, port 24678 is also required. You can fix this by going down to your console in VSC, and clicking on the Ports tab. Then you can add the port. Hope this helps!
Thank you. Really, thank you.
You saved my ass. You deserve some beers.
For me the problem was the nuxt.config.ts file was included in the content[] array in Tailwind config.
