Gatsby: Minified exception occurred; use the non-minified dev environment

[ghost]

Description

Gatsby Build is failing, while gatsby develop is working.

Steps to reproduce

set GATSBY_ENV=development && npm run build-css && gatsby build

Expected result

It should have succeed in Gatbsy Build

Actual result

`$ set GATSBY_ENV=development && npm run build-css && gatsby build

[email protected] build-css C:\StaticGenerators\Projects\fun\MT-MW-Braun-CA
postcss ./assets/css/tailwind.css -o ./assets/css/index.css

success open and validate gatsby-config — 0.012 s
success load plugins — 0.319 s
success onPreInit — 1.434 s
success delete html and css files from previous builds — 1.315 s
success initialize cache — 0.273 s
success copy gatsby files — 0.188 s
success onPreBootstrap — 0.001 s
⠁ :: starting to fetch data from Bazaarvoice ::
⠂ source and transform nodes
:: fetching Bazaarvoice data is completed ::
⠄ source and transform nodesStarting to fetch data from Contentful
Fetching default locale
⠄ source and transform nodesdefault local is : en-CA
⠄ source and transform nodescontentTypes fetched 43
Updated entries 0
Deleted entries 0
Updated assets 0
Deleted assets 0
Fetch Contentful data: 2166.855ms
success source and transform nodes — 9.187 s
success building schema — 2.322 s
success createPages — 0.780 s
success createPagesStatefully — 0.048 s
success onPreExtractQueries — 0.026 s
success update schema — 1.712 s
warning Using the global graphql tag is deprecated, and will not be supported in v3.
Import it instead like: import { graphql } from 'gatsby' in file:
C:/StaticGenerators/Projects/fun/MT-MW-Braun-CA/src/utils/graphqlHelper.js
warning Using the global graphql tag is deprecated, and will not be supported in v3.
Import it instead like: import { graphql } from 'gatsby' in file:
C:/StaticGenerators/Projects/fun/MT-MW-Braun-CA/src/utils/graphqlHelper.js
warning Using the global graphql tag is deprecated, and will not be supported in v3.
Import it instead like: import { graphql } from 'gatsby' in file:
C:/StaticGenerators/Projects/fun/MT-MW-Braun-CA/src/utils/graphqlHelper.js
warning Using the global graphql tag is deprecated, and will not be supported in v3.
Import it instead like: import { graphql } from 'gatsby' in file:
C:/StaticGenerators/Projects/fun/MT-MW-Braun-CA/src/utils/graphqlHelper.js
warning Using the global graphql tag is deprecated, and will not be supported in v3.
Import it instead like: import { graphql } from 'gatsby' in file:
C:/StaticGenerators/Projects/fun/MT-MW-Braun-CA/src/utils/graphqlHelper.js
warning Using the global graphql tag is deprecated, and will not be supported in v3.
Import it instead like: import { graphql } from 'gatsby' in file:
C:/StaticGenerators/Projects/fun/MT-MW-Braun-CA/src/utils/graphqlHelper.js
warning Using the global graphql tag is deprecated, and will not be supported in v3.
Import it instead like: import { graphql } from 'gatsby' in file:
C:/StaticGenerators/Projects/fun/MT-MW-Braun-CA/src/utils/graphqlHelper.js
warning Using the global graphql tag is deprecated, and will not be supported in v3.
Import it instead like: import { graphql } from 'gatsby' in file:
C:/StaticGenerators/Projects/fun/MT-MW-Braun-CA/src/utils/graphqlHelper.js
warning Using the global graphql tag is deprecated, and will not be supported in v3.
Import it instead like: import { graphql } from 'gatsby' in file:
C:/StaticGenerators/Projects/fun/MT-MW-Braun-CA/src/utils/graphqlHelper.js
warning Using the global graphql tag is deprecated, and will not be supported in v3.
Import it instead like: import { graphql } from 'gatsby' in file:
C:/StaticGenerators/Projects/fun/MT-MW-Braun-CA/src/utils/graphqlHelper.js
warning Using the global graphql tag is deprecated, and will not be supported in v3.
Import it instead like: import { graphql } from 'gatsby' in file:
C:/StaticGenerators/Projects/fun/MT-MW-Braun-CA/src/utils/graphqlHelper.js
warning Using the global graphql tag is deprecated, and will not be supported in v3.
Import it instead like: import { graphql } from 'gatsby' in file:
C:/StaticGenerators/Projects/fun/MT-MW-Braun-CA/src/utils/graphqlHelper.js
warning Using the global graphql tag is deprecated, and will not be supported in v3.
Import it instead like: import { graphql } from 'gatsby' in file:
C:/StaticGenerators/Projects/fun/MT-MW-Braun-CA/src/utils/graphqlHelper.js
warning Using the global graphql tag is deprecated, and will not be supported in v3.
Import it instead like: import { graphql } from 'gatsby' in file:
C:/StaticGenerators/Projects/fun/MT-MW-Braun-CA/src/utils/graphqlHelper.js
warning Using the global graphql tag is deprecated, and will not be supported in v3.
Import it instead like: import { graphql } from 'gatsby' in file:
C:/StaticGenerators/Projects/fun/MT-MW-Braun-CA/src/utils/graphqlHelper.js
warning Using the global graphql tag is deprecated, and will not be supported in v3.
Import it instead like: import { graphql } from 'gatsby' in file:
C:/StaticGenerators/Projects/fun/MT-MW-Braun-CA/src/utils/graphqlHelper.js
warning Using the global graphql tag is deprecated, and will not be supported in v3.
Import it instead like: import { graphql } from 'gatsby' in file:
C:/StaticGenerators/Projects/fun/MT-MW-Braun-CA/src/utils/graphqlHelper.js
warning Using the global graphql tag is deprecated, and will not be supported in v3.
Import it instead like: import { graphql } from 'gatsby' in file:
C:/StaticGenerators/Projects/fun/MT-MW-Braun-CA/src/utils/graphqlHelper.js
warning Using the global graphql tag is deprecated, and will not be supported in v3.
Import it instead like: import { graphql } from 'gatsby' in file:
C:/StaticGenerators/Projects/fun/MT-MW-Braun-CA/src/utils/graphqlHelper.js
warning Using the global graphql tag is deprecated, and will not be supported in v3.
Import it instead like: import { graphql } from 'gatsby' in file:
C:/StaticGenerators/Projects/fun/MT-MW-Braun-CA/src/utils/graphqlHelper.js
warning Using the global graphql tag is deprecated, and will not be supported in v3.
Import it instead like: import { graphql } from 'gatsby' in file:
C:/StaticGenerators/Projects/fun/MT-MW-Braun-CA/src/utils/graphqlHelper.js
success extract queries from components — 0.822 s
success run graphql queries — 5.440 s — 119/119 21.88 queries/second
success write out page data — 0.028 s
success write out redirect data — 0.002 s
success onPostBootstrap — 0.023 s

info bootstrap finished - 29.406 s

success Building production JavaScript and CSS bundles — 44.608 s
⠂ Building static HTML for pages — 100/230 27.63 pages/second(node:6048) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.

error Building static HTML for pages failed

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

31 | var error;
32 | if (format === undefined) {

33 | error = new Error(
| ^
34 | 'Minified exception occurred; use the non-minified dev environment ' +
35 | 'for the full error message and additional helpful warnings.'
36 | );

WebpackError: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful wa rnings.

• invariant.js:33 invariant
  [lib]/[invariant]/invariant.js:33:1

• index.js:590
  [lib]/[@reach]/router/es/index.js:590:1

• react.production.min.js:18 V
  [lib]/[react]/cjs/react.production.min.js:18:48

• react.production.min.js:16 S
  [lib]/[react]/cjs/react.production.min.js:16:210

• react.production.min.js:18 W
  [lib]/[react]/cjs/react.production.min.js:18:388

• react.production.min.js:19 Object.map
  [lib]/[react]/cjs/react.production.min.js:19:67

• index.js:211 RouterImpl.render
  [lib]/[@reach]/router/es/index.js:211:1

• react-dom-server.node.production.min.js:28 d
  [lib]/[react-dom]/cjs/react-dom-server.node.production.min.js:28:207

• react-dom-server.node.production.min.js:28 ya
  [lib]/[react-dom]/cjs/react-dom-server.node.production.min.js:28:493

• react-dom-server.node.production.min.js:33 a.render
  [lib]/[react-dom]/cjs/react-dom-server.node.production.min.js:33:46

• react-dom-server.node.production.min.js:32 a.read
  [lib]/[react-dom]/cjs/react-dom-server.node.production.min.js:32:246

• react-dom-server.node.production.min.js:43 renderToString
  [lib]/[react-dom]/cjs/react-dom-server.node.production.min.js:43:1

• static-entry.js:145 Module../.cache/static-entry.js.__webpack_exports__.default
  lib/.cache/static-entry.js:145:16

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.`

Environment

"resolutions": {
    "graphql": "0.13.2"
  },
  "author": "Mindtree",
  "license": "ISC",
  "dependencies": {
    "autoprefixer": "^8.5.0",
    "axios": "0.16.1",
    "circular-json": "0.3.1",
    "classnames": "^2.2.5",
    "file-saver": "^1.3.8",
    "fs": "0.0.1-security",
    "fs-extra": "3.0.1",
    "gatsby": "^2.0.0-beta.96",
    "gatsby-image": "^1.0.55",
    "gatsby-link": "^2.0.0-beta.20",
    "gatsby-plugin-canonical-urls": "^1.0.18",
    "gatsby-plugin-google-analytics": "^2.0.0-beta.4",
    "gatsby-plugin-google-tagmanager": "^1.0.19",
    "gatsby-plugin-i18n": "^0.4.2",
    "gatsby-plugin-manifest": "^2.0.2-beta.5",
    "gatsby-plugin-offline": "^2.0.0-beta.9",
    "gatsby-plugin-purify-css": "^2.2.1",
    "gatsby-plugin-react-helmet": "^3.0.0-beta.4",
    "gatsby-plugin-robots-txt": "^1.3.0",
    "gatsby-plugin-sharp": "^2.0.0-beta.7",
    "gatsby-plugin-sitemap": "^2.0.0-beta.3",
    "gatsby-source-contentful": "^2.0.1-beta.15",
    "gatsby-transformer-remark": "^2.1.1-beta.6",
    "gatsby-transformer-sharp": "^2.1.1-beta.6",
    "intl": "^1.2.5",
    "json-query": "2.2.2",
    "jsonwebtoken": "^8.3.0",
    "lodash": "^4.17.10",
    "lodash.debounce": "4.0.8",
    "mobx": "^4.3.0",
    "mobx-react": "^5.1.2",
    "picturefill": "^3.0.2",
    "postcss-import": "^11.1.0",
    "qs-stringify": "^1.1.0",
    "query-string": "^6.1.0",
    "react": "^16.4.1",
    "react-autosuggest": "9.0.1",
    "react-dom": "^16.4.1",
    "react-helmet": "^5.2.0",
    "react-idle-timer": "^4.0.7",
    "react-image-magnify": "^2.7.0",
    "react-intl": "^2.4.0",
    "react-slick": "^0.23.1",
    "swiftype": "0.3.1",
    "validatorjs": "^3.14.2"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.3",
    "babel-jest": "^22.4.4",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-preset-react-app": "^3.0.3",
    "enzyme": "^3.0.0",
    "enzyme-adapter-react-15": "^1.0.0",
    "enzyme-to-json": "^3.0.1",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-config-prettier": "^2.9.0",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-import": "^2.11.0",
    "eslint-plugin-jsx-a11y": "^5.0.3",
    "eslint-plugin-prettier": "^2.6.0",
    "eslint-plugin-react": "^7.8.1",
    "jest": "^21.2.1",
    "postcss": "^7.0.1",
    "postcss-cli": "^6.0.0",
    "prettier": "1.12.1",
    "purgecss": "^0.21.0",
    "react-test-renderer": "^15.5.4",
    "tailwindcss": "^0.5.1"
  }

File contents (if changed)

gatsby-config.js: N/A
package.json: N/A
gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[KyleAMathews]

When you get errors like that, you want to disable minimization by webpack so that you can see the development version of React which will show you the actual errors.

We used to in v1 have a build flag --no-uglify which would do that for you but until this issue is fixed, you need to do it manually by editing node_modules/gatsby/dist/utils/webpack.config.js and searching forconfig.optimizationand addingminimize: false`

https://stackoverflow.com/questions/51263506/webpack-4-disable-uglifyjs-webpack-plugin

[KyleAMathews]

@tryzniak just did a PR actually fixing that issue in https://github.com/gatsbyjs/gatsby/pull/7243 so if you upgrade to [email protected], you can use the --no-uglify build flag.

[ghost]

Don't see Beta.98 release available under releases tab.. is it released ?

[ghost]

`success Building production JavaScript and CSS bundles — 15.023 s
⠁ Building static HTML for pages — 150/228 33.43 pages/second(node:17004) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.

error Building static HTML for pages failed

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

20 |
21 | // Flag the module as loaded

22 | module.l = true;
| ^
23 |
24 | // Return the exports of the module
25 | return module.exports;

WebpackError: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.

• bootstrap:22 invariant
  lib/webpack/bootstrap:22:1

• static-entry.js:78
  lib/.cache/static-entry.js:78:5

• bootstrap:7 V
  lib/webpack/bootstrap:7:1

• bootstrap:5 S
  lib/webpack/bootstrap:5:1

• bootstrap:7 W
  lib/webpack/bootstrap:7:1

• bootstrap:8 Object.map
  lib/webpack/bootstrap:8:1

• bootstrap:22 a.render
  lib/webpack/bootstrap:22:1

• bootstrap:21 a.read
  lib/webpack/bootstrap:21:1

• bootstrap:32 renderToString
  lib/webpack/bootstrap:32:1

• static-entry.js:145 Module../.cache/static-entry.js.__webpack_exports__.default
  lib/.cache/static-entry.js:145:16

• bootstrap:24 Promise
  lib/webpack/bootstrap:24:1`

After upgrading to latest beta & using --no-uglify parameter above is the stack trace

[tryzniak]

@vishalniit Hmm, I've run GATSBY_ENV=development && gatsby build --no-uglify and have no errors. What is build-css? It would be great, if you could provide us with a reproduction repo.

[KyleAMathews]

@vishalniit the error is indicating that you're importing somewhere into one of your components the node.js module "buffer" which doesn't work in the browser. You can find that by opening the generated js file at public/render-page.js and looking through for where buffer is added and trace that back to a component. Or you can grep public for Buffer and find which js bundle file it's in and then use https://www.npmjs.com/package/source-map-explorer to look at the dependency tree for that bundle.

Closing as there's not I don't believe anything we can do to help more with this on our end.

[ghost]

@KyleAMathews that is warning that should not broke the build process.

[rtm619]

Hi Kyle,
During Develop, one of the pages throws this error in the browser console.

Uncaught TypeError: Illegal invocation
    at setValueForProperty (D:/Workspace/Gatsby_V2_Migration_Workspace/Backup/MT/node_modules/react-dom/cjs/react-dom.development.js:2912)
    at setInitialDOMProperties (D:/Workspace/Gatsby_V2_Migration_Workspace/Backup/MT/node_modules/react-dom/cjs/react-dom.development.js:7355)
    at setInitialProperties$1 (D:/Workspace/Gatsby_V2_Migration_Workspace/Backup/MT/node_modules/react-dom/cjs/react-dom.development.js:7513)
    at finalizeInitialChildren (D:/Workspace/Gatsby_V2_Migration_Workspace/Backup/MT/node_modules/react-dom/cjs/react-dom.development.js:8527)
    at completeWork (D:/Workspace/Gatsby_V2_Migration_Workspace/Backup/MT/node_modules/react-dom/cjs/react-dom.development.js:14109)
    at completeUnitOfWork (D:/Workspace/Gatsby_V2_Migration_Workspace/Backup/MT/node_modules/react-dom/cjs/react-dom.development.js:15714)
    at performUnitOfWork (D:/Workspace/Gatsby_V2_Migration_Workspace/Backup/MT/node_modules/react-dom/cjs/react-dom.development.js:15891)
    at workLoop (D:/Workspace/Gatsby_V2_Migration_Workspace/Backup/MT/node_modules/react-dom/cjs/react-dom.development.js:15908)
    at renderRoot (D:/Workspace/Gatsby_V2_Migration_Workspace/Backup/MT/node_modules/react-dom/cjs/react-dom.development.js:15943)
    at performWorkOnRoot (D:/Workspace/Gatsby_V2_Migration_Workspace/Backup/MT/node_modules/react-dom/cjs/react-dom.development.js:16574)
    at performWork (D:/Workspace/Gatsby_V2_Migration_Workspace/Backup/MT/node_modules/react-dom/cjs/react-dom.development.js:16478)
    at performAsyncWork (D:/Workspace/Gatsby_V2_Migration_Workspace/Backup/MT/node_modules/react-dom/cjs/react-dom.development.js:16451)
    at callUnsafely (D:/Workspace/Gatsby_V2_Migration_Workspace/Backup/MT/node_modules/react-dom/cjs/react-dom.development.js:5354)
    at idleTick (D:/Workspace/Gatsby_V2_Migration_Workspace/Backup/MT/node_modules/react-dom/cjs/react-dom.development.js:5446)

The above error occurred in the <LocationProvider> component:
    in LocationProvider
    in Location
    in Router (created by Root)
    in Root (created by HotExportedRoot)
    in AppContainer (created by HotExportedRoot)
    in HotExportedRoot

React will try to recreate this component tree from scratch using the error boundary you provided, AppContainer.

Any clue as to why its throwing this error?

[KyleAMathews]

@vishalniit is it a warning? We don't kill the build process on warnings.

@rtm619 could you please open a new issue with more instructions on how to reproduce this error.

[kuldeepkeshwar]

I am still facing it @KyleAMathews.
funny thing is gatsby develop is working fine, but with gatsby build it starts breaking. Tried passing --no-uglify/--noUglify too.

error Building static HTML failed

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

  31 |     var error;
  32 |     if (format === undefined) {
> 33 |       error = new Error(
     | ^
  34 |         'Minified exception occurred; use the non-minified dev environment ' +
  35 |         'for the full error message and additional helpful warnings.'
  36 |       );


  WebpackError: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings  .

  - invariant.js:33 invariant
    [lib]/[invariant]/invariant.js:33:1

  - createBrowserHistory.js:46 createBrowserHistory
    [lib]/[history]/lib/createBrowserHistory.js:46:140

  - history.js:8 Module../lib/core/history.js
    lib/lib/core/history.js:8:34

  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1

  - index.js:1 Module../lib/core/index.js
    lib/lib/core/index.js:1:1

  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1


  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1

  - index.jsx:1 Module../lib/components/Form/index.jsx

npx gatsby --version
2.1.19

[narration-sd]

@KyleAMathews I don't think --no-uglify is working now - due to the change to terser seems likely?

I really need to build with 'the non-minified environment' at the moment; a quite obscure error in a router \

Please advise -- thanks. All latest Gatsby/-cli.

p.s. tried your original idea to modify node_modules/.../webpack.config.js -- didn't work either

[diced-dev]

@narration-sd I think I've run into that same error with Redirect in production, any solutions?

I'm also unable to get a non-uglified build working which makes resolving this kind of prod only issue a huge problem.

[cyberwombat]

@KyleAMathews

When you get errors like that, you want to disable minimization by webpack so that you can see the development version of React which will show you the actual errors.

Using the no uglify option (I tried --no-uglify and --noUglify) doesn't result in Webpack using the dev version for me. I still get the production mode. I am using Gatsby 2.15.x and I can see the option to not minimize is in webpack but still get the WebpackError: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. errors.

Ideas?

[jasecoop]

Also experiencing the above problem, workings on gatsby develop, fails on gatsby build