I've recently upgraded my Vue application to webpack 5 and getting the error as shown in the screenshots.
vue.config.js after upgrading the application to webpack 5:
when I run test command, it gives me Runtime Error
RUNTIME EXCEPTION Exception occurred while loading your tests
I also tried adding fullySpecified: false as found in webpack documentation but it did not change anything.
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const path = require('path');
const SentryWebpackPlugin = require('@sentry/webpack-plugin');
const PreloadPlugin = require('@vue/preload-webpack-plugin');
const fileName = process.env.NODE_ENV === 'test' ? 'assets/[name].[ext]' : 'assets/[name].[hash:8].[ext]';
const ParserPlugin = new PreloadPlugin({
rel: 'preload',
as(entry) {
if (/\.css$/.test(entry)) return 'style';
if (/\.woff2$/.test(entry)) return 'font';
return 'script';
},
include: 'allAssets',
fileWhitelist: [/\.woff2(\?.*)?$/i, /\/(vue|vendor~app|chunk-common|submission)\./],
});
module.exports = {
publicPath: '/',
filenameHashing: true,
css: {
sourceMap: true,
loaderOptions: {
css: {
url: false,
}
},
},
chainWebpack: (config) => {
const types = ['vue-modules', 'vue', 'normal-modules', 'normal'];
const svgRule = config.module.rule('svg');
svgRule.uses.clear();
// Added in webpack 5 as type is broken
svgRule.delete('type');
svgRule.delete('generator');
// Handles global import of Scss variables
config.module
.rule('file')
.test(/\.(csv|xlsx|xls)$/)
.use('file-loader')
.loader('file-loader')
.end();
config.module
.rule('url')
.test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/)
.use('url-loader')
.loader('url-loader')
.end();
if (process.env.NODE_ENV === 'test') {
config.merge({
target: 'node',
devtool: 'eval',
});
}
},
configureWebpack: {
resolve: {
modules: ['node_modules'],
extensions: ['.js', '.vue'],
alias: {
...
},
fullySpecified: false,
},
plugins: [
ParserPlugin,
new FriendlyErrorsWebpackPlugin(),
new CompressionWebpackPlugin(),
].filter(Boolean),
},
};