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

Jhonatan-Cortezz commented 3 weeks ago

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[bot] commented 2 weeks ago

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](https://nuxt.com/docs/community/reporting-bugs/#create-a-minimal-reproduction). You might also find these other articles interesting and/or helpful: - [The Importance of Reproductions](https://antfu.me/posts/why-reproductions-are-required) - [How to Generate a Minimal, Complete, and Verifiable Example](https://stackoverflow.com/help/mcve)

github-actions[bot] commented 1 week ago

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

nuxt / bridge