Emotion CSS-in-JS ReferenceError：未定义导出

Question

我正在尝试在我接替另一个开发人员的项目中使用css prop中的emotion library。他们在文档中说，css prop入门的一种方法是使用 Babel Preset 。我在@emotion/babel-preset-css-prop的{​​{1}}中添加了presets，但是却遇到了这个非常有趣的错误。 ReferenceError：未定义导出。

我找不到能够与该错误直接相关的线程babel.config.js，因此我假设我在基本babel设置中做错了。

使用emotion library而不是babel.config.js可能会导致这种错误吗？

谢谢您的光临！

这是我的babel.config.js

.babelrc

Answer 1

这是一个老问题，但我刚刚遇到了同样的问题，所以即使您已经继续前进，我的解决方法也可以为某人节省一些时间。

在尝试不同的 babel.config.js 预设/插件组合后，将 @emotion/babel-preset-css-prop 与 @babel/plugin-transform-modules-commonjs 一起使用时出现“ReferenceError:exports is not defined”错误。

看起来 @babel/plugin-transform-modules-commonjs 必须在 @emotion/babel-preset-css-prop 之后运行，但 Babel 插件在预设之前运行。为了解决这个问题，我删除了 @emotion/babel-preset-css-prop，从它的 source code 中安装了各个插件，并在 plugins 数组中的 @babel/plugin-transform-modules-commonjs 之前添加了这些插件（使用“___EmotionJSX”作为 pragmaName ).

在您的情况下，更新后的配置文件如下所示：

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',
    ],
  };
};