gatsby-plugin-emotion breaks rendering hooks

[janicduplessis]

Description

After upgrading to the latest version of gatsby-plugin-emotion I noticed that some headers were missing from the ssr version of my pages. I added a log inside onRenderBody in my project's gatsby-ssr.js file and noticed it wasn't getting called at all. I was able to track it down to the usage of babel-plugin-jsx-pragmatic and @babel/plugin-transform-react-jsx (https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-emotion/src/gatsby-node.js#L4-L19). If I remove these lines then the rendering hooks get called again, but emotion is no longer working without adding the @jsx jsx pragma and importing jsx from @emotion/core.

Steps to reproduce

Add gatsby-plugin-emotion in a project and add a log to onRenderBody and notice it is not gettings called.

Expected result

Rendering hooks are called as usual.

Actual result

Rendering hooks are not called

Environment

Chrome: 72.0.3626.7
Firefox: 62.0
Safari: 12.0.2

npmPackages:
gatsby: ^2.0.63 => 2.0.63
gatsby-image: ^2.0.22 => 2.0.22
gatsby-plugin-emotion: ^3.0.1 => 3.0.1
gatsby-plugin-extract-schema: ^0.0.4 => 0.0.4
gatsby-plugin-manifest: ^2.0.11 => 2.0.11
gatsby-plugin-netlify: ^2.0.6 => 2.0.6
gatsby-plugin-offline: ^2.0.18 => 2.0.18
gatsby-plugin-polyfill-io: ^1.0.5 => 1.0.5
gatsby-plugin-react-helmet: ^3.0.4 => 3.0.4
gatsby-plugin-remove-serviceworker: ^1.0.0 => 1.0.0
gatsby-plugin-sharp: ^2.0.14 => 2.0.14
gatsby-plugin-sitemap: ^2.0.3 => 2.0.3
gatsby-plugin-svg-sprite: ^2.0.1 => 2.0.1
gatsby-source-filesystem: ^2.0.10 => 2.0.10
gatsby-transformer-sharp: ^2.1.9 => 2.1.9
npmGlobalPackages:
gatsby-cli: 2.4.4

[janicduplessis]

cc @wKovacs64 @DSchau

[wKovacs64]

cc @mitchellhamilton

[DSchau]

@wKovacs64 it's best to validate before tagging in other people!

@janicduplessis are you able to provide a reproduction? I went ahead and created a repo with gatsby-plugin-emotion and a log on onRenderBody and it seems to be invoked just fine.

The repo is here. Am I missing something obvious?

The logs are

⠂ onPostBootstrapdone generating icons for manifest
success onPostBootstrap — 0.108 s

info bootstrap finished - 2.059 s

success Building production JavaScript and CSS bundles — 5.078 s
⠁ Building static HTML for pages/404/
/
/page-2/
/404.html
success Building static HTML for pages — 0.537 s — 4/4 29.31 pages/second
info Done building in 7.677 s

[janicduplessis]

@DSchau Sorry looks like the repro is a bit more complex than I though, I was able to repro using your repo by adding some jsx in gatsby-ssr.js.

const React = require('react')

/**
 * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
 *
 * See: https://www.gatsbyjs.org/docs/ssr-apis/
 */

// You can delete this file if you're not using it
exports.onRenderBody = function({ pathname }) {
  console.log(pathname)
  setHeadComponents([<meta name="test1234" content="test4321" />])
}

[DSchau]

Weird! For what it's worth--looks like migrating that example to es imports/exports seems to do the trick, i.e. the below works

import React from 'react'

/**
 * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
 *
 * See: https://www.gatsbyjs.org/docs/ssr-apis/
 */

export const onRenderBody = function({ pathname, setHeadComponents }) {
  setHeadComponents([
    <meta name="test1234" content="test431" />
  ]);
}

I'll take another look at this soon.

[janicduplessis]

Hmm could be because babel-plugin-jsx-pragmatic adds es6 imports instead of using commonjs. Not sure how to look at the compiled code but that would probably explain what is going on. Another workaround is to use React.createElement instead of jsx.

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[kennedyrose]

This is still an issue on the latest gatsby and latest gatsby-plugin-emotion that we run into frequently. Sometimes even changing to ES6 syntax doesn't help. I've got a demonstration repo here: https://github.com/escaladesports/emotion-bug

[tbaustin]

Having same issue here. Using es6 is a work around not a fix.

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[zslabs]

Not stale