React + Webpack don't resolve file loaders

Question

I was trying to migrate a typical HTML site to a "light" React app. Therefore, I have installed React without create-react-app.

I configured Webpack and then file-loader to use fonts in the CSS files. But I am still getting errors when compiling because it does not recognize the file loaders (I also tried ttf-loader and url-loader).

I have been reading similar questions but neither of their solutions works on this case.

The project's directory structure looks like this:

webpack.config.js
src
- index.js
- css
  - style.css
- fonts
  - pgroofrunners.ttf

This is my current Webpack configuration (webpack.config.js):

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: path.resolve(__dirname, 'src/index'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
        {
            test: /\.js$/,
            include: path.resolve(__dirname, 'src'),
            use: ['babel-loader']
        },
        {
            test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
            use: [
              {
                loader: 'file-loader',
                options: {
                  name: '[name].[ext]',
                  outputPath: 'fonts/'
                }
              }
            ]
          }
    ]
  },
  devServer: {
    contentBase:  path.resolve(__dirname, 'dist'),
    port: 9000
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html"
    })
  ]
};

So, when I run webpack-dev-server --mode development it compiles but then crashes with the following errors:

C:\Web\pwa-static2>yarn serve
yarn run v1.17.3
$ webpack-dev-server --mode development
i ｢wds｣: Project is running at http://localhost:9000/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from C:\Web\app1\dist
× ｢wdm｣: Hash: 77bf7ce09014ddcd0764
Version: webpack 4.41.5
Time: 3901ms
Built at: 2020-01-27 13:35:42
     Asset      Size  Chunks             Chunk Names
 bundle.js  1.43 MiB    main  [emitted]  main       
index.html  2.75 KiB          [emitted]  
Entrypoint main = bundle.js
[0] multi (webpack)-dev-server/client?http://localhost:9000 ./src/index 40 bytes {main} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/react-dom/index.js] 1.33 KiB {main} [built]
[./node_modules/react/index.js] 190 bytes {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:9000] (webpack)-dev-server/client?http://localhost:9000 4.29 KiB {main} [built]  
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {main} [built]     
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./src/css/style.css] 335 bytes {main} [built] [failed] [1 error]
[./src/index.js] 207 bytes {main} [built]
    + 30 hidden modules

ERROR in ./src/css/style.css 1:0
Module parse failed: Unexpected character '@' (1:0)
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
> @font-face {
|     font-family: pgRoofRunners;
|     src: url("../fonts/pgroofrunners.ttf");
 @ ./src/index.js 3:0-25
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 2.99 KiB {0} [built]
    [./node_modules/lodash/lodash.js] 528 KiB {0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
i ｢wdm｣: Failed to compile.

I guess this is what is crashing the app in **src/css/style.css*:

@font-face {
    font-family: pgRoofRunners;
    src: url("../fonts/pgroofrunners.ttf");
}

How can I solve this?

Narigo Narigo · Accepted Answer · 2020-01-27T16:57:21

It looks like you are importing the CSS somewhere with webpack. In order to understand CSS, webpack needs a loader for that as well. Usually you have something like this in your module.rules:

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

or, if you don't use MiniCssExtractorPlugin:

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

React + Webpack don't resolve file loaders

2 Answers