I have been encountering an issue with webpack 4.6.0 during compilation:
Uncaught Error: Module parse failed: Unexpected token (1:4)
You may need an appropriate loader to handle this file type.
| div {
| background-color: yellow;
| color: red;
Here is my webpack configuration:
var path = require('path');
var webpack = require('webpack');
module.exports = {
mode:'development',
entry: './src/code/app.js',
output: { path: __dirname, filename: 'bundle.js'},
watch: true,
module: {
rules: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
plugins: "transform-class-properties",
presets: ['es2015', 'react']
}
},
{
test: /\.css$/,
include: /node_modules/,
loader: 'css-loader'
}
]
}
};
Additionally, I have the following version of css-loader:
"css-loader": "^0.28.11",
My file structure is as follows:
root:
-src
|-code
|-XXXX.js
|-css
|-HomePage.css
I have tried various methods to resolve the issue related to the css loader, but none of them seem to be working. Could it be related to my file structure?