1

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

我无法找到任何与此直接相关的错误的线程，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',
    ],
};
};

在此处输入图像描述

4

1 回答 1

1

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

在尝试了不同的预设/插件组合后，使用withbabel.config.js时出现“ReferenceError:exports is not defined”错误。@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中删除、安装了各个插件，并将之前的插件添加到 plugins 数组中（使用“___EmotionJSX”作为）。@babel/plugin-transform-modules-commonjspragmaName

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

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',
    ],
  };
};
于 2021-01-17T22:51:54.357 回答