1 Вопрос: Ошибка Babel / JSX Transpiler при сборке при импорте модуля в новый проект create-реагировать на приложение

вопрос создан в Thu, May 2, 2019 12:00 AM

Реагируйте Noob здесь.

Я застрял на этом некоторое время.

Я пытался добавить модуль в проект, который я делаю, но обнаружил, что та же проблема возникает, когда я запускаю его с новым приложением create-реагировать.

Я полагаю, что это связано с babel /JSX, потому что, если я добавлю src импортированных модулей в новый проект или просто в src существующего, он, похоже, будет хорошо скомпилирован, но не как импорт.

1) настройте новое приложение реакции:

npx create-react-app test-project
cd test-project

2) установить пакет:

npm install --save react-collision-provider

3) Добавить импорт в App.js

+ import { collisionProviderFactory } from 'react-collision-provider';

4) начать проект

npm start

Ошибка:

./node_modules/react-collision-provider/src/components/collisionProviderFactory.js
SyntaxError: /Users/XXXXXXX/Documents/TestProjects/test-project/node_modules/react-collision-provider/src/components/collisionProviderFactory.js: Unexpected token (37:14)

  35 |     render() {
  36 |       const Component = this.props.component;
> 37 |       return (<Component
     |               ^
  38 |         onCollision={this.onCollision}
  39 |         updatePosition={this.updatePosition}
  40 |         {...this.props}

Я пытался возиться с различными настройками Babel и извлечением проекта, но безуспешно. Я слышал, что CRA не переносит node_modules только src, но не уверен, как скомпилировать JSX в продвинутом режиме в node_modules?

Спасибо.

    
1
1 ответ                              1                         

Вы правы, проблема в том, что react-collision-provider не был должным образом перенесен для понимания браузером . Браузер , естественно, не понимает JSX , поскольку это синтаксический сахар, позволяющий легко создавать представления компонентов React. Вот почему мы используем babel для преобразования JSX в вызовы React.createElement(...);, которые являются собственными JavaScript и могут быть поняты браузером.

Возможно, вы могли бы сделать следующее:

  1. Загрузить babel-cli:

    npm install --save-dev @babel/cli р>

  2. Загрузите плагин @babel/plugin-transform-react-jsx. Нам нужен этот плагин с Babel 6 и выше, больше не имеет собственных преобразований для React . Это необходимо для переноса неподдерживаемых функций JavaScript, таких как JSX, в собственный код JavaScript, который может быть понят браузером.

    npm install --save-dev @babel/plugin-transform-react-jsx р>

  3. Создайте пользовательскую команду в разделе scripts вашего файла package.json для переноса модуля узла react-collision-provider. Примерно так:

    "scripts": { ... "libTranspile": "babel --plugins @babel/transform-react-jsx <path_to_react_collison_module> --out-dir <path_to_react_collision_module> --copy-files", ... }, р>

  4. Теперь вы сможете запускать пользовательскую команду для переноса вашего модуля react-collision-provider:

    npm run libTranspile р>

Теперь необходимо перенести модуль react-collision-provider, а все разделы кода JSX заменить на вызовы React.createElement(...);.

Надеюсь, это поможет!

    
1
2019-05-02 17: 40: 27Z
  1. Похоже, это имеет смысл, спасибо! Проверим и расскажем как все пойдет. В идеале я хотел бы получить решение, в котором я мог бы просто перечислить свои импортированные модули по имени, которое, возможно, потребуется перенести (возможно, помня, были ли они после последнего редактирования или нет), или, что еще лучше, команду для переноса при установке в первую очередь "npm я --save --transpile имя_пакета ". Я подумаю и обновлю свой пост, если найду более простое решение:)
    2019-05-02 18: 21: 57Z
  2. Вы можете удалить и добавить этот узел_модуля в точку входа webpack.config.js, чтобы его можно было переносить с помощью babel. Для вашего последнего утверждения вам нужно будет создать собственный скрипт
    2019-05-02 19: 06: 50Z
источник размещен Вот