Emotion CSS-in-JS ReferenceError: экспорт не определен

Я пытаюсь использовать css prop из библиотека эмоций в проекте, который я обогнал после другого разработчика. В документации говорится, что один из способов начать работу с css prop - это использовать Babel Preset. Я добавил @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',
    ],
};
};

введите описание изображения здесь


reactjs emotion babeljs core-motion
person user13746    schedule 19.01.2019    source источник
comment
Вы пробовали переместить '@ Emotion / babel-preset-css-prop' в конец списка?   -  person Derek Nguyen    schedule 29.01.2019
comment
в babel 7.x он подхватит babel.config.js в корне, иначе .babelrc. также эта ошибка отображается, когда код не проходит через транспилятор, такой как babel, убедитесь, что ваш веб-пакет использует babel-loader   -  person Yichaoz    schedule 07.02.2019

Ответы (1)


arrow_upward
1
arrow_downward

Это старый вопрос, но я только что столкнулся с той же проблемой, поэтому, возможно, мой обходной путь кому-то сэкономит время, даже если вы перешли.

После экспериментов с различными комбинациями babel.config.js пресетов / плагинов при использовании @emotion/babel-preset-css-prop с @babel/plugin-transform-modules-commonjs возникла ошибка «ReferenceError: экспорт не определен».

Похоже, что @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',
    ],
  };
};
person Lauren Ashpole    schedule 17.01.2021