Build takes a long time after add @nuxt/bridge in nuxt 2 appplication

[Jhonatan-Cortezz]

Enviroments

• Operating system: Ubuntu 22.04.4 LTS
• Node version: v22.2.0
• Nuxt version: ~2.17.3
• Package manager: yarn 1.22.x
• Builder: webpack ^4.44.2

Reproduction

I have installed @nuxt/bridge and nuxi then I have updated nuxt.config.js to using defineNuxtConfig and I have added bridge option with vite: true and nitro: true. After that I have updated the script in package.json like this "dev": "nuxi dev --port 4000" and "build": "nuxi build".

Describe the bug

When I run yarn dev it's work correctly and start dev server, but when I run yarn build I get this error:

<--- JS stacktrace --->
FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
----- Native stack trace -----

I have tried to fix it changing the build script for this "build": "node --max_old_space_size=4096 node_modules/nuxt/bin/nuxt.js build",, and I have added rolloupOptions in nuxt.config.js

build: {
  ...
  rollupOptions: {
       output: {
         manualChunks(id) {
           if (id.includes('node_modules')) {
             return id
               .toString()
               .split('node_modules/')[1]
               .split('/')[0]
               .toString()
           }
         },
         chunkSizeWarningLimit: 1000,
       },
     },

This work on my local, but it's taking around of ten minutes, When I try to deploy on heroku the process failed

Logs

This is the heroku log

-----> Building on the Heroku-22 stack
-----> Using buildpack: heroku/nodejs
-----> Node.js app detected
       
-----> Creating runtime environment
       
       NPM_CONFIG_LOGLEVEL=error
       YARN_PRODUCTION=false
       USE_YARN_CACHE=true
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
       
-----> Installing binaries
       engines.node (package.json):   22.x
       engines.npm (package.json):    unspecified (use default)
       engines.yarn (package.json):   1.22.x
       
       Resolving node version 22.x...
       Downloading and installing node 22.6.0...
       Using default npm version: 10.8.2
       Resolving yarn version 1.22.x...
       Downloading and installing yarn (1.22.22)
       Installed yarn 1.22.22
       
-----> Restoring cache
       - yarn cache
       
-----> Installing dependencies
       Installing node modules (yarn.lock)
       yarn install v1.22.22
       [1/4] Resolving packages...
       warning Resolution field "@apollo/federation@0.38.1" is incompatible with requested version "@apollo/federation@0.27.0"
       [2/4] Fetching packages...
       [3/4] Linking dependencies...
       warning " > @nuxtjs/apollo@4.0.1-rc.5" has unmet peer dependency "apollo-cache-inmemory@^1.6.6".
       warning "@nuxtjs/apollo > vue-cli-plugin-apollo@0.22.2" has unmet peer dependency "@vue/cli-shared-utils@^3.0.0 || ^4.0.0-0".
       warning "@nuxtjs/apollo > vue-cli-plugin-apollo > ts-node@8.10.2" has unmet peer dependency "typescript@>=2.7".
       warning "@nuxtjs/apollo > vue-cli-plugin-apollo > apollo > apollo-language-server > @apollographql/graphql-language-service-interface@2.0.2" has incorrect peer dependency "graphql@^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0".
       warning "@nuxtjs/apollo > vue-cli-plugin-apollo > apollo > apollo-language-server > @apollographql/graphql-language-service-interface > @apollographql/graphql-language-service-parser@2.0.2" has incorrect peer dependency "graphql@^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0".
       warning "@nuxtjs/apollo > vue-cli-plugin-apollo > apollo > apollo-language-server > @apollographql/graphql-language-service-interface > @apollographql/graphql-language-service-types@2.0.2" has incorrect peer dependency "graphql@^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0".
       warning "@nuxtjs/apollo > vue-cli-plugin-apollo > apollo > apollo-language-server > @apollographql/graphql-language-service-interface > @apollographql/graphql-language-service-utils@2.0.2" has incorrect peer dependency "graphql@^0.12.0 || ^0.13.0 || ^14.0.0".
       warning "@nuxtjs/apollo > vue-cli-plugin-apollo > apollo > apollo-language-server > @endemolshinegroup/cosmiconfig-typescript-loader > ts-node@9.1.1" has unmet peer dependency "typescript@>=2.7".
       warning " > @nuxtjs/firebase@7.6.1" has incorrect peer dependency "firebase@^8.3.1".
       warning "@nuxtjs/firebase > firebase-admin > @firebase/database-compat@0.1.8" has unmet peer dependency "@firebase/app-compat@0.x".
       warning "@nuxtjs/firebase > firebase-admin > @firebase/database-compat > @firebase/database > @firebase/auth-interop-types@0.1.6" has unmet peer dependency "@firebase/app-types@0.x".
       warning " > @vuex-orm/core@0.36.4" has unmet peer dependency "vuex@>=3.1.0".
       warning " > bootstrap@4.6.2" has unmet peer dependency "jquery@1.9.1 - 3".
       warning " > bootstrap@4.6.2" has unmet peer dependency "popper.js@^1.16.1".
       warning "nuxt > @nuxt/components@2.2.1" has unmet peer dependency "consola@*".
       warning " > vuex-persistedstate@4.1.0" has unmet peer dependency "vuex@^3.0 || ^4.0.0-rc".
       warning "@nuxt/bridge > @nuxt/bridge-schema > unbuild > rollup-plugin-dts@6.1.1" has unmet peer dependency "typescript@^4.5 || ^5.0".
       warning "@nuxtjs/eslint-config > eslint-plugin-vue@6.2.2" has incorrect peer dependency "eslint@^5.0.0 || ^6.0.0".
       warning "@nuxtjs/eslint-config > eslint-plugin-jest > @typescript-eslint/experimental-utils > @typescript-eslint/typescript-estree > tsutils@3.21.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
       warning " > @nuxtjs/html-validator@0.1.6" has unmet peer dependency "chalk@^3.0.0".
       warning " > @nuxtjs/html-validator@0.1.6" has unmet peer dependency "consola@^2.15.0".
       warning Workspaces can only be enabled in private projects.
       [4/4] Building fresh packages...
       Done in 126.42s.
       
-----> Build
       Detected both "build" and "heroku-postbuild" scripts
       Running heroku-postbuild (yarn)
       yarn run v1.22.22
       $ yarn build
       $ node --max_old_space_size=4096 node_modules/nuxt/bin/nuxt.js build
 WARN  extractCSS cannot work with parallel build due to limited work pool in thread-loader
       ℹ Using html-validate to validate server-rendered HTML
       [nuxt:sentry] ✔ Sentry reporting is enabled (client side: enabled, server side: enabled)
 ERROR  (node:4597) [DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead.
(Use node --trace-deprecation ... to show where the warning was created)
 WARN  [h3] Implicit event handler conversion is deprecated. Use eventHandler() or fromNodeMiddleware() to define event handlers.  
     Handler: function redirectSSL(req, res, next) {
    const url = req.url || "";
    if (!options.enabled || isExcluded(url, options.exclude)) {
      return next && next();
    }
    const _isHttps = isHTTPS__default['default'](req, options.trustProxy);
    const shouldRedirect = options.redirectUnknown ? !_isHttps : _isHttps === false;
    if (shouldRedirect) {
      const _redirectHost = (options.redirectHost || req.headers.host || "").split(":")[0];
      const _redirectURL = "https://" + _redirectHost + _port + url;
      res.writeHead(options.statusCode, {Location: _redirectURL});
      return res.end(_redirectURL);
    }
    return next && next();
  }
       🧪  Vite mode is experimental and some nuxt modules might be incompatible
           If you find a bug, please report via https://github.com/nuxt/bridge/issues with a minimal reproduction.
       ℹ Production build
       ℹ Bundling only for client side
       ℹ Target: static
       ℹ Using components loader to optimize imports
       ℹ Discovered Components: .nuxt/components/readme.md
       ✔ Builder initialized
       ✔ Nuxt files generated
 WARN  node_modules/bootstrap-vue/esm/index.js (23:19): A comment
"/*#__PURE__*/"
in "node_modules/bootstrap-vue/esm/index.js" contains an annotation that Rollup cannot interpret due to the position of the comment. The comment will be removed to avoid issues.
 WARN  [plugin:vite:reporter] [plugin vite:reporter] 
(!) /tmp/build_f04e6b3e/components/Icon.vue is dynamically imported by /tmp/build_f04e6b3e/.nuxt/components/index.js but also statically imported by defaultexport:/tmp/build_f04e6b3e/plugins/fontawesome.js, dynamic import will not move module into another chunk.
 WARN  [plugin:vite:reporter] [plugin vite:reporter] 
(!) /tmp/build_f04e6b3e/components/forms/FormInputLabel.vue is dynamically imported by /tmp/build_f04e6b3e/.nuxt/components/index.js but also statically imported by defaultexport:/tmp/build_f04e6b3e/plugins/vue-formulate.js, dynamic import will not move module into another chunk.
 WARN 
(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
 WARN  [plugin:vite:reporter] [plugin vite:reporter] 
(!) /tmp/build_f04e6b3e/components/Icon.vue is dynamically imported by /tmp/build_f04e6b3e/.nuxt/components/index.js but also statically imported by defaultexport:/tmp/build_f04e6b3e/plugins/fontawesome.js, dynamic import will not move module into another chunk.
 WARN  [plugin:vite:reporter] [plugin vite:reporter] 
(!) /tmp/build_f04e6b3e/components/forms/FormInputLabel.vue is dynamically imported by /tmp/build_f04e6b3e/.nuxt/components/index.js but also statically imported by defaultexport:/tmp/build_f04e6b3e/plugins/vue-formulate.js, dynamic import will not move module into another chunk.
 WARN 
(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
       ℹ Client built in 1361427ms
       ℹ Building server...
 WARN  node_modules/bootstrap-vue/esm/index.js (23:19): A comment
"/*#__PURE__*/"
in "node_modules/bootstrap-vue/esm/index.js" contains an annotation that Rollup cannot interpret due to the position of the comment. The comment will be removed to avoid issues.
 WARN  [plugin:vite:reporter] [plugin vite:reporter] 
(!) /tmp/build_f04e6b3e/components/Icon.vue is dynamically imported by /tmp/build_f04e6b3e/.nuxt/components/index.js but also statically imported by defaultexport:/tmp/build_f04e6b3e/plugins/fontawesome.js, dynamic import will not move module into another chunk.
 WARN  [plugin:vite:reporter] [plugin vite:reporter] 
(!) /tmp/build_f04e6b3e/components/forms/FormInputLabel.vue is dynamically imported by /tmp/build_f04e6b3e/.nuxt/components/index.js but also statically imported by defaultexport:/tmp/build_f04e6b3e/plugins/vue-formulate.js, dynamic import will not move module into another chunk.
 WARN 
(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
       ✔ Server built in 1033058ms
       [nitro] ✔ Generated public .output/public
       [nitro] ℹ Initializing prerenderer
       [nitro] ℹ Prerendering 3 routes
       [nitro]   ├─ / (519ms)
       [nitro]   ├─ /200 (4ms)
       [nitro]   ├─ /404 (15ms)
       [nitro] ℹ Prerendered 3 routes in 205.408 seconds
       [nitro] ℹ Building Nitro Server (preset: node-server)
-----> Timed out running buildpack Node.js
Terminated
 !     Push failed

Aditional context

Here is the simplified nuxt.config.js file

export default defineNuxtConfig({
  bridge: {
    vite: true,
    nitro: true,
  },
  publicRuntimeConfig: {
    integrations: {
      sentry: {
        isEnabled:
          process.env.NODE_ENV === 'production' &&
          Boolean(process.env.SENTRY_DSN),
        dsn: process.env.SENTRY_DSN,
      },
    },
  },
  modules: [
    '@nuxtjs/sentry',
  ],
  build: {
    hardSource: true,
    parallel: true,
    html: {
      minify: {
        minifyCSS: false,
        minifyJS: false,
      },
    },
    extractCSS: process.env.NODE_ENV === 'production',
    optimizeCSS: process.env.NODE_ENV === 'production',
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id
              .toString()
              .split('node_modules/')[1]
              .split('/')[0]
              .toString()
          }
        },
        chunkSizeWarningLimit: 1000,
      },
    },
    extend(config, ctx) {
      config.node = {
        fs: 'empty',
      }
      if (ctx.isDev && ctx.isClient) {
        config.devtool = 'source-map'
      }
    },
    transpile: ['vue-instantsearch', 'instantsearch.js/es'],
  },
  sentry: {
    dsn: process.env.SENTRY_DSN,
    attachCommits: false,
    disableServerSide: true,
    publishRelease: false, // requires @sentry/webpack-plugin (struggled to get that piece working)
    config: {
      environment:
        process.env.NODE_ENV === 'production' ? 'production' : 'development',
    },
  },
})

Appreciate any help

[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 prioritise 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/v2-bridge
👉 https://codesandbox.io/p/github/nuxt/starter/v2-bridge-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

[github-actions]

This issue was closed because it was open for 7 days without a reproduction.