bridge: `nuxi dev` infinite refresh loop

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: image

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

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 1
  • Comments: 16 (3 by maintainers)

Most upvoted comments

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!

+9
AnnikenYT on May 28, 2022

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.

+5
danielroe on Apr 13, 2022

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).

+5
madebyfabian on Feb 18, 2022

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.

+5
DamianGlowala on Apr 13, 2022

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!

image

+4
dickofn on Jun 21, 2022

#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!

image

Yes!!! You saved my life, I used VSC in remote dev environment, it refreshes infinitely, and your suggestion is priceless!

+3
mikeshi80 on Jul 4, 2022

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.

+3
irv-ro-j on Mar 7, 2022

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

+2
homerjam on Dec 13, 2022

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.

+1
virgolamobile on Oct 31, 2022

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

+1
bf on Jul 14, 2022
Read more comments on GitHub
← bridge: Migrating Nuxt 2 project to nuxt-bridge displays EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection.
bridge: Nuxt-bridge useNuxtApp() not available inside middleware →