`nuxi dev` infinite refresh loop #29

DamianGlowala · 2022-02-09T23:37:18Z

Environment

Operating System: Windows_NT
Node Version: v16.13.1
Nuxt Version: 2.16.0-27358576.777a4b7f
Package Manager: npm@8.1.2
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/axios@5.13.6, 8n, @nuxtjs/pwa@3.3.5, @nuxtjs/proxy@2.1.0, cookie-universal-nuxt@2.1.5
Build Modules: @nuxtjs/stylelint-module@4.1.0, @nuxtjs/moment@1.6.1, @nuxt/postcss8@1.1.3, @pinia/nuxt@0.1.8, @nuxt/bridge@3.0.0-27406801.569aaeb

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

The text was updated successfully, but these errors were encountered:

danielroe · 2022-02-10T16:21:24Z

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?

marcin-sieradzki · 2022-02-11T11:32:47Z

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?

DamianGlowala · 2022-02-11T11:41:34Z

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 (#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.

madebyfabian · 2022-02-18T11:42:54Z

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?

danielroe · 2022-02-18T11:44:51Z

Thanks @madebyfabian. ~~This issue may well be resolved by nuxt/framework#2812, in that case. I've a test repo so can confirm shortly.~~ 👍

Update: not resolved by that PR.

irv-ro-j · 2022-03-07T02:23:45Z

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.

Torgian · 2022-04-13T05:49:37Z

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.

bpor92 · 2022-04-14T10:20:27Z

(dockerized app)
same on localhost:3000
If I enter http://172.18.0.2:3000 it's work without infinite refresh loop

alexbikazzan · 2022-04-20T11:50:56Z

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.

AnnikenYT · 2022-05-28T17:09:22Z

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!

themreza · 2022-06-09T11:12:04Z

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.

dickofn · 2022-06-21T08:36:06Z

#29 (comment)

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!

mikeshi80 · 2022-07-04T06:23:15Z

#29 (comment)

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!

bf · 2022-07-14T05:45:55Z

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

virgolamobile · 2022-10-31T08:45:16Z

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.

homerjam · 2022-12-13T17:38:22Z

For me the problem was the nuxt.config.ts file was included in the content[] array in Tailwind config.

DamianGlowala added bridge pending triage labels Feb 9, 2022

danielroe added the upstream label Feb 10, 2022

danielroe added bug Something isn't working 🍰 p2-nice-to-have 🔨 p3-minor-bug and removed upstream pending triage 🍰 p2-nice-to-have labels Feb 14, 2022

madebyfabian mentioned this issue Feb 18, 2022

5.0.0-4 and Nuxt Bridge: The requested module '@nuxt/kit' does not provide an export named 'createResolver' nuxt-modules/tailwindcss#432

Closed

danielroe mentioned this issue Jan 19, 2023

Automatic refresh interrupt view page in development mode nuxt/nuxt#13458

Closed

danielroe mentioned this issue Mar 31, 2022

fix(nuxi): ignore buildDir on windows too nuxt/framework#3999

Merged

7 tasks

MakeTotalSense mentioned this issue Apr 13, 2022

Migration error when running project #68

Closed

danielroe transferred this issue from nuxt/framework Apr 13, 2022

madeofcloud mentioned this issue Apr 17, 2022

Nuxt Bridge TailwindCSS Issue #313

Closed

DamianGlowala closed this as completed Jan 12, 2023

wJoenn mentioned this issue Jan 1, 2024

Rebuild loop when running nuxi dev #832

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`nuxi dev` infinite refresh loop #29

`nuxi dev` infinite refresh loop #29

DamianGlowala commented Feb 9, 2022 •

edited

Loading

danielroe commented Feb 10, 2022

marcin-sieradzki commented Feb 11, 2022 •

edited

Loading

DamianGlowala commented Feb 11, 2022 •

edited

Loading

madebyfabian commented Feb 18, 2022

danielroe commented Feb 18, 2022 •

edited

Loading

irv-ro-j commented Mar 7, 2022

Torgian commented Apr 13, 2022 •

edited

Loading

bpor92 commented Apr 14, 2022 •

edited

Loading

alexbikazzan commented Apr 20, 2022

AnnikenYT commented May 28, 2022

themreza commented Jun 9, 2022 •

edited

Loading

dickofn commented Jun 21, 2022 •

edited

Loading

mikeshi80 commented Jul 4, 2022

bf commented Jul 14, 2022

virgolamobile commented Oct 31, 2022

homerjam commented Dec 13, 2022

nuxi dev infinite refresh loop #29

nuxi dev infinite refresh loop #29

Comments

DamianGlowala commented Feb 9, 2022 • edited Loading

Environment

Reproduction

Describe the bug

Additional context

Logs

danielroe commented Feb 10, 2022

marcin-sieradzki commented Feb 11, 2022 • edited Loading

DamianGlowala commented Feb 11, 2022 • edited Loading

madebyfabian commented Feb 18, 2022

danielroe commented Feb 18, 2022 • edited Loading

irv-ro-j commented Mar 7, 2022

Torgian commented Apr 13, 2022 • edited Loading

Update

bpor92 commented Apr 14, 2022 • edited Loading

alexbikazzan commented Apr 20, 2022

AnnikenYT commented May 28, 2022

themreza commented Jun 9, 2022 • edited Loading

dickofn commented Jun 21, 2022 • edited Loading

mikeshi80 commented Jul 4, 2022

bf commented Jul 14, 2022

virgolamobile commented Oct 31, 2022

homerjam commented Dec 13, 2022

`nuxi dev` infinite refresh loop #29

`nuxi dev` infinite refresh loop #29

DamianGlowala commented Feb 9, 2022 •

edited

Loading

marcin-sieradzki commented Feb 11, 2022 •

edited

Loading

DamianGlowala commented Feb 11, 2022 •

edited

Loading

danielroe commented Feb 18, 2022 •

edited

Loading

Torgian commented Apr 13, 2022 •

edited

Loading

bpor92 commented Apr 14, 2022 •

edited

Loading

themreza commented Jun 9, 2022 •

edited

Loading

dickofn commented Jun 21, 2022 •

edited

Loading