我为我的前端组件创建了一个react-components
库。它们被导入另一个反应项目,search
. 我想用浏览器调试器检查组件。
我将所有东西都与 webpack 捆绑在一起。所以我尝试将库与webpack --mode development
. 它编译得很好,但是当我访问该页面时,我得到一个Unhandled Runtime Error
ReferenceError: require is not defined
. 相反,生产构建工作。
在库中,react
并被react-dom
定义为 peerDependencies。
库 webpack.config
module.exports = {
entry: './src/index.js',
externals: {
react: 'react',
reactDOM: 'react-dom'
},
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'dist'),
library: '',
libraryTarget: 'commonjs'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
...
]
}
}
宿主项目import
依赖并与 nextjs 捆绑在一起。