Я создаю свой первый компонент в ReactJS и хочу опубликовать его в виде пакета npm для использования другими приложениями.
В настоящее время мой компонент <FooComponent /> создается с помощью Webpack (через babel-loader). Я пишу это в ES6 и веб-пакет собирает его в один большой грязный dist/index.js файл.
Когда я использую этот компонент / пакет npm в другом Реактивном компоненте в другом проекте, я получаю сообщение об ошибке
import FooComponent from "foo-component";
...
render () {
<div>
<FooComponent someProp={true} />
</div>
}
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Я предполагаю, что даже еслиЯ делаю export default FooComponent внутри своего компонента npm, он компилируется в vanilla JS с веб-пакетом, который не может быть повторно импортирован модулем ES6 другого приложения.
Итак, это подводит меня к сути моего вопроса - как мне публиковать свой пакет npm?
- Есть ли способ исправить вышеперечисленное и импортировать файл vanilla bundle.js (созданный Webpack) в модули ES6?
- ИЛИ Должен ли я выводить отдельные модули, которые другие приложенияможно импортировать? И в этом случае я предполагаю, что мой компонент просто скомпилирован / перенесен / связан с кодом этого приложения?
Я запутался, потому что некоторые проекты на Github, похоже, имеют папку dist/ с скомпилированным выводом, а другие, такие как act-npm -ilerplate , даже не используют Webpackи просто используйте bable для переноса файлов и все (т.е. 2-й вариант выше).
Нужно понять, что вызывает проблему import и что такое подход «отраслевого стандарта».
Спасибо!