gatsby-plugin-emotion: emotion 11

[k-m-a-c]

Description

The development version of the tutorial-part-four project in the official Gatsby tutorial series fails to build, erroring out because it relies upon gatsby-plugin-emotion and @emotion/core, the latter of which has just released a major version update with breaking changes to the package’s naming.

Specifically, there are 2 issues that cause the build failure:

1. gatsby-plugin-emotion lists @emotion/core in its peerDependencies with an optimistic version operator (i.e. ^10.0.5), which causes the latest version of the package to be relied upon at build time.

1. The code samples in the documentation include imports that reference @emotion/core instead of @emotion/react.

Steps to reproduce

Run through the steps in tutorial-part-four from scratch.

Expected result

The tutorial project’s development build is created without error.

Actual result

The development build fails out with the following error:

success open and validate gatsby-configs - 0.019s
success load plugins - 0.110s
success onPreInit - 0.041s
success initialize cache - 0.024s
success copy gatsby files - 0.058s
success onPreBootstrap - 0.018s
success createSchemaCustomization - 0.001s
success Checking for changed pages - 0.001s
success source and transform nodes - 0.070s
success building schema - 0.232s
info Total nodes: 22, SitePage nodes: 1 (use --verbose for breakdown)
success createPages - 0.001s
success Checking for changed pages - 0.002s
success createPagesStatefully - 0.198s
success update schema - 0.033s
success write out redirect data - 0.001s
success onPostBootstrap - 0.001s
info bootstrap finished - 3.106s
success onPreExtractQueries - 0.001s
success extract queries from components - 0.111s
success write out requires - 0.005s
success run page queries - 0.030s - 3/3 101.58/s
error There was an error compiling the html.js component for the development server.

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html  The `@emotion/core` package has been renamed to `@emotion/react`. Please import it like this `import { jsx } from '@emotion/react'`.

  1 | 'use strict';
  2 | 
> 3 | throw new Error("The `@emotion/core` package has been renamed to `@emotion/react`. Please import it like this `import { jsx } from '@emotion/react'`.");
    | ^
  4 | 


  WebpackError: The `@emotion/core` package has been renamed to `@emotion/react`. Please import it like this `import { jsx } from '@emotion/react'`.

  - emotion-core.cjs.dev.js:3 
    node_modules/@emotion/core/dist/emotion-core.cjs.dev.js:3:1

  - emotion-core.cjs.js:6 
    node_modules/@emotion/core/dist/emotion-core.cjs.js:6:20

  - index.js:11 
    node_modules/object-assign/index.js:11:1

  - gatsby-ssr.js:30 
    node_modules/gatsby-plugin-typography/gatsby-ssr.js:30:7

Environment

System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.2.0 - ~/.nvm/versions/node/v12.2.0/bin/node
    Yarn: 1.5.1 - /usr/local/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v12.2.0/bin/npm
  Languages:
    Python: 3.7.3 - /Users/kevin/.pyenv/shims/python
  Browsers:
    Chrome: 86.0.4240.198
    Edge: 86.0.622.69
    Firefox: 76.0.1
    Safari: 14.0.1
  npmPackages:
    gatsby: ^2.25.3 => 2.25.3 
    gatsby-plugin-emotion: ^4.4.0 => 4.4.0 
    gatsby-plugin-typography: ^2.6.0 => 2.6.0 
  npmGlobalPackages:
    gatsby-cli: 2.12.117

[dhonysilva]

I am facing the same problem right now.

[LekoArts]

You are incorrect with your first assumption, the peerDependency is still requiring version 10. So if you install that instead of 11 it'll all work.

[dhonysilva]

I handled this issue by specifying the version 10.0.5:

npm install gatsby-plugin-emotion @emotion-core@^10.0.5

[TimFurdui]

I handled this issue by specifying the version 10.0.5:

npm install gatsby-plugin-emotion @emotion-core@^10.0.5

I'm facing the same issue as above. I tried reinstalling emotion in my project root directory using version 10.0.5, as @dhonysilva mentioned , but I keep getting;

npm ERR! code EINVALIDPACKAGENAME
npm ERR! Invalid package name "@emotion-core": name can only contain URL-friendly characters

[moinunez]

I handled this issue by specifying the version 10.0.5:
npm install gatsby-plugin-emotion @emotion-core@^10.0.5

I'm facing the same issue as above. I tried reinstalling emotion in my project root directory using version 10.0.5, as @dhonysilva mentioned , but I keep getting;

npm ERR! code EINVALIDPACKAGENAME
npm ERR! Invalid package name "@emotion-core": name can only contain URL-friendly characters

It's @emotion/core@^10.0.5, not @emotion-core@^10.0.5

[TimFurdui]

I handled this issue by specifying the version 10.0.5:
npm install gatsby-plugin-emotion @emotion-core@^10.0.5

I'm facing the same issue as above. I tried reinstalling emotion in my project root directory using version 10.0.5, as @dhonysilva mentioned , but I keep getting;
npm ERR! code EINVALIDPACKAGENAME
npm ERR! Invalid package name "@emotion-core": name can only contain URL-friendly characters

It's @emotion/core@^10.0.5, not @emotion-core@^10.0.5

That was it, thanks!

[tumetus]

Reinstalling with @emotion/core@^10.0.5 solved this for me too 👍

[cleaver]

I changed to @emotion/core to @emotion/react and it solved the problem. The module was renamed recently.

Edit: #27981 goes into more detail.

[hamdannurachid]

npm install gatsby-plugin-emotion @emotion/core@^10.0.5 solved for me thanks

[martin-sweeny]

If you want to use the upcoming version of gatsby-plugin-emotion, instead of using the deprecated @emotion/core:

yarn upgrade [email protected]

At least until 5.1 is released on npm

[zerogami-cami01]

私も、WebpackError: The @emotion/core package has been renamed to @emotion/react. Please import it like this import { jsx } from '@emotion/react'.というエラーが出たので、npm install gatsby-plugin-emotion @emotion/core@^10.0.5を実行したところ解決できました！ありがとう！

[svirins]

yarn upgrade [email protected]

Wow! Thank you, Martin! Switching to the upcoming version completely solved the issue.