Invalid or unexpected token loading css file using webpack in react project

Question

I have a react project that uses styled components, and I'm trying to include a CSS file as part of react-image-gallery

I followed the steps to include css-loader and style-loader in my project and tried importing the file like this

import 'react-image-gallery/styles/css/image-gallery.css

and included the following in Webpack config rules

{
  test: /\.css$/i,
  use: ['style-loader', 'css-loader'],
}

When running the server I'm getting the below error message

SyntaxError: Invalid or unexpected token

(function (exports, require, module, __filename, __dirname) { @charset "UTF-8";

in the above CSS file

From some googling, I understood that this is because the CSS file is included as a JS file by Webpack. But isn't that how it is supposed to be?

Addition info: I have a server side rendered app.

What am I doing wrong?

Update:

My rules look like this

A rules.ts file

import webpack from 'webpack'

const ts: webpack.RuleSetRule = {
  test: /^(?!.*\.spec\.tsx?$).*\.tsx?$/,
  exclude: /node_modules/,
  use: ['babel-loader'],
}

const img: webpack.RuleSetRule = {
  test: /\.(png|jpe?g|gif|svg)$/,
  use: 'file-loader',
}

const css: webpack.RuleSetRule = {
  test: /\.css$/i,
  use: ['style-loader', 'css-loader'],
}

export default {
  client: {
    ts,
    img,
    css,
  },
  server: {
    ts,
    css,
    img: { ...img, use: [{ loader: 'file-loader', options: { emitFile: false } }] },
  },
}

A config file that has the following

const config: webpack.Configuration = {
  context: path.join(__dirname, '../../src/client'),
  resolve: {
    ...resolve.client,
    alias: { 'react-dom': '@hot-loader/react-dom' },
  },
  devtool: false,
  entry: {
    main: ['./index.tsx'],
  },
  mode: 'development',
  module: {
    rules: [rules.client.ts, rules.client.img, rules.client.css],
  },
  output: output.client,
  plugins: [
    ...plugins,
    ...developmentPlugins,
    new ForkTsCheckerWebpackPlugin({
      tsconfig: path.join(__dirname, '../../tsconfig.fork-ts-checker-webpack.plugin.json'),
    }),
    new CleanWebpackPlugin({
      cleanAfterEveryBuildPatterns: ['!webpack.partial.html', '!favicon.ico'],
    }),
  ],
}

Answer 1

We had 4 co-workers stuck on an issue like that. Actually, we had a plugin "nodemon-webpack-plugin", which we configured for webpack.

This plugin tried to execute files like .css as java-script files.

We finally removed this plugin, because we had an up and running mon already.