0

My app runs normally with yarn, but cannot load the css when I use a benchmarking library react-benchmark, which uses webpack. An minimal example of the entire project is here: https://github.com/dustinfreeman/bug-react-benchmark-css-import

Here is the loading error:

$ react-benchmark --debug src/index.tsx
✖ Compiling bundle
/Users/dustinfreeman/Documents/Code/bug-react-benchmark-css-import/src/index.css 1:5
Module parse failed: Unexpected token (1:5)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> body {
|   font: 14px 'Century Gothic', Futura, sans-serif;
|   margin: 20px;
 @ /Users/dustinfreeman/Documents/Code/bug-react-benchmark-css-import/src/index.tsx 3:0-21
 @ ./client.js

webpack.config.js

export const module = {
  rules: [
    {
      test: /\.(css|scss)$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            importLoaders: 1,
            modules: {
              localIdentName: "[name]__[local]___[hash:base64:5]",
            },
          }
        }
      ],
      include: /\.module\.css$/
    },
    {
      test: /\.(css|scss)$/,
      use: [
        'style-loader',
        'css-loader'
      ],
      exclude: /\.module\.css$/
    },
  ],
};
escapecharacter
  • 954
  • 2
  • 12
  • 29
  • Looks like that tool doesn't let you use your own webpack config. https://github.com/Rowno/react-benchmark/blob/a06feae2fd72855f345bd2c535a1567ede1e1077/lib/webpack.js – Håken Lid Mar 13 '21 at 22:24
  • A possible workaround is to specify the css loader inline. https://webpack.js.org/concepts/loaders/#inline – Håken Lid Mar 13 '21 at 22:31

1 Answers1

0

Inline worked for me. Try: import "style-loader!css-loader!./index.css"

Anon
  • 1
  • 1
  • This is just a workaround of the issue. The OP is looking for a solution that will help recognizing the css-loader by webpack. – Ritik Banger Sep 20 '22 at 15:41