Опубликован новый пакет npm. При установке и использовании возникает синтаксическая ошибка: «Неожиданный токен»

Question

Я пытаюсь создать пакет npm, который содержит пользовательский интерфейс React и некоторый элемент для подписки на событие, отправляемое пользовательским интерфейсом (я говорю о Pub / Sub в этом отношении, пользовательский интерфейс публикует json и компоненткоторый подписался бы, получит это также). Так, моя цель состоит в том, чтобы экспортировать UI и элемент подписчика (я использую платформу rxjs для публикации и подписки, если это уместно).

При попытке импортировать UI, используяimport { chatUI } from '****'; где **** - пакет, который я создал.

(В пакете npm я экспортировал этот пользовательский интерфейс в файл index.js, используя:

import Chat from './Chat';
export var chatUI = Chat;

)

Я сталкиваюсь со следующей ошибкой компиляции:

./node_modules/****/####/src/Chat.js
SyntaxError: D:\container\‏‏R (3)\node_modules\****\###\src\Chat.js: Unexpected token (406:6)

  404 | 
  405 |     return (
> 406 |       <div className="chat">
      |       ^
  407 |         <h3 key={uuidv1()}>
  408 |           Title<h4>.</h4>
  409 |         </h3>

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

Редактировать: на основе предложения ответа, после использования npx babel src/App.js --out-file script-compiled2.js я получаю следующую ошибку: src/App.js: Unexpected token (9:6).

Подобные вещи происходят в компоненте chat.js после попытки компиляции с babel, в то время как файлы без тегов html, похоже, компилируются нормально ..

Это App.js

import React from 'react';
import './App.css';
import Chat from './Chat';

const App = class extends React.PureComponent {
  render() {
    const { title } = this.context;
    return (
      <div className="center-screen">
        {title} <Chat />
      </div>
    );
  }
};

export default App;

Answer 1

Вам необходимо предварительно перенести компонент, прежде чем публиковать его в реестре, чтобы CRA мог использовать этот код.Один из способов сделать это - создать папку lib/ и перенести туда свои файлы с помощью опции babel --out-file.Затем укажите main внутри вашего package.json файла на lib/ вместо src/ или где бы вы ни находились в данный момент.