Я работаю над двумя проектами внутри монорепо. Оба проекта имеют одинаковые зависимости, и каждый имеет webpack.config.js
. Конфигурация для обоих точно такая же. Однако в одном из проектов веб-пакет добавляет require('../../node_modules/process/browser')
, что приводит к следующей ошибке: Uncaught ReferenceError: require is not defined
.
Я не могу понять, почему это происходит, поэтому буду признателен за некоторые новые идеи и предложения. Мой конфиг выглядит так:
[
{
"devtool": "eval",
"entry": {
"main": "index.web.js"
},
"mode": "development",
"module": {
"rules": [
{
"exclude": /node_modules\/(?!(@bs)\/)/,
"loader": "babel-loader",
"options": {
"plugins": [
"@babel/plugin-syntax-dynamic-import"
],
"presets": [
"@babel/preset-flow",
[
"@babel/preset-env",
{
"targets": "last 2 versions, not dead",
"useBuiltIns": "usage"
}
],
"@babel/preset-react"
]
},
"test": /(\.jsx?|\.mjs)$/
},
]
},
"name": "client",
"optimization": {
"splitChunks": {
"cacheGroups": {
"commons": {
"chunks": "initial",
"enforce": true,
"name": "vendor",
"test": /node_modules\/(?!(@bs)\/)/
}
}
}
},
"output": {
"chunkFilename": "js/[name].[chunkhash].js",
"filename": "js/[name].[chunkhash].js",
"path": "public/build",
"publicPath": "/build/"
},
"plugins": [
new webpack.EnvironmentPlugin({
APP_ENV: 'browser',
CI: null,
}),
new MiniCssExtractPlugin({
chunkFilename: css/[id].[contenthash].css,
filename: css/[name].[contenthash].css,
}),
new SvgStorePlugin(),
new DotenvPlugin(),
new ManifestPlugin(),
],
"resolve": {
"extensions": [
".js",
".jsx",
".mjs",
".scss"
]
},
"stats": {
"children": false,
"colors": true,
"modules": false,
"reasons": true
},
"target": "web",
"watch": true,
"watchOptions": {
"ignored": /node_modules/
}
},
{
"devtool": "eval",
"entry": {
"main": "index.server.js"
},
"externals": /^[a-z\-0-9]+$/,
"mode": "development",
"module": {
"rules": [
{
"exclude": /node_modules\/(?!(@bs)\/)/,
"loader": "babel-loader",
"options": {
"plugins": [
"@babel/plugin-syntax-dynamic-import"
],
"presets": [
"@babel/preset-flow",
[
"@babel/preset-env",
{
"targets": "node 8",
"useBuiltIns": "usage"
}
],
"@babel/preset-react"
]
},
"test": /(\.jsx?|\.mjs)$/
},
]
},
"name": "server",
"output": {
"chunkFilename": "js/[name].js",
"filename": "js/[name].js",
"libraryTarget": "commonjs2",
"path": "server/build",
"publicPath": "/build/"
},
"plugins": [
new webpack.EnvironmentPlugin({
APP_ENV: 'server',
CI: null,
}),
new MiniCssExtractPlugin({
chunkFilename: css/[id].[contenthash].css,
filename: css/[name].[contenthash].css,
}),
new SvgStorePlugin(),
new DotenvPlugin(),
],
"resolve": {
"extensions": [
".js",
".jsx",
".mjs",
".scss"
]
},
"stats": {
"children": false,
"colors": true,
"modules": false,
"reasons": true
},
"target": "node",
"watch": true,
"watchOptions": {
"ignored": /node_modules/
}
}
]
Я заметил, что когда я добавляю type: 'javascript/auto'
к конфигурации babel-loader
, проблема исчезла. Но почему? И это правильный способ решения этой проблемы?