React - Как использовать модуль, связанный с npm
Как я могу использовать модуль, импортированный через
npm link
в webpack для приложения React?
MyModule_Folder
---------------------------------
|--package.json
|--src
|--myModule
|--MyComponent.jsx
|--MyStyle.css
...
|--public
|--index.html
App
---------------------------------
|--package.json
|--src
...
MyModule / package.json выглядит так
{
"name": "@mymodule/external",
"version": "1.0.0",
"main": "src/index.jsx",
"babel": {
...
},
"devDependencies": {
...
},
"dependencies": {
...
},
"scripts": {
...
}
}
Я набрал
cd <path_to_MyModule_Folder>
npm link
cd <path_to_MyReactApp>
npm link @mymodule/external
Если я импортирую свой модуль таким образом
import { MyModuleClass } from "@mymodule/external";
Я получил ошибку
Ошибка: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of nэто URL-адрес ошибки
Что ж, тогда у вас неправильный MyModule, пожалуйста, покажите полный исходный index.ja myModule
В MyModule есть этот класс import { Component } from "react"; class Esterno extends Component { constructor(props) { super(props); console.info('ElementoEsterno.constructor'); this.val = 15; } render() { return ( <div> Elemento ESTERNO </div> ); } } export default Esterno и файл index.js с таким содержимым: export * from './esterno.jsx';
Ответы 1
Вы ошиблись при импорте экспорта MyModule
MyModule.js
import React from 'react'
export function helloWorld() {}
Class Esterno extends React.Component {
render() { ..... }
}
export default Esterno
index.js
export * from './MyModule.js'
теперь представьте, что это использование
import Esterno from 'mymodule'
console.info(Esterno)
вы сейчас импортируете все содержимое модуля (*), поэтому отупут будет
object = {
helloWorld: function() {}
default: class Esterno {}
}
теперь давайте изменим экспорт в index.js
export default from './MyModule.js`
теперь журнал консоли будет выводить
object = class Esterno {}
поэтому вам не хватает разницы между экспортом / импортом * и default по умолчанию - это модуль по умолчанию, а * - это объект всех экспортов из модуля.
к сожалению у меня все тот же ошибкаElement type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of n. это репозиторий приложений и это репо внешнего модуля
Ну, у вас во внешнем модуле в package.json указан src/index.js, этот файл не существует, он у вас в корне, и у вас все еще есть экспорт * вместо экспорта по умолчанию, как я писал ...
Я исправил!!! это репозитории приложение и внешний модуль
где? github.com/vitolipari/react-external_module/blob/master/… Еще вижу export *
не могли бы вы опубликовать также свою ошибку?