Gatsby: Emotion 11 api changed.

[2403772980ygy]

Emotion 11 uses @emotion/react instead of @emotion/core, which causes failure for gatsby-plugin-emotion.

[ben-rogerson]

Here's a workaround while gatsby-plugin-emotion gets updated:

Assuming you've already updated @emotion/react and @emotion/styled to v11:

1. Remove gatsby-plugin-emotion from your gatsby-config.js
2. Add a .babelrc in the project root with the following contents:

// .babelrc
{
  "presets": [
    [
      "babel-preset-gatsby",
      {
        "targets": {
          "browsers": [">0.25%", "not dead"]
        }
      }
    ]
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    [
      "@emotion/babel-plugin-jsx-pragmatic",
      {
        "export": "jsx",
        "import": "__cssprop",
        "module": "@emotion/react"
      }
    ],
    [
      "@babel/plugin-transform-react-jsx",
      {
        "pragma": "__cssprop",
        "pragmaFrag": "React.Fragment"
      }
    ]
  ]
}

1. Install these babel plugins:

npm i -D @babel/plugin-proposal-decorators @emotion/babel-plugin-jsx-pragmatic

I'm not sure why/if we need @babel/plugin-proposal-decorators, but it looks required in "How to use a custom .babelrc file"

[LekoArts]

Duplicate of https://github.com/gatsbyjs/gatsby/issues/28063