Я нашел 6 или 7 совершенно разных и порой противоречивых ответов на этот вопрос только на SO, поэтому снова спрашиваю в надежде, что кто-то сможет это выяснить ...
У меня есть библиотека компонентов, звоните это my-lib
, и приложение, назовите его my-app
. my-lib
со временем экспортирует компоненты { A, B, C }
, my-app
со временем запускает import { A, B, C } from 'my-lib';
. Раньше я делал это с помощью неорганизованной символической ссылки, теперь я хочу использовать веб-пакет. Библиотека компонентов имеет две одноранговые зависимости, react
и axios
. Итак, что именно мне нужно поместить в конфигурацию my-lib
webpack для того, чтобы должным образом исключить эти зависимости из комплекта?
Самое дальнейшее, что я получил в этой области, это следующее:
externals: {
react: {
commonjs: 'react'
},
axios: {
commonjs: 'axios'
},
}
(оба externals: [ 'react', 'axios' ]
и externals: { react: 'react', axios: 'axios' }
просто не работают)
Кажется, что эти загрузки загружаются правильно, я не получаю неопределенную ошибку ссылки, но очевидно этого недостаточно, потому что React дает сбой при создании любого компонента из my-lib
, потому что он явно не определен.
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function
(for composite components) but got: undefined. You likely forgot to export your component from the file
it's defined in, or you might have mixed up default and named imports.
(компоненты работали до перехода на веб-пакет)
РЕДАКТИРОВАТЬ:
Добавлен libraryTarget: umd
в output
и изменен обратно на externals: [ 'react', 'axios' ]
... Кажется, он правильно связался, не похоже, что модули в комплекте, но теперь экспортируемые компоненты каким-то образом используют версия React отличается от используемой в приложении, что приводит к ошибкам перехвата.
Также есть псевдонимы библиотек с react: path.resolve(__dirname, './node_modules/react')
и установка ReactDOM в качестве одноранговой зависимости и включение ее в Индексный файл, даже если он не используется. Еще ничего. Вот конфиг в настоящее время:
const path = require('path');
module.exports = {
mode: 'development',
entry: './index.js',
output: {
path: __dirname,
filename: 'build.js',
library: 'my-lib',
libraryTarget: 'umd',
umdNamedDefine: true
},
resolve: {
alias: {
'react': path.resolve(__dirname, './node_modules/react'),
'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
'axios': path.resolve(__dirname, './node_modules/axios')
}
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [ '@babel/preset-env', '@babel/react' ]
}
}
}
]
},
externals: [ 'react', 'react-dom', 'axios' ]
}
, который оставляет меня с этим
Uncaught Error: Invalid hook call. Hooks can only be called inside of the body
of a function component.