I'm trying to develop a custom react component and I want to publish it on npm later. I've got the following webpack config:
var path = require('path');
module.exports = (env, args) => {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'index.js',
libraryTarget: 'commonjs2'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|build)/,
use: {
loader: 'babel-loader',
options: {
presets: ["@babel/preset-env", "@babel/preset-react"]
}
}
}
]
}
externals: {
react: 'commonjs react'
}
}
When running in the browser, I get 'require is not defined'
. Why does webpack bundle a require statement? If I remove externals from the config, everything runs alright.
EDIT: By running in the browser, I mean that I've created a client project for the lib using npx create-react-app. There, I've imported my bundle via an import statement.