Webpack won't compile when I use an image url in scss - node.js

Question

I'm trying to get a very simple project going with Material Design and WebPack, but I'm getting compile errors. I've been following this guide to set everything up:
https://material.io/develop/web/getting-started
I'm honestly baffled by this error. I have obviously looked online for a solution, but everything I found was related to linter. I don't use a linter.
Here's the error:
ERROR in ./app.scss
Module build failed (from ./node_modules/extract-loader/lib/extractLoader.js):
SyntaxError: unknown: Unexpected token (5:73)
3 | import ___CSS_LOADER_API_IMPORT___ from "./node_modules/css-loader/dist/runtime/api.js";
4 | import ___CSS_LOADER_GET_URL_IMPORT___ from "./node_modules/css-loader/dist/runtime/getUrl.js";
> 5 | var ___CSS_LOADER_URL_IMPORT_0___ = new URL("./images/bckgnd_light.jpg", import.meta.url);
| ^
6 | var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);
7 | var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
8 | // Module
My app.scss file only consists of:
#content {
background: url('./images/bckgnd_light.jpg') #e8e5d7;
}
My webpack.config.js:
const autoprefixer = require('autoprefixer');
module.exports = {
entry: ['./app.scss', './app.js'],
output: {
filename: 'bundle.js',
},
mode: 'development',
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: 'file-loader',
options: {
name: 'bundle.css',
},
},
{loader: 'extract-loader'},
{loader: 'css-loader'},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
autoprefixer()
]
}
}
},
{
loader: 'sass-loader',
options: {
// Prefer Dart Sass
implementation: require('sass'),
// See https://github.com/webpack-contrib/sass-loader/issues/804
webpackImporter: false,
sassOptions: {
includePaths: ['./node_modules'],
},
},
}
],
},
{
test: /\.js$/,
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
},
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
loader: 'url-loader'
},
],
},
};
package.json:
{
"name": "materialdesigntest",
"version": "1.0.0",
"description": "",
"main": "index.html",
"dependencies": {
"#material/button": "^14.0.0",
"#material/ripple": "^14.0.0",
"#material/textfield": "^14.0.0",
"material-components-web": "^14.0.0"
},
"devDependencies": {
"#babel/core": "^7.18.6",
"#babel/eslint-parser": "^7.18.2",
"#babel/preset-env": "^7.18.6",
"autoprefixer": "^10.4.7",
"babel-loader": "^8.2.5",
"css-loader": "^6.7.1",
"extract-loader": "^5.1.0",
"file-loader": "^6.2.0",
"postcss-loader": "^7.0.0",
"sass": "^1.53.0",
"sass-loader": "^13.0.2",
"url-loader": "^4.1.1",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.3"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack serve"
},
"author": "",
"license": "ISC"
}

Answer 1

After some more digging I found this thread:
https://github.com/peerigon/extract-loader/issues/111
Changing the css-loader to this solved the issue for me:
{
loader: 'css-loader',
options: {
esModule: false
}
},