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

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?

Nasr Shamalkh · Accepted Answer · 2020-12-15 13:22:59Z

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.

answered Dec 15, 2020 at 13:22

Nasr Shamalkh

262 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hassenboy · Accepted Answer · 2020-08-26 17:31:31Z

1

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(),
    ],
}
...

answered Aug 26, 2020 at 17:31

Hassenboy

1751 silver badge9 bronze badges

1 Comment

BairDev Over a year ago

Instead of removing the plugin, you can specify the file types, which will be checked by it. Smth like files: "./src/**/*.tsx".

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related