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

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

1 голос
/ 02 мая 2019

Реагируйте 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 голос
/ 02 мая 2019

Вы правы, проблема в том, что 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(...);.

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

...