Я публикую ответ, вдохновленный этим ответом в Невозможно прочитать свойство 'Компонент' из неопределенного - сборка веб-пакета плагина реагирующего компонента . Мой вопрос здесь, по крайней мере, в некоторой степени связан с вопросом React Context API не работает из пользовательской NPM библиотеки компонентов , и эти люди все еще ищут ответ - возможно, это поможет.
Мне пришлось внести коррективы в мой webpack.config.js, а также package.json, чтобы решить эту проблему.
В webpack.config.js
Изменить это:
libraryTarget: 'commonjs2'
к этому:
library: "EditablePopup",
libraryTarget: 'umd'
, а также добавление mode: development к module.exports.
В package.json
Перемещение некоторых из моих dependencies в peerDependencies:
// Change from this:
"dependencies": {
"html-react-parser": "^0.10.0",
"leaflet": "^1.6.0",
"react": "^16.12.0",
"react-contenteditable": "^3.3.3",
"react-dom": "^16.12.0",
"react-leaflet": "^2.6.1",
"webpack": "^4.41.5"
},
"peerDependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-leaflet": "^2.6.1",
"leaflet": "^1.6.0"
}
// to this:
"dependencies": {
"html-react-parser": "^0.10.0",
"react-contenteditable": "^3.3.3",
"webpack": "^4.41.5"
},
"peerDependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-leaflet": "^2.6.1",
"leaflet": "^1.6.0"
}
Я уверен, что это webpack.config.js изменения, которые были кикером. Для полноты вот изменения этого файла:
<b>// webpack.config.js</b>
var path = require('path');
module.exports = {
entry: './src/EditablePopup.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'EditablePopup.js',
<b>- <del>libraryTarget: 'commonjs2',</del>
+ library: "EditablePopup",
+ libraryTarget: 'umd'</b>
},
<b>+ mode: "development",</b>
module: {
rules: [
{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
exclude: /(node_modules|bower_components|build)/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
]
},
{
test : /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' }
]
}
]
},
externals: {
'react-dom': 'commonjs react-dom',
leaflet: {
commonjs: 'leaflet',
commonjs2: 'leaflet',
root: 'L'
},
'react-leaflet': {
commonjs: 'react-leaflet',
commonjs2: 'react-leaflet',
root: 'ReactLeaflet'
},
react: {
commonjs: 'react',
commonjs2: 'react',
root: 'React'
}
}
};