gatsby-plugin-emotion: error with yarn@2

[item4]

Description

With gatsby-plugin-emotion and yarn@2, build must fail.

Steps to reproduce

1. Make minimal gatsby project
2. yarn add gatsby-plugin-emotion @emotion/core @emotion/styled
3. Write some code with @emotion/styled like this:

import styled from '@emotion/styled';

const Header = styled.h1`
  color: red;
`;

Expected result

Build site with emotion styling.

Actual result

Stuck in build step

Environment

(Sorry, I lost yarn@2 setup. I paste yarn@1 env)

  System:
    OS: macOS 10.15.3
    CPU: (4) x64 Intel(R) Core(TM) i5-4258U CPU @ 2.40GHz
    Shell: 5.8 - /usr/local/bin/zsh
  Binaries:
    Node: 13.7.0 - ~/.nvm/versions/node/v13.7.0/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.13.6 - ~/.nvm/versions/node/v13.7.0/bin/npm
  Languages:
    Python: 3.8.2 - /Users/item4/.virtualenvs/drf-yasg-examples/bin/python
  Browsers:
    Chrome: 80.0.3987.149
    Firefox: 74.0
    Safari: 13.0.5
  npmPackages:
    gatsby: ^2.13.3 => 2.19.45 
    gatsby-plugin-emotion: ^4.1.0 => 4.1.25 
    gatsby-plugin-feed: ^2.3.2 => 2.3.29 
    gatsby-plugin-google-analytics: ^2.1.4 => 2.1.38 
    gatsby-plugin-manifest: ^2.2.1 => 2.2.48 
    gatsby-plugin-offline: ^3.0.6 => 3.0.41 
    gatsby-plugin-react-helmet: ^3.1.0 => 3.1.24 
    gatsby-plugin-sharp: ^2.2.2 => 2.4.13 
    gatsby-plugin-sitemap: ^2.2.3 => 2.2.30 
    gatsby-plugin-typescript: ^2.1.0 => 2.2.5 
    gatsby-plugin-typescript-checker: ^1.0.3 => 1.1.1 
    gatsby-remark-copy-linked-files: ^2.1.0 => 2.1.40 
    gatsby-remark-images: ^3.1.2 => 3.1.50 
    gatsby-remark-prismjs: ^3.3.1 => 3.3.36 
    gatsby-remark-responsive-iframe: ^2.2.1 => 2.2.34 
    gatsby-remark-smartypants: ^2.1.0 => 2.1.23 
    gatsby-source-filesystem: ^2.1.2 => 2.1.56 
    gatsby-transformer-remark: ^2.5.0 => 2.6.59 

[item4]

ref: https://github.com/emotion-js/emotion/blob/master/packages/babel-plugin-emotion/src/index.js#L9-L13

[ascorbic]

Hi. Could you add this as a comment to #20949 please. I don't think there's enough specific here to need a whole issue.

[cometkim]

I see lines @item4 mentioned above.

they transpile the import statements from @emotion/styled to @emotion/styled-base, and make users use it implicitly way that yarn 2 doesn't allow.

Users simply need to install @emtion/styled-base as a dependency, but It is not guided anywhere.

[cometkim]

And I realized that they still use babel 6. It might potentially be a problem for PnP.