webpack with css-loader - Parsing error: ';' expected - css

Question

I am starting my first project with React.
To start with, I just have a single component LikeButton.tsx, which is injected into the body. I am trying to apply some styles to this button:
import './LikeButton.css';
LikeButton.css:
button {
color: red;
}
Here is my webpack.config.ts:
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx|tsx|ts)$/,
exclude: /(node_modules|dist)/,
use: 'babel-loader'
}, {
test: /\.css$/i,
use: [
'style-loader', 'css-loader'
]
}
]
},
...
};
When I run webpack, I end up with the following error:
ERROR in src/components/LikeButton.css:1:7
[unknown]: Parsing error: ';' expected.
> 1 | button {
| ^
2 | color: red;
3 | }
The css syntax is correct, so I am guessing the css is being interpreted as javascript/typescript somewhere, but I cannot see where due to the [unknown]-part in the error message.
The loader
What is happening here?

Answer 1

Instead of removing ForkTsCheckerWebpackPlugin which of course you may need for typescript / React combination to work properly, specify the files that you want eslint to check
eslint: {
files: './src/**/*.{ts,tsx,js,jsx}',
},
this tells eslint to check javascript and typescript files only, thus removing the css error.

Answer 2

It was the Fork TS Checker Webpack Plugin that caused the issue. By removing it from module.exports.plugins in webpack.config.ts, the error disappeared:
module.exports = {
...
plugins: [
new ForkTsCheckerWebpackPlugin({
async: false,
eslint: {
files: "./src/**/*",
},
}),
new MiniCssExtractPlugin(),
],
}
...