I have a React app which I´m building with webpack. I´m trying to include a svg file reference in my build, but I keep getting this error: ERROR in TypeError: Cannot read property 'tap' of undefined
Here are some info about my build:
"copy-webpack-plugin": "^9.0.0",
"svg-url-loader": "^7.1.1",
"url-loader": "^4.1.1",
"webpack": "^5.52.0",
"webpack-cli": "^4.8.0"
/* eslint-disable @typescript-eslint/no-var-requires */
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'production',
entry: {
main: './src/main.tsx',
},
output: { path: path.resolve(__dirname, 'dist') },
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
],
},
{
test: /\.svg$/,
loader: 'svg-url-loader',
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html',
}),
new webpack.SourceMapDevToolPlugin({
filename: '[name].js.map',
exclude: ['vendor.js'],
}),
],
};
And the full error:
ERROR in TypeError: Cannot read property 'tap' of undefined
- ExternalModuleFactoryPlugin.js:17 ExternalModuleFactoryPlugin.apply
[xx]/[webpack]/lib/ExternalModuleFactoryPlugin.js:17:37
- ExternalsPlugin.js:16
[xx]/[webpack]/lib/ExternalsPlugin.js:16:63
- Hook.js:14 Hook.CALL_DELEGATE [as _call]
[yy]/[tapable]/lib/Hook.js:14:14
- Compiler.js:1086
[yy]/[webpack]/lib/Compiler.js:1086:23
- Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
[yy]/[tapable]/lib/Hook.js:18:14
- Compiler.js:1083 Compiler.compile
[yy]/[webpack]/lib/Compiler.js:1083:28
- Compiler.js:532 Compiler.runAsChild
[yy]/[webpack]/lib/Compiler.js:532:8
- child-compiler.js:110
[xx]/[html-webpack-plugin]/lib/child-compiler.js:110:21
Can someone please tell me what I´m doing wrong?