I need to remove all the .test.js
files from my React project.
I am getting errors after building the app.
Module parse failed: Unexpected token
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
If I remove therules
and change it to justexclude: /node_modules/
the error goes away but theBundleAnalyzerPlugin
still displays the .test.js
files so I assume the webpack didn't removed them.
module.exports = {
devtool: false,
mode: 'production',
entry: {
app: [path.join(config.srcDir, 'index.js')],
},
optimization: {
moduleIds: 'named',
chunkIds: 'named',
minimize: true,
nodeEnv: 'production',
mangleWasmImports: true,
removeEmptyChunks: false,
mergeDuplicateChunks: false,
flagIncludedChunks: true,
minimizer: [`...`,
new CssMinimizerPlugin({
minimizerOptions: {
preset: [
"default",
{
calc: false,
discardComments: { removeAll: true },
},
],
},
}),
'...'],
emitOnErrors: true,
splitChunks: {
chunks: 'all',
minSize: 20000,
minRemainingSize: 0,
minChunks: 1,
maxAsyncRequests: 30,
maxInitialRequests: 30,
enforceSizeThreshold: 50000,
cacheGroups: {
defaultVendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
reuseExistingChunk: true,
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true,
},
},
},
},
output: {
filename: '[name].bundle.js',
chunkFilename: '[name].chunk.js',
path: config.distDir,
publicPath: BASE_PATH,
},
resolve: {
fallback: { "querystring": false },
modules: ['node_modules', config.srcDir],
alias: {
path: require.resolve('path-browserify'),
Components: path.resolve(__dirname, '../app/components'),
Context: path.resolve(__dirname, '../app/context'),
Images: path.resolve(__dirname, '../app/images'),
Plugins: path.resolve(__dirname, '../plugins'),
Redux: path.resolve(__dirname, '../app/redux'),
Routes: path.resolve(__dirname, '../app/routes'),
Styles: path.resolve(__dirname, '../app/styles'),
Utils: path.resolve(__dirname, '../app/utils'),
},
},
plugins: [
new CircularDependencyPlugin({
exclude: /a\.js|node_modules/,
failOnError: true,
allowAsyncCycles: false,
cwd: process.cwd(),
}),
new HtmlWebpackPlugin({
template: config.srcHtmlLayout,
inject: 'body',
title: 'AdminUI',
}),
new MiniCssExtractPlugin(),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production'),
BASE_PATH: JSON.stringify(BASE_PATH),
API_BASE_URL: JSON.stringify(API_BASE_URL),
CONFIG_API_BASE_URL: JSON.stringify(CONFIG_API_BASE_URL),
SESSION_TIMEOUT_IN_MINUTES: JSON.stringify(SESSION_TIMEOUT_IN_MINUTES),
},
}),
new PurgeCSSPlugin({ paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }) }),
new webpack.IgnorePlugin({
resourceRegExp: /\.test\.js$/,
}),
new BundleAnalyzerPlugin(),
],
module: {
rules: [
{
test: /\.js$/,
include: [config.srcDir, config.pluginsDir],
exclude: /(node_modules|\.test\.js$)/,
use: 'babel-loader',
sideEffects: false,
},
// Modular Styles
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "style-loader", "css-loader", "postcss-loader"]
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: true,
},
},
{ loader: 'postcss-loader' },
'sass-loader',
],
exclude: [path.resolve(config.srcDir, 'styles')],
include: [config.srcDir],
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{ loader: 'css-loader' },
{ loader: 'postcss-loader' },
{
loader: 'sass-loader',
options: {},
},
],
include: [path.resolve(config.srcDir, 'styles')],
},
// Fonts
{
test: /\.(ttf|eot|woff|woff2)$/,
loader: 'file-loader',
options: {
name: '/fonts/[name].[ext]',
esModule: false,
},
},
// Files
{
test: /\.(jpg|jpeg|png|gif|svg|ico)$/,
loader: 'file-loader',
options: {
name: '/static/[name].[ext]',
esModule: false,
},
},
],
},
devServer: {
hot: false,
//contentBase: config.distDir,
compress: true,
historyApiFallback: {
index: BASE_PATH,
},
host: '0.0.0.0',
port: 4100,
},
}
FYI, I am using webpack 5.x
By adding ignore-loader
in the rules I was able to solve the error and remove .test.js
files from the build.
Install it as dev dependency
npm install --save-dev ignore-loader
{
test: /\.test\.js$/,
include: [config.srcDir, config.pluginsDir],
use: 'ignore-loader',
}