WebpackError: RangeError: Maximum call stack size exceeded (injectFirst TRUE)

[e2corporation]

When running gatsby build and injectFirst:true, the build fails with a WebPack Build error WebpackError: RangeError: Maximum call stack size exceeded

Upgrading to newer versions of Gatsby and related plugins still resulted in error. Is this due to a missing dependency when injectFirst mode is enabled? Both NPM and Yarn were used for package setup but still resulted in a failed build.

Running gatsby develop however works fine.

• MacOS High Sierra 10.13.3
• Node v11.6.0
• Gatsby 2.1.23
• React 16.8.4

// gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-material-ui`,
      options: {
        stylesProvider: {
          injectFirst: true,
        },
      },
    },
    `gatsby-plugin-styled-components`,
  ],
};

> gatsby build

success open and validate gatsby-configs — 0.007 s
success load plugins — 0.178 s
success onPreInit — 0.352 s
success delete html and css files from previous builds — 0.027 s
info One or more of your plugins have changed since the last time you ran Gatsby. As
a precaution, we're deleting your site's cache to ensure there's not any stale
data
success initialize cache — 0.019 s
success copy gatsby files — 0.056 s
success onPreBootstrap — 0.011 s
success source and transform nodes — 0.026 s
success building schema — 0.140 s
success createPages — 0.003 s
success createPagesStatefully — 0.067 s
success onPreExtractQueries — 0.001 s
success update schema — 0.073 s
success extract queries from components — 0.041 s
success run graphql queries — 0.031 s — 6/6 207.24 queries/second
success write out page data — 0.003 s
success write out redirect data — 0.001 s
⠐ onPostBootstrapdone generating icons for manifest
success onPostBootstrap — 0.371 s

info bootstrap finished - 3.033 s

⠈ Building production JavaScript and CSS bundles
WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

  npm install --save core-js@2    npm install --save core-js@3
  yarn add core-js@2              yarn add core-js@3

⠁ Building production JavaScript and CSS bundlesBrowserslist: caniuse-lite is outdated. Please run next command `yarn upgrade caniuse-lite browserslist`
success Building production JavaScript and CSS bundles — 36.787 s

error Building static HTML failed for path "/404/"

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html

  295 |       return plugin(this.result.root, this.result);
  296 |     } catch (error) {
> 297 |       this.handleError(error, plugin);
      | ^
  298 |       throw error;
  299 |     }
  300 |   };

  WebpackError: RangeError: Maximum call stack size exceeded

  - lazy-result.js:297 LazyResult.run
    [lib]/[gatsby-plugin-material-ui]/[postcss]/lib/lazy-result.js:297:1

  - lazy-result.js:281 LazyResult.sync
    [lib]/[gatsby-plugin-material-ui]/[postcss]/lib/lazy-result.js:281:1

  - lazy-result.js:305 LazyResult.stringify
    [lib]/[gatsby-plugin-material-ui]/[postcss]/lib/lazy-result.js:305:1

  - lazy-result.js:350 LazyResult.get
    [lib]/[gatsby-plugin-material-ui]/[postcss]/lib/lazy-result.js:350:1

  - autoprefixer.js:8
    [lib]/[gatsby-plugin-material-ui]/src/autoprefixer.js:8:53

  - lazy-result.js:295 LazyResult.run
    [lib]/[gatsby-plugin-material-ui]/[postcss]/lib/lazy-result.js:295:1

  - lazy-result.js:281 LazyResult.sync
    [lib]/[gatsby-plugin-material-ui]/[postcss]/lib/lazy-result.js:281:1

  - lazy-result.js:305 LazyResult.stringify
    [lib]/[gatsby-plugin-material-ui]/[postcss]/lib/lazy-result.js:305:1

  - lazy-result.js:350 LazyResult.get
    [lib]/[gatsby-plugin-material-ui]/[postcss]/lib/lazy-result.js:350:1

  - autoprefixer.js:8
    [lib]/[gatsby-plugin-material-ui]/src/autoprefixer.js:8:53

  - lazy-result.js:295 LazyResult.run
    [lib]/[gatsby-plugin-material-ui]/[postcss]/lib/lazy-result.js:295:1

  - lazy-result.js:281 LazyResult.sync
    [lib]/[gatsby-plugin-material-ui]/[postcss]/lib/lazy-result.js:281:1

  - lazy-result.js:305 LazyResult.stringify
    [lib]/[gatsby-plugin-material-ui]/[postcss]/lib/lazy-result.js:305:1

  - lazy-result.js:350 LazyResult.get
    [lib]/[gatsby-plugin-material-ui]/[postcss]/lib/lazy-result.js:350:1

  - autoprefixer.js:8
    [lib]/[gatsby-plugin-material-ui]/src/autoprefixer.js:8:53

  - lazy-result.js:295 LazyResult.run
    [lib]/[gatsby-plugin-material-ui]/[postcss]/lib/lazy-result.js:295:1

package.json Dependencies

  "dependencies": {
    "@material-ui/core": "^4.2.1",
    "@material-ui/styles": "^4.2.1",
    "gatsby": "2.1.23",
    "gatsby-image": "2.0.31",
    "gatsby-plugin-config": "1.0.7",
    "gatsby-plugin-htaccess": "^1.1.1",
    "gatsby-plugin-layout": "1.0.12",
    "gatsby-plugin-manifest": "2.0.22",
    "gatsby-plugin-material-ui": "^2.1.4",
    "gatsby-plugin-mixpanel": "^3.0.3",
    "gatsby-plugin-react-helmet": "3.0.8",
    "gatsby-plugin-react-svg": "2.1.0",
    "gatsby-plugin-sharp": "2.0.25",
    "gatsby-plugin-typescript": "2.0.10",
    "gatsby-plugin-ueno": "2.0.1",
    "gatsby-source-filesystem": "^2.1.6",
    "gatsby-source-mysql": "^2.2.0",
    "gatsby-transformer-sharp": "2.1.15",
    "gsap": "2.1.2",
    "gsap-tools": "1.0.9",
    "lodash": "^4.17.11",
    "react": "16.8.4",
    "react-dom": "16.8.4",
    "react-helmet": "5.2.0"
  },
  "devDependencies": {
    "@babel/core": "7.3.4",
    "@types/gsap": "1.20.2",
    "@types/lodash": "4.14.122",
    "@types/node": "11.10.4",
    "@types/react": "16.8.6",
    "@types/react-dom": "16.8.2",
    "@types/react-helmet": "5.0.8",
    "@ueno/stylelint-config": "1.1.2",
    "@ueno/tslint-config": "1.0.5",
    "rimraf": "2.6.3",
    "stylelint": "9.10.1",
    "tslint": "5.13.1",
    "tslint-react": "3.6.0",
    "typescript": "3.3.3333"
  }

[e2corporation]

[oliviertassinari]

Do you have a minimal reproduction repo?

[e2corporation]

@oliviertassinari This is on a private stack, but it should be easily reproduced using the gatsby-cli site starter.

1. Create new app with gatsby new gatsby-site
2. Add Material-UI Dependencies

   "@material-ui/core": "^4.2.1",
   "@material-ui/styles": "^4.2.1",
   "gatsby-plugin-material-ui": "^2.1.4",

3. Install Deps with NPM or Yarn
4. Turn on injectFirst:true in gatsby-config.js

   module.exports = {
   plugins: [
   {
     resolve: `gatsby-plugin-material-ui`,
     options: {
       stylesProvider: {
         injectFirst: true,
       },
     },
   },
   ],
   };

5. Attempt to run a build with npm run build or gatsby build

[hupe1980]

@e2corporation @oliviertassinari I tried the reproduction. With gatsby in version 2.13.39 I get no error. Can you also switch to the current gatsby version and check if the error still exists?

[e2corporation]

@oliviertassinari Thanks for the feedback, yes I did run tests with 2.13.39 and received the same results. I'll try again to see what happens.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed because of inactivity. Please open a new issue if are still encountering problems.

[zerubeus]

I have this exact same problem how it was fixed for you ? @e2corporation