search

gatsbyjs / gatsby

The best React-based framework with performance, scalability and security built in.
https://www.gatsbyjs.com
MIT License
55.27k stars 10.31k forks source link

Minified exception occurred; use the non-minified dev environment #7230

Closed ghost closed 6 years ago

ghost commented 6 years ago

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

braun-ca@1.0.0 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.

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 commented 6 years ago

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 commented 6 years ago

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

ghost commented 6 years ago

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

ghost commented 6 years ago

`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.

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

tryzniak commented 6 years ago

@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 commented 6 years ago

@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 commented 6 years ago

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

rtm619 commented 6 years ago

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 commented 6 years ago

@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 commented 5 years ago

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 commented 5 years ago

@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 \<Redirect /> which works perfectly in develop.

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 commented 5 years ago

@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 commented 5 years ago

@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 commented 4 years ago

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

ciacicode commented 3 years ago

I am still experiencing the issue, why is it closed?

stevengrimaldo commented 2 years ago

Still an issue, 2022

repolife commented 1 year ago

Still an issue in 2023.

NoraPabau commented 2 weeks ago

still an issue 2024