Build hangs after migrating Nuxt3.2 to Nuxt3.11

[lewis999bits]

Environment

• Operating System: Darwin
• Node Version: v20.12.2
• Nuxt Version: 3.11.2
• CLI Version: 3.11.1
• Nitro Version: 2.9.6
• Package Manager: [email protected]
• Builder: -
• User Config: modules, plugins, vite, runtimeConfig, routeRules
• Runtime Modules: @nuxtjs/[email protected], @pinia/[email protected], @nuxt/[email protected], @nuxtjs/[email protected], @vueuse/motion/[email protected], @use-wagmi/[email protected]
• Build Modules: -

Reproduction

Since the project is large scale and related with configuration thus wasn't able to share the reproduction

Describe the bug

I have Nuxt 3.2 project and needed to migrate it to latest Nuxt and necessary packages. But after migration, project build are hanging thus cannot deploy on vercel or anywhere.

Additional context

Here's the upgraded dependencies:

"devDependencies": {
  "@nuxt/content": "^2.12.1",
  "@nuxtjs/tailwindcss": "^6.12.0",
  "@tailwindcss/aspect-ratio": "^0.4.2",
  "nuxt": "^3.11.2"
},
"dependencies": {
  "@hotjar/browser": "^1.0.9",
  "@nuxtjs/axios": "^5.13.6",
  "@nuxtjs/supabase": "^1.2.2",
  "@pinia/nuxt": "^0.5.1",
  "@rainbow-me/rainbowkit": "^2.0.6",
  "@sendgrid/mail": "^8.1.3",
  "@supabase/gotrue-js": "^2.62.2",
  "@supabase/supabase-js": "^2.43.1",
  "@tailwindcss/forms": "^0.5.7",
  "@tanstack/query-persist-client-core": "^5.35.1",
  "@tanstack/query-sync-storage-persister": "^5.35.1",
  "@tanstack/vue-query": "^5.35.1",
  "@tryghost/content-api": "^1.11.21",
  "@use-wagmi/nuxt": "^2.2.0",
  "@vue/shared": "3.4.26",
  "@vueuse/components": "^10.9.0",
  "@vueuse/motion": "^2.1.0",
  "@walletconnect/modal": "^2.6.2",
  "axios": "^1.6.8",
  "chart.js": "^4.4.2",
  "chartjs-adapter-date-fns": "^3.0.0",
  "chartjs-plugin-watermark": "^2.0.2",
  "chartjs-to-image": "^1.2.2",
  "daisyui": "^4.10.5",
  "date-fns": "^3.6.0",
  "ethers": "^6.12.1",
  "h3": "^1.11.1",
  "html-to-image": "^1.11.11",
  "html2canvas": "^1.4.1",
  "jsonwebtoken": "^9.0.2",
  "lite-youtube-embed": "^0.3.2",
  "moment": "^2.30.1",
  "moralis": "^2.26.1",
  "pathe": "^1.1.2",
  "pinia": "^2.1.7",
  "use-wagmi": "^1.5.0",
  "viem": "^2.9.32",
  "vite-plugin-node-polyfills": "^0.21.0",
  "vue": "^3.4.21",
  "vue-chartjs": "^5.3.1",
  "vue-gtag-next": "^1.14.0",
  "vue-hotjar": "^1.4.0",
  "vue-hotjar-next": "^2.0.1",
  "vue-recaptcha-v3": "^2.0.1",
  "vue3-circle-progress": "^1.0.7",
  "vue3-lottie": "^3.3.0"
}

And nuxt configuration:

import { nodePolyfills } from "vite-plugin-node-polyfills";

export default defineNuxtConfig({
  modules: [
    "@nuxtjs/tailwindcss",
    "@pinia/nuxt",
    "@nuxt/content",
    "@nuxtjs/supabase",
    "@vueuse/motion/nuxt",
    [
      "@use-wagmi/nuxt",
      {
        excludeImports: ["useQuery"],
      },
    ],
  ],
  plugins: [
    "~/plugins/vue-hotjar-next.client.js",
    "~/plugins/google-recaptcha.ts",
  ],
  vite: {
    plugins: [nodePolyfills()],
  },
  runtimeConfig: {
    contentKey: process.env.GHOST_CONTENT_API_KEY,
    sendGridKey: process.env.SENDGRID_KEY,
    recaptchaKey: process.env.RECAPTCHA_SECRET,
    moralisKey: process.env.MORALIS_KEY,
    supabaseKey: process.env.SUPABASE_KEY,
    supabaseURL: process.env.SUPABASE_URL,
    public: {
      zapierHook: process.env.ZAPIER_HOOK,
      gtagId: process.env.GTAG_ID,
      ...
      motion: {
        directives: {
          "pop-bottom": {
            initial: {
              scale: 0,
              opacity: 0,
              y: 100,
            },
            visible: {
              scale: 1,
              opacity: 1,
              y: 0,
            },
          },
        },
      },
    },
  },

Logs

> build
> nuxt build

Nuxt 3.11.2 with Nitro 2.9.6                                                                                                                                                                        6:33:26 PM
ℹ Using Tailwind CSS from ~/assets/css/tailwind.css                                                                                                                               nuxt:tailwindcss 6:33:26 PM
ℹ Building client...                                                                                                                                                                               6:33:27 PM
ℹ vite v5.2.11 building for production...                                                                                                                                                          6:33:27 PM
transforming (25) node_modules/nuxt/dist/app/components/nuxt-root.vue
🌼   daisyUI 4.10.5
├─ ✔︎ 2 themes added             https://daisyui.com/docs/themes
╰─ ❤︎ Support daisyUI project:   https://opencollective.com/daisyui

node_modules/use-wagmi/dist/esm/hooks/useAccount.js (1:0): Module level directives cause errors when bundled, "use client" in "node_modules/use-wagmi/dist/esm/hooks/useAccount.js" was ignored.
node_modules/use-wagmi/dist/esm/hooks/useAccountEffect.js (1:0): Module level directives cause errors when bundled, "use client" in "node_modules/use-wagmi/dist/esm/hooks/useAccountEffect.js" was ignored.
node_modules/use-wagmi/dist/esm/hooks/useBalance.js (1:0): Module level directives cause errors when bundled, "use client" in "node_modules/use-wagmi/dist/esm/hooks/useBalance.js" was ignored.
node_modules/use-wagmi/dist/esm/hooks/useBlock.js (1:0): Module level directives cause errors when bundled, "use client" in "node_modules/use-wagmi/dist/esm/hooks/useBlock.js" was ignored.
node_modules/use-wagmi/dist/esm/hooks/useBlockNumber.js (1:0): Module level directives cause errors when bundled, "use client" in "node_modules/use-wagmi/dist/esm/hooks/useBlockNumber.js" was ignored.
node_modules/use-wagmi/dist/esm/hooks/useBlockTransactionCount.js (1:0): Module level directives cause errors when bundled, "use client" in "node_modules/use-wagmi/dist/esm/hooks/useBlockTransactionCount.js" was ignored.
...
Σ Total size: 20 MB (5.6 MB gzip)
✔ You can preview this build using node .output/server/index.mjs

[github-actions]

Would you be able to provide a reproduction? 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritize it based on its severity and how many people we think it might affect.

If needs reproduction labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

We have a couple of templates for starting with a minimal reproduction:

👉 https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz
👉 https://codesandbox.io/s/github/nuxt/starter/v3-codesandbox

A public GitHub repository is also perfect. 👌

Please ensure that the reproduction is as minimal as possible. See more details in our guide.

You might also find these other articles interesting and/or helpful:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[lewis999bits]

Sorry but I'm afraid that I cannot share the project because this is HIGH PRIVATE repository and I shared necessary part of code for resolving errors. What I want to confirm is that the above packages are still recommended to use with Nuxt 3.11 or if there are any configuration that somehow taken wrongly.

[manniL]

@lewis999bits Nobody requires you to upload your whole project as that wouldn't be a minimal reproduction anyway. So please provide a minimal reproduction that is runnable, e.g. via StackBlitz or Git repo 😋

[lewis999bits]

@manniL I've simply resolved this problem by getting rid of hybrid rendering. Still dont have any clue of what is the reason behind. Seems nuxt issue to me.