gatsby-plugin-emotion: emotion 11

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.

2. 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

[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

[dhonysilva]

I am facing the same problem right now.