[英]Uncaught TypeError: __webpack_require__.r is not a function
I have a multi-entry application in which multiple entries are loaded in one web page.我有一个多条目应用程序,其中在一个网页中加载了多个条目。 Here I get the following error "Uncaught TypeError: webpack_require .r is not a function".
在这里,我收到以下错误“未捕获的类型错误: webpack_require .r不是函数”。 I analysed the webpack build outputs and come to the following conclusion.
我分析了 webpack 构建输出并得出以下结论。
Entry A and B both require module C. The outputs of A and B are both loaded in one page.条目 A 和 B 都需要模块 C。 A 和 B 的输出都加载在一页中。 For entry B, webpack creates a seperate chunk for C that also contains some other modules.
对于条目 B,webpack 为 C 创建了一个单独的块,其中还包含一些其他模块。 But for B, webpack includes C in the same file as the output of B. When calling module C from B, however it is using the seperate chunk file instead of the module included in the output file of B.
但是对于 B,webpack 将 C 包含在与 B 的输出相同的文件中。 当从 B 调用模块 C 时,它使用单独的块文件而不是 B 的输出文件中包含的模块。
Now the problem is that module C from the seperate chunk is calling现在的问题是来自单独块的模块 C 正在调用
__webpack_require__.r(__webpack_exports__);
while module C which is included in the output file of B does not.而包含在 B 的输出文件中的模块 C 没有。 And within the context of B webpack somehow doesn't define r.
在 B webpack 的上下文中,不知何故没有定义 r。
I see 2 problems here.我在这里看到 2 个问题。
According to webpack comments r is "define __esModule on exports".根据 webpack 的评论,r 是“在导出时定义 __esModule”。 Can I somehow enforce r to be defined for a given entry as that would probably solve this bug?
我能否以某种方式强制为给定条目定义 r,因为这可能会解决此错误?
I'm using webpack 5.28.0我正在使用 webpack 5.28.0
const AssetsPlugin = require('assets-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { VueLoaderPlugin } = require('vue-loader');
const webpack = require('webpack');
const path = require('path');
const packageJson = require("./package.json");
module.exports = {
entry: {
'account': './src/apps/account/account.js',
'admin-dashboard': './src/apps/admin/dashboard.js',
'admin-statistics': './src/apps/admin/statistics.js',
'conflicts': './src/apps/conflicts.js',
'create-useraccount': './src/apps/account/free/create-useraccount.js',
'confirm-temporary-useraccount': './src/apps/account/free/confirm-temporary-useraccount.js',
'confirm-useraccount': './src/apps/account/free/confirm-useraccount.js',
'login': './src/apps/account/login.js',
'project-issues': './src/apps/project-issues.js',
'project': './src/apps/project.js',
'my-settings': './src/apps/my-settings.js',
'my-space': './src/apps/my-space.js',
'model': './src/apps/model.js',
'ifc-property-lists': './src/apps/ifc-property-lists.js',
'settings': './src/apps/settings.js'
},
output: {
assetModuleFilename: "[name].[contenthash][ext][query]",
chunkFilename: "[name].[contenthash].js",
filename: "[name].[contenthash].js",
publicPath: '/webapp/dist/',
clean: true
},
optimization: {
minimize: true,
minimizer: [
`...`,
new CssMinimizerPlugin(),
],
splitChunks: {
chunks: 'all'
},
usedExports: true
},
mode: 'production',
module: {
rules: [
{
test: require.resolve("jquery"),
loader: "expose-loader",
options: {
exposes: [{
globalName: "$",
override: true
}, {
globalName: "jQuery",
override: true
}]
}
}, {
test: /\.vue$/,
loader: 'vue-loader'
}, {
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader'
}, {
loader: 'resolve-url-loader',
options: {
removeCR: true
}
}, {
loader: 'less-loader'
}
]
}, {
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader, {
loader: 'css-loader'
}, {
loader: 'resolve-url-loader',
options: {
removeCR: true
}
}, {
loader: 'sass-loader',
options: {
sourceMap: true,
sassOptions: {
includePaths: [
path.resolve(__dirname, "./node_modules/@syncfusion")
]
}
}
}]
}, {
test: /\.js$/,
exclude: [/assets/, /node_modules\\(?!@bimcollab)/],
loader: 'babel-loader'
}, {
test: /\.(png|jpg|gif|woff(2)?)$/,
type: 'asset'
}]
},
plugins: [
new AssetsPlugin({ // Creates 'webpack-assets.json' file with all asset paths
prettyPrint: true,
entrypoints: true
}),
new BundleAnalyzerPlugin({
analyzerMode: "static",
openAnalyzer: false
}),
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
chunkFilename: "[name].[contenthash].css",
filename: "[name].[contenthash].css"
}),
new webpack.DefinePlugin({
"process.env": JSON.stringify(process.env)
})
],
resolve: {
alias: {
'@src': path.resolve(__dirname, 'src/'),
'@assets': path.resolve(__dirname, 'assets/'),
}
}
};
console.log(packageJson.version);
I found a solution for this problem.我找到了解决这个问题的方法。 As said, the real problem here is that for entry B webpack puts the code for module C into the output file of B, while at runtime it is trying to access module C from its seperate chunk file (that was created by webpack for entry A).
如前所述,这里真正的问题是,对于入口 B,webpack 将模块 C 的代码放入 B 的输出文件中,而在运行时,它试图从其单独的块文件(由 webpack 为入口 A 创建的)访问模块 C )。
Now, if I enforce webpack to always put module C into a seperate chunk it solves the problem.现在,如果我强制 webpack 始终将模块 C 放入一个单独的块中,它就解决了问题。 In that case, webpack creates only one file for module C so during runtime it will always use the single right file.
在这种情况下,webpack 只为模块 C 创建一个文件,因此在运行时它将始终使用单个正确的文件。 To do so I used cacheGroups.
为此,我使用了 cacheGroups。 In the case below, the problem was in BootstrapVue, but I've also seen other modules that were giving the same problem.
在下面的例子中,问题出在 BootstrapVue 中,但我也看到其他模块也出现了同样的问题。
splitChunks: {
chunks: 'all',
cacheGroups: {
bootstrapVue: {
test: /[\\/]node_modules[\\/]bootstrap-vue[\\/]/,
name: 'bootstrap-vue',
},
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.