情感CSS-in-JS ReferenceError:导出未定义

Question

我正在尝试在一个项目中使用来自情感库的情感库，这个项目是在另一个开发之后超越的。在文档中，他们说如何开始使用css prop的一种方法是使用Babel预设。我已经将@emotion/babel-preset-css-prop添加到了presets中的babel.config.js中，但是我得到了一个非常有趣的错误。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',
    ],
};
};

​

​

Answer 1

这是一个老问题，但我只是遇到了同样的问题，也许我的解决办法将节省一些时间，即使你已经离开了。

在对不同的babel.config.js预置/插件组合进行实验之后，“ReferenceError:导出未定义”在@emotion/babel-preset-css-prop与@babel/plugin-transform-modules-commonjs一起使用时发生错误。

看起来@babel/plugin-transform-modules-commonjs必须在@emotion/babel-preset-css-prop之后运行，但是Babel插件在预置之前运行。为了解决这个问题，我删除了@emotion/babel-preset-css-prop，从它的源代码中安装了各个插件，并在@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',
    ],
  };
};