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

【问题标题】：Emotion CSS-in-JS ReferenceError: exports is not definedEmotion CSS-in-JS ReferenceError：未定义导出
【发布时间】：2019-06-13 19:03:17
【问题描述】：

我正在尝试在一个项目中使用来自emotion library 的css prop，我在另一个开发人员之后超越了这个项目。在文档中，他们说开始使用css prop 的一种方法是使用Babel Preset。我在babel.config.js 中将@emotion/babel-preset-css-prop 添加到presets，但我遇到了这个非常有趣的错误。 ReferenceError：未定义导出。

我无法找到任何线程会引用此错误与 emotion library 直接关联，所以我假设我在基本 babel 设置中做错了什么。

是否有可能使用babel.config.js 而不是.babelrc 会导致这样的错误？

感谢您的宝贵时间！

这是我的 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',
    ],
};
};

【问题讨论】：

你试过将'@emotion/babel-preset-css-prop'移到列表底部吗？
在 babel 7.x 中，它将在根目录中获取 babel.config.js，否则为 .babelrc。当代码没有通过诸如 babel 之类的编译器时，该错误也会显示，请确保您的 webpack 正在使用 babel-loader

标签： reactjs babeljs core-motion emotion

【解决方案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 中安装了各个插件，并在插件数组中添加了@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',
    ],
  };
};

【讨论】：