Failing production build after latest gatsby package updates

[xzilja]

Description

I updated some gatsby dependencies today and started getting production build errors, there are some links which I visited, but none seem to explain issue in detail nor does the error specify any of my files (it refers mainly to react-dom and gatsby). I have also not made any changes since yestrday besides package update, it was building fine before.

Steps to reproduce

These were my packages from before

    "gatsby": "^1.9.252",
    "gatsby-link": "^1.6.40",
    "gatsby-plugin-jss": "^1.5.13",
    "gatsby-plugin-react-helmet": "^2.0.10",

That were updated to these versions today

    "gatsby": "^1.9.255",
    "gatsby-link": "^1.6.41",
    "gatsby-plugin-jss": "^1.5.14",
    "gatsby-plugin-react-helmet": "^2.0.11",

Expected result

Should build fine as before.

Actual result

I received this error during HTML build phase

error Building static HTML for pages failed

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

40 | var args = [a, b, c, d, e, f]; 41 | var argIndex = 0;

42 | error = new Error(format.replace(/%s/g, function () { | ^ 43 | return args[argIndex++]; 44 | })); 45 | error.name = 'Invariant Violation';

WebpackError: Minified React error #130; visit http://reactjs.org/docs/error-decoder.html?invarian t=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

• invariant.js:42 invariant ~/fbjs/lib/invariant.js:42:1

• react-dom-server.node.production.min.js:11 z ~/gatsby-plugin-react-next/~/react-dom/cjs/react-dom-server.node.production.min.js:11:174

• react-dom-server.node.production.min.js:35 a.render ~/gatsby-plugin-react-next/~/react-dom/cjs/react-dom-server.node.production.min.js:35:4

• react-dom-server.node.production.min.js:32 a.read ~/gatsby-plugin-react-next/~/react-dom/cjs/react-dom-server.node.production.min.js:32:201

• react-dom-server.node.production.min.js:43 renderToString ~/gatsby-plugin-react-next/~/react-dom/cjs/react-dom-server.node.production.min.js:43:1

• gatsby-ssr.js:22 Object.exports.replaceRenderer ~/gatsby-plugin-jss/gatsby-ssr.js:22:1

• api-runner-ssr.js:31 .cache/api-runner-ssr.js:31:41

• api-runner-ssr.js:29 module.exports .cache/api-runner-ssr.js:29:25

• static-entry.js:113 module.exports .cache/static-entry.js:113:3

Environment

• Gatsby version gatsby@1.9.255
• gatsby-cli version 1.1.44
• Node.js version: v9.11.1
• Operating System: macOS High Sierra

File contents (if changed):

gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: `Example`
  },
  plugins: [`gatsby-plugin-react-next`, `gatsby-plugin-react-helmet`, `gatsby-plugin-jss`]
};

package.json:

{
  "name": "example",
  "description": "Example",
  "version": "2.0.0",
  "author": "Example <info@example.io>",
  "dependencies": {
    "axios": "^0.18.0",
    "material-ui": "^1.0.0-beta.44",
    "mobx": "^4.2.0",
    "mobx-react": "^5.0.0",
    "mobx-state-tree": "^2.0.4",
    "progressbar.js": "^1.0.1",
    "react-helmet": "5.2.0",
    "react-intl": "^2.4.0",
    "react-responsive": "^4.1.0",
    "styled-components": "^3.2.6"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.3",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "danger": "^3.6.0",
    "deep-object-diff": "^1.1.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-config-prettier": "^2.9.0",
    "eslint-plugin-import": "^2.11.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.7.0",
    "flow-bin": "^0.71.0",
    "gatsby": "^1.9.255",
    "gatsby-link": "^1.6.41",
    "gatsby-plugin-jss": "^1.5.14",
    "gatsby-plugin-react-helmet": "^2.0.11",
    "gatsby-plugin-react-next": "^1.0.11",
    "jest": "^22.4.3",
    "prettier": "^1.12.1"
  },
  "keywords": [
    "example, app, web"
  ],
  "scripts": {
    "production": "./scripts/production.sh",
    "preproduction": "./scripts/preproduction.sh",
    "staging": "./scripts/staging.sh",
    "development": "./scripts/development.sh",
    "backend": "./scripts/backend.sh",
    "test": "./node_modules/.bin/jest",
    "serve": "./node_modules/.bin/gatsby serve"
  }
}

gatsby-node.js: not changed gatsby-browser.js: not changed gatsby-ssr.js: not changed

[m-allanson]

@IljaDaderko can you narrow this down to a single package update? e.g. roll back to your old versions and then update them one by one until you see the error. The error looks like it's originating from gatsby-plugin-jss so maybe start with that plugin?

[xzilja]

@m-allanson on it 👍

[xzilja]

After some fiddling issue was unrelated to package updates it was conflict between jss and styled-components gatsby plugins where I needed to remove styled components plugin and re-add it in gatsby-ssr

[rockchalkwushock]

@IljaDaderko could you post what you did in gatsby-ssr I think I'm running into the same issue. I'm not entirely sure if it's styled-components that is causing the issue though. Thanks!

[xzilja]

@rockchalkwushock unfortunately I no longer have access to the project where I implemented the fix :/ from the top of my head issue was due to gatsby plugins I used particularly

gatsby-plugin-jsx used together with gatsby-styled-components

I ended up removing styled components one and applying it in gatsby-ssr through default styled components ssr using ServerStyleSheet, StyleSheetManager as per https://www.styled-components.com/docs/advanced#server-side-rendering

[rockchalkwushock]

I see thanks for your quick response.