@emotion/babel-plugin is not working on server side

[upauliushchyk]

Current behavior:

At build stage:

Error: You're trying to use the styled shorthand without babel-plugin-emotion.
Please install and setup babel-plugin-emotion or use the function call syntax(`styled('div')` instead of `styled.div`)
    at Object.get (webpack://iq-frontend/./node_modules/create-emotion-styled/dist/index.esm.js?:219:21)
    at eval (webpack://./src/components/UI/Banner/styled.js?:25:69)
    (...)

Babel config:

module.exports = {
  presets: [['@babel/preset-env', {bugfixes: true}], '@babel/preset-react'],
  env: {
    development: {
      plugins: [
        '@emotion',
        'react-hot-loader/babel',
        [
          '@babel/plugin-transform-runtime',
          {
            regenerator: true,
          },
        ],
      ],
    },
    production: {
      plugins: [
        '@emotion',
        'graphql-tag',
        [
          '@babel/plugin-transform-runtime',
          {
            regenerator: true,
          },
        ],
        'transform-react-remove-prop-types',
        '@babel/plugin-transform-react-constant-elements',
        'transform-minify-booleans',
        'transform-member-expression-literals',
      ],
    },
    test: {
      plugins: [
        '@emotion',
        'dynamic-import-node',
        [
          'module-resolver',
          {
            root: ['./src'],
            alias: {
             ...
            },
          },
        ],
      ],
    },
  },
  plugins: [
    '@emotion',
    '@loadable/babel-plugin',
    [
      '@babel/plugin-proposal-decorators',
      {
        version: "legacy",
      },
    ],
    '@babel/plugin-proposal-function-sent',
    '@babel/plugin-proposal-throw-expressions',
    '@babel/plugin-proposal-export-default-from',
    [
      '@babel/plugin-proposal-pipeline-operator',
      {
        proposal: 'minimal',
      },
    ],
    '@babel/plugin-proposal-do-expressions',
  ],
};
```;

"webpack": "5.76.3",
"react": "16.14.0",
"@emotion/is-prop-valid": "0.7.3",
"create-emotion-styled": "9.2.8",
"emotion": "9.2.12",
"emotion-server": "9.2.12",
"emotion-theming": "9.2.9",
"emotion-utils": "9.1.0",
"react-emotion": "9.2.8",
"@emotion/babel-plugin": "^11.10.6",
"@babel/core": "7.20.2",
"babel-loader": "8.3.0",

[iryan2]

Interesting, I've been trying to get @emotion/babel-plugin working with Webpack in a Typescript/React app all day without success. I wonder if it's related to this issue 🤔

[upauliushchyk]

@iryan2 the real answer is not use @emotion/babel-plugin with emotion v9, even if docs says to do it. I've installed babel-plugin-emotion@9 and it does the job!

[natamox]

Interesting, I've been trying to get @emotion/babel-plugin working with Webpack in a Typescript/React app all day without success. I wonder if it's related to this issue 🤔

Hi, have you succeeded now, I encountered the same situation as you. Thanks

[iryan2]

Nope, I gave up 🙃