Babel: не удается загрузить CSS (неожиданный токен) при использовании AWS Amplify

Я создаю приложение React с помощью AWS Amplify.

Я модульно тестирую свое приложение, используя RITEway. Чтобы использовать RITEway с React, мне нужно установить @babel/core @babel/polyfill @babel/preset-env @babel/register, а затем запустить тесты с помощью:

"test": "riteway -r @babel/register -r @babel/polyfill 'src/**/*.test.js' | tap-color"

.babelrc определяется следующим образом:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": ["last 2 versions", "safari >= 7"]
      }
    ],
    "@babel/preset-react"
  ]
}

Я подключил компонент к graphql с помощью AWS Amplify и его вспомогательных методов AppSync:

export default compose(
  graphqlMutation(gql(createContact), gql(listContacts), 'Contact'),
)(CreateContactButton);

Эта кнопка отображается как дочерний компонент в одном из тестов. Теперь этот тест вылетает, говоря, что в контексте компонента отсутствует client, что я исправляю, заключая его в <ApolloProvider /> в тестовом файле:

describe('ContactList component', async assert => {
  const createContactList = (props = {}) =>
    render(
      <ApolloProvider client={client}>
        <Provider store={store}>
          <ContactList {...props} />
        </Provider>
      </ApolloProvider>
    );

Как только я это сделаю, тесты завершатся с ошибкой:

/Users/jan/dev/myapp/node_modules/@aws-amplify/ui/dist/style.css:13
:root {
^

SyntaxError: Unexpected token :
    at new Script (vm.js:79:7)
    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)
    at Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Object.newLoader [as .js] (/Users/jan/dev/myapp/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)

Я не могу изменить код Amplify. Какие еще плагины babel мне нужно добавить, чтобы мои тесты не падали при встрече с CSS? Или, в более общем плане, как я могу избежать краха babel и запустить свои тесты?


reactjs aws-amplify babeljs babel-loader babel-polyfill
person J. Hesters    schedule 16.04.2019    source источник
comment
Я запускаю ту же ошибку, отчаянно ищу решение. Пожалуйста, добавьте решение, если найдете его ????   -  person ronkot    schedule 08.10.2019

Ответы (1)


arrow_upward
0
arrow_downward

Babel не может обрабатывать такие ресурсы, как CSS или файлы изображений. Но пакет @babel/register предоставит возможность настроить пользовательские загрузчики по расширению. Их можно оценить после импорта пакета @babel/register. Он перезапишет исходное требование от узла требованием от Babel. Существует объект настроек extensions на require, доступный для установки пользовательского загрузчика. Чтобы игнорировать какое-либо расширение, просто установите загрузчик для расширения на пустую функцию, например:

require.extensions['.css'] = () => {};

В сочетании с RITEway для игнорирования файлов изображений CSS и JPG можно использовать дополнительный файл с именем, например babelInit.js, и некоторую конфигурацию, подобную этой:

require('@babel/register');
require('@babel/polyfill');

require.extensions['.css'] = () => {};
require.extensions['.jpg'] = () => {};

Наконец, требуется новый файл конфигурации вместо самих пакетов:

{
  "scripts": {
    "test": "riteway -r ./babelInit.js 'src/**/*.test.js' | tap-color"
  }
}
person Matthias Fischer    schedule 10.05.2020