12.0.1 -> 12.0.4 collecting page data heap out of memory

What version of Next.js are you using?

12.0.4

What version of Node.js are you using?

16.13.0

What browser are you using?

CMD

What operating system are you using?

macOs/Linus

How are you deploying your application?

next build

Describe the Bug

After upgrading from 12.0.1 to a higher version my Github actions as well as my Heroku started to fail when when building the application. Localhost does work and builds the application as expected.

But all CI/CD processes (Github actions, Heroku deployment) fail with the following issue:

info  - Checking validity of types...
info  - Creating an optimized production build...
info  - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc.js" https://nextjs.org/docs/messages/swc-disabled
info  - Using external babel configuration from /home/runner/work/mercteil-shop-ui/mercteil-shop-ui/.babelrc.js
info  - Compiled successfully
info  - Collecting page data...

<--- Last few GCs --->

[1783:0x5300410]    47259 ms: Mark-sweep (reduce) 2047.0 (2083.8) -> 2046.6 (2084.5) MB, 3087.2 / 0.0 ms  (average mu = 0.213, current mu = 0.000) allocation failure scavenge might not succeed


<--- JS stacktrace --->

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
 1: 0xb200e0 node::Abort() [/opt/hostedtoolcache/node/16.4.2/x64/bin/node]
 2: 0xa3c157 node::FatalError(char const*, char const*) [/opt/hostedtoolcache/node/16.4.2/x64/bin/node]
 3: 0xd083ae v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/opt/hostedtoolcache/node/16.4.2/x64/bin/node]
 4: 0xd08727 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/opt/hostedtoolcache/node/16.4.2/x64/bin/node]
 5: 0xee9785  [/opt/hostedtoolcache/node/16.4.2/x64/bin/node]
 6: 0xef84b5 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/opt/hostedtoolcache/node/16.4.2/x64/bin/node]
 7: 0xefb5ac v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/opt/hostedtoolcache/node/16.4.2/x64/bin/node]
 8: 0xec000c v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/opt/hostedtoolcache/node/16.4.2/x64/bin/node]
 9: 0x123695b v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [/opt/hostedtoolcache/node/16.4.2/x64/bin/node]
10: 0x1640819  [/opt/hostedtoolcache/node/16.4.2/x64/bin/node]
warn  - Restarted collecting page data for /account/[[...params]] because it took more than 1500 seconds
warn  - See more info here https://nextjs.org/docs/messages/static-page-generation-timeout
warn  - Restarted collecting page data for /confirm-email/[token] because it took more than 1500 seconds

...

.babelrc

module.exports = {
  plugins: [
    ['lodash'],
    ['styled-components', { ssr: true, displayName: true }],
  ],
  env: {
    production: {
      presets: ['next/babel'],
      plugins: [['styled-components', { ssr: true, displayName: false }]],
    },
    
    local: { presets: ['next/babel', '@babel/preset-react'] },

    development: { presets: ['next/babel', '@babel/preset-react'] },

    test: {
      presets: ['@babel/preset-env', '@babel/preset-react'],
      plugins: [
        '@babel/plugin-transform-runtime',
        ['@babel/plugin-proposal-class-properties', { loose: true }],
        ['@babel/plugin-proposal-private-methods', { loose: true }],
        ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
      ],
    },
  },
};

Downgrading to 12.0.1 resolves the issue.

Increasing the timeout https://nextjs.org/docs/messages/page-data-collection-timeout did not help.

Described here is a very similar issue, if not the same: https://lzomedia.com/blog/getting-data-collection-timeout-when-trying-to-build-in-local-machine/

Expected Behavior

next build should just build the application without errors as it does locally or with 12.0.1.

Localhost works perfectly.

To Reproduce

I updated 12.0.1 to 12.0.4 and pushed the update to github & heroku. Both pipelines failed with this error.

[sandcastle]

@jcolakk

There are definitely issues caused by cyclical references in v12 (12.0.1 through 12.0.7 - I tried them all).

Builds were constantly failing and after a lot of screwing around, I was able to identify that it was being caused by references, especially where you are re-exporting things in index.ts files or referencing objects multiple different ways. After cleaning up the majority of our imports (using fewer index.ts files and importing things more explicitly), I was able to get our codebase to build on v12, but it still crashes when running in dev mode - I’m expecting that after more reference cleanups this will go away, but haven’t had time to do any more refactoring yet - our codebase is massive.

Hope that helps

[jcolakk]

We upgraded to 12.0.8 and changed our next.config.js to the following and now everything is working…

{
  experimental: {
      esmExternals: false
  }
}

Tried this, still the same error 😞

Also tried upgrading to latest canary and same thing, still not working