Gatsby: [v2] gatsby-plugin-sass breaks the build if gatsby-plugin-react-helmet is installed

[kripod]

Description

[email protected] emits the following error message if [email protected] is installed:

$ gatsby develop
success delete html files from previous builds — 0.012 s
success open and validate gatsby-config.js — 0.010 s
success copy gatsby files — 0.126 s
success onPreBootstrap — 0.055 s
success source and transform nodes — 0.034 s
success building schema — 0.184 s
success createPages — 0.000 s
success createPagesStatefully — 0.060 s
success onPreExtractQueries — 0.001 s
success update schema — 0.066 s
success extract queries from components — 0.030 s
success run graphql queries — 0.014 s
success write out page data — 0.012 s
success write out redirect data — 0.003 s
success onPostBootstrap — 0.001 s

info bootstrap finished - 11.503 s

error inst.render is not a function


  TypeError: inst.render is not a function

  - render-page.js:22633 processChild
    C:/Development/Projects/gatsby-v2-test/public/render-page.js:22633:18

  - render-page.js:22490 resolve
    C:/Development/Projects/gatsby-v2-test/public/render-page.js:22490:5

  - render-page.js:22775 ReactDOMServerRenderer.render
    C:/Development/Projects/gatsby-v2-test/public/render-page.js:22775:22

  - render-page.js:22749 ReactDOMServerRenderer.read
    C:/Development/Projects/gatsby-v2-test/public/render-page.js:22749:19

  - render-page.js:23132 renderToStaticMarkup
    C:/Development/Projects/gatsby-v2-test/public/render-page.js:23132:25

  - render-page.js:417 Object../.cache/develop-static-entry.js.__webpack_exports__.default
    C:/Development/Projects/gatsby-v2-test/public/render-page.js:417:90

  - html-renderer.js:23 Worker.Queue [as fn]
    [gatsby-v2-test]/[gatsby]/dist/utils/html-renderer.js:23:36

  - worker.js:69 Worker.start
    [gatsby-v2-test]/[better-queue]/lib/worker.js:69:29

  - queue.js:701 Queue._startBatch
    [gatsby-v2-test]/[better-queue]/lib/queue.js:701:12

  - queue.js:572
    [gatsby-v2-test]/[better-queue]/lib/queue.js:572:12

  - index.js:87 MemoryStore.getLock
    [gatsby-v2-test]/[better-queue-memory]/index.js:87:3

  - queue.js:533
    [gatsby-v2-test]/[better-queue]/lib/queue.js:533:17

  - index.js:69 MemoryStore.takeFirstN
    [gatsby-v2-test]/[better-queue-memory]/index.js:69:3

  - queue.js:473 Queue._getNextBatch
    [gatsby-v2-test]/[better-queue]/lib/queue.js:473:54

  - queue.js:530 Queue._processNext
    [gatsby-v2-test]/[better-queue]/lib/queue.js:530:8

  - queue.js:520
    [gatsby-v2-test]/[better-queue]/lib/queue.js:520:12


error UNHANDLED REJECTION


  TypeError: inst.render is not a function

  - render-page.js:22633 processChild
    C:/Development/Projects/gatsby-v2-test/public/render-page.js:22633:18

  - render-page.js:22490 resolve
    C:/Development/Projects/gatsby-v2-test/public/render-page.js:22490:5

  - render-page.js:22775 ReactDOMServerRenderer.render
    C:/Development/Projects/gatsby-v2-test/public/render-page.js:22775:22

  - render-page.js:22749 ReactDOMServerRenderer.read
    C:/Development/Projects/gatsby-v2-test/public/render-page.js:22749:19

  - render-page.js:23132 renderToStaticMarkup
    C:/Development/Projects/gatsby-v2-test/public/render-page.js:23132:25

  - render-page.js:417 Object../.cache/develop-static-entry.js.__webpack_exports__.default
    C:/Development/Projects/gatsby-v2-test/public/render-page.js:417:90

  - html-renderer.js:23 Worker.Queue [as fn]
    [gatsby-v2-test]/[gatsby]/dist/utils/html-renderer.js:23:36

  - worker.js:69 Worker.start
    [gatsby-v2-test]/[better-queue]/lib/worker.js:69:29

  - queue.js:701 Queue._startBatch
    [gatsby-v2-test]/[better-queue]/lib/queue.js:701:12

  - queue.js:572
    [gatsby-v2-test]/[better-queue]/lib/queue.js:572:12

  - index.js:87 MemoryStore.getLock
    [gatsby-v2-test]/[better-queue-memory]/index.js:87:3

  - queue.js:533
    [gatsby-v2-test]/[better-queue]/lib/queue.js:533:17

  - index.js:69 MemoryStore.takeFirstN
    [gatsby-v2-test]/[better-queue-memory]/index.js:69:3

  - queue.js:473 Queue._getNextBatch
    [gatsby-v2-test]/[better-queue]/lib/queue.js:473:54

  - queue.js:530 Queue._processNext
    [gatsby-v2-test]/[better-queue]/lib/queue.js:530:8

  - queue.js:520
    [gatsby-v2-test]/[better-queue]/lib/queue.js:520:12


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

Steps to reproduce

Set up a gatsby@2 project, run yarn add [email protected] [email protected] and then run gatsby develop.

Environment

• Gatsby version (npm list gatsby): 2.0.0-alpha.32
• gatsby-cli version (gatsby --version): 2.0.0-alpha.32
• Node.js version: 8.11.1
• Operating System: Windows 10 x64

File contents (if changed)

gatsby-config.js:

module.exports = {
  plugins: ['gatsby-plugin-sass'],
};

Note: gatsby-plugin-react-helmet doesn't even need to be added to plugins in order to reproduce the bug.

package.json:

{
  "private": true,
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop"
  },
  "dependencies": {
    "gatsby": "^2.0.0-alpha.32",
    "gatsby-plugin-react-helmet": "^2.0.12-3",
    "gatsby-plugin-sass": "^2.0.0-alpha.11",
    "prop-types": "^15.6.1",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-helmet": "^5.2.0"
  }
}

Note: Without gatsby-plugin-react-helmet, gatsby develop works fine.

[pieh]

Ill write my findings on this issue:
Highlighted line here - https://gist.github.com/pieh/31cc3cebbc0ca2da7eee94dab16e7f97#file-default-html-js-L48 (this is from webpack output used in gatsby develop) seems to be removing render from prototype (which later will cause inst.render is not a function)

(this is using @babel/[email protected] )

When I locally changed inheritsLoose implementation to one used in newer @babel/runtime it fixed the issue:

function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = _Object$create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
+  subClass.prototype.__proto__ = superClass && superClass.prototype;
  subClass.__proto__ = superClass;
}

hopefully https://github.com/gatsbyjs/gatsby/pull/5399 will fix this, but tbh I have no idea why this didn't manifest before

[m-allanson]

Some more info on loose mode: http://2ality.com/2015/12/babel6-loose-mode.html

[jlengstorf]

I had a similar problem with gatsby-plugin-react-helmet@next and gatsby-plugin-emotion@next. In both cases, installing @canary fixed the problem.

gatsby-plugin-react-helmet

Plugin | Version in @next | Version in @canary
--- | --- | ---
@babel/runtime | 7.0.0-beta.42 | 7.0.0-beta.47
core-js | 2.5.6 | 2.5.6
regenerator-runtime | 0.11.1 | 0.11.1

gatsby-plugin-emotion

Plugin | Version in @next | Version in @canary
--- | --- | ---
@babel/runtime | 7.0.0-beta.42 | 7.0.0-beta.47
core-js | 2.5.6 | 2.5.6
regenerator-runtime | 0.11.1 | 0.11.1

Diff

I ran a diff on gatsby-ssr.js for gatsby-plugin-react-helmet@next and gatsby-plugin-react-helmet@canary, and the files are identical. Same for the Emotion plugin.

So it would appear that @pieh is correct and upgrading @babel/runtime _should_ fix the problem, since nothing else appears to be different.

If that's the case, what's the easiest path toward updating all @next plugins to use beta 47 of @babel/runtime?

[kripod]

@jlengstorf Great observation, although it seems that the packages on canary tags are much older than the ones on next. This issue should get fixed as soon as #5399 lands.

[pieh]

If you are using yarn, as a temporary workaround you can try adding resolutions to your package.json like in here - https://github.com/gatsbyjs/gatsby/pull/5423/files , delete node_modules and yarn.lock and reinstall deps using yarn

[kripod]

5399 has been merged, now we just have to wait for a new npm package release.

Cheers to everyone for this wonderful collaboration! 🍻