Issue with Emotion and Gatsby Default Starter

[bonakor]

Hi, I'm developing a website with Gatsby. I'm using the Default Starter. I started yesterday. Today, I wanted to add emotion, but I encountered an issue. I think it's related to the latest update (V3.0)

Description

To be sure that the issue wasn't related to my code, I managed to reproduce it with the basic starter.

I add the Emotion plugin with Emotion. Then, I add it to the site config, and then, when I try to run gatsby develop, the process failed.

The PowerShell is telling me this:
ERROR in ./src/components/layout.js Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.js):

Steps to reproduce

I'm using the latest default starter. But you can also try it with my own repository (I think there are some errors with my css as I first tried with Glamor, before discovering Emotion which seems far more advanced and easy to use) : https://github.com/bonakor/spf-hiver-2019

Expected result

The build should process normally, but it doesn't.

Actual result

The build failed on each page.

Environment

System:
OS: Windows 10
CPU: (8) x64 Intel(R) Core(TM) i7-3630QM CPU @ 2.40GHz
Binaries:
npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 44.17763.1.0
npmPackages:
gatsby: ^2.0.53 => 2.0.53
gatsby-image: ^2.0.20 => 2.0.20
gatsby-plugin-emotion: ^3.0.0 => 3.0.0
gatsby-plugin-manifest: ^2.0.9 => 2.0.9
gatsby-plugin-nprogress: ^2.0.7 => 2.0.7
gatsby-plugin-offline: ^2.0.18 => 2.0.18
gatsby-plugin-react-helmet: ^3.0.2 => 3.0.2
gatsby-plugin-sass: ^2.0.5 => 2.0.5
gatsby-plugin-sharp: ^2.0.12 => 2.0.12
gatsby-plugin-sitemap: ^2.0.3 => 2.0.3
gatsby-source-filesystem: ^2.0.8 => 2.0.8
gatsby-transformer-sharp: ^2.1.8 => 2.1.8`

[jaredh159]

Having what I think is the the same issue. A bit of the error trace:

 error  in ./src/components/Layout.js

Module build failed (from /Users/jared/fl/node_modules/gatsby/dist/utils/babel-loader.js):
Error: transform-react-jsx: pragma has been set but pragmafrag has not been set
    at PluginPass.exit (/Users/jared/fl/node_modules/@babel/plugin-transform-react-jsx/lib/index.js:117:15)
    at newFn (/Users/jared/fl/node_modules/@babel/traverse/lib/visitors.js:193:21)
...

The key bit seems to be pragma has been set but pragmafrag has not been set. Tried removing/adding the emotion /** @jsx jsx */ pragma, but to no effect. That is confusing because emotion's docs seem to indicate you need the pragma, but Gatsby's tutorial v4 doesn't show the pragma... Is this just Emotion 10 upgrade bumps?

[DSchau]

@jaredh159 could you link to the repo or create one? That would help us immensely troubleshoot this.

We do have a PR #10291 addressing the pragmaFrag, so perhaps simply merging that and publishing will fix that issue. Having that reproduction will let us validate the fix simply and easily!

[jaredh159]

@DSchau don't have a repo yet, just some work-in-progress. But... I just figured out that changing out the <></> react fragmant syntax with <React.Fragment> fixed the issue. Does that shed any light on things?

[DSchau]

@bonakor can you chime in whether you're seeing the same error?

[bonakor]

@DSchau I probably won't be able to do it before Friday (Paris Time), as I'm out of office tomorrow.
This afternoon, I went back with Glamour because I needed to move on a bit. So I'm guessing that my repo is compiling out of the box, but only because Emotion is not required nor used in it anymore for now.

[bonakor]

It seems to be working now. How can I mark the issue as resolved, please ?

[gatsbot]

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! 💪💜

[DSchau]

Looks like this should've been closed a while ago :) Closing out--thanks!