CODEWITHSUNDEEP
reactjsbabeljscore-motionemotion
user13746
user13746

Reputation: 870

Emotion CSS-in-JS ReferenceError: exports is not defined

I'm trying to use, the css prop from the emotion library in a project that I overtook after another dev. In the documentation they say that one way how to get started with the css prop is using Babel Preset. I have added the @emotion/babel-preset-css-prop to the presets in my babel.config.js but I'm getting this very interesting error. ReferenceError: exports is not defined.

I have not been able to find any thread that would refer to this error being associated directly with the emotion library so I'm assuming I'm doing something wrong in basic babel setup.

Is it maybe possible that using babel.config.js instead of .babelrc would cause such error?

Thanks, for your time!

Here is my babel.config.js

module.exports = (api) => {
api.cache(false);

return {
    presets: [
    '@emotion/babel-preset-css-prop',
    [
        '@babel/preset-env',
        {
        modules: false,
        loose: true,
        targets: {
            browsers: ['last 2 versions'],
        },
        },
    ],
    '@babel/preset-react',
    ],
    plugins: [
    'react-hot-loader/babel',
    [
        'transform-imports',
        {
        lodash: {
            transform: 'lodash/${member}',
            preventFullImport: true,
        },
        },
    ],
    ['import', { libraryName: 'antd', libraryDirectory: 'lib', style: true }],
    ['@babel/plugin-proposal-class-properties'],
    '@babel/plugin-proposal-async-generator-functions',
    '@babel/plugin-proposal-object-rest-spread',
    '@babel/plugin-transform-modules-commonjs',
    ],
};
};

enter image description here

Upvotes: 1

Views: 854

Answers (1)

Lauren Ashpole
Lauren Ashpole

Reputation: 169

This is an old question but I just ran into the same issue so maybe my workaround will save someone some time even if you've moved on.

After experimenting with different babel.config.js preset/plugin combinations, the “ReferenceError: exports is not defined” error occurred when using @emotion/babel-preset-css-prop with @babel/plugin-transform-modules-commonjs.

It looks like @babel/plugin-transform-modules-commonjs has to run after @emotion/babel-preset-css-prop but Babel plugins run before presets. To get around that, I removed @emotion/babel-preset-css-prop, installed the individual plugins from its source code, and added those before @babel/plugin-transform-modules-commonjs in the plugins array (with “___EmotionJSX” as the pragmaName).

In your case, the updated config file would look like this:

module.exports = (api) => {
  api.cache(false);

  return {
    presets: [
      [
        '@babel/preset-env',
        {
          modules: false,
          loose: true,
          targets: {
            browsers: ['last 2 versions'],
          },
        },
      ],
      '@babel/preset-react',
    ],
    plugins: [
      'react-hot-loader/babel',
      [
        'transform-imports',
        {
          lodash: {
            transform: 'lodash/${member}',
            preventFullImport: true,
          },
        },
      ],
      ['import', { libraryName: 'antd', libraryDirectory: 'lib', style: true }],
      '@babel/plugin-proposal-class-properties',
      '@babel/plugin-proposal-async-generator-functions',
      '@babel/plugin-proposal-object-rest-spread',
      [
        '@emotion/babel-plugin-jsx-pragmatic',
        {
          export: 'jsx',
          module: '@emotion/core',
          import: '___EmotionJSX',
        },
      ],
      [
        '@babel/plugin-transform-react-jsx',
        {
          pragma: '___EmotionJSX',
          pragmaFrag: 'React.Fragment',
        },
      ],
      'emotion',
      '@babel/plugin-transform-modules-commonjs',
    ],
  };
};

Upvotes: 1

Related Questions