Module build failed: TypeError: Cannot read property 'context' of undefined - Webpack

Question

I want to build my project

I wrote this code to build my project npm run build but i got this errors:

ERROR in ./src/public/webfonts/fa-solid-900.svg
Module build failed: TypeError: Cannot read property 'context' of undefined
    at Object.loader (/Users/mohammadmehdi/Documents/Work/sevenapp/node_modules/file-loader/dist/index.js:34:49)
 @ ./node_modules/css-loader??ref--5-1!./src/public/css/fontawesome-all.css 7:72144-72185
 @ ./src/public/css/fontawesome-all.css
 @ ./src/index.js

ERROR in ./src/public/webfonts/fa-brands-400.svg
Module build failed: TypeError: Cannot read property 'context' of undefined
    at Object.loader (/Users/mohammadmehdi/Documents/Work/sevenapp/node_modules/file-loader/dist/index.js:34:49)
 @ ./node_modules/css-loader??ref--5-1!./src/public/css/fontawesome-all.css 7:70780-70822
 @ ./src/public/css/fontawesome-all.css
 @ ./src/index.js

this is my webpack.config.js:

const HtmlWebPackPlugin = require("html-webpack-plugin");

const htmlWebpackPlugin = new HtmlWebPackPlugin({
    template: "./public/index.html",
    filename: "./index.html"
});

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
            },
            {
                //test: /\.css$/,
                test:/\.(s*)css$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader",
                        options: {
                            modules: true,
                            importLoaders: 1,
                            localIdentName: "[name]_[local]_[hash:base64]",
                            sourceMap: true,
                            minimize: true
                        }
                    }
                ]
            },
            {
                test: /.(ttf|otf|eot|png|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit : 8192
                        }
                    }
                ]
            },
            {
                test: /.(ttf|otf|eot|png|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: 'fonts/',
                            name: '[name][hash].[ext]'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [htmlWebpackPlugin]
};

I don't know what the problem is!

My OS is macOS highSierra version 10.13.3
node js version 10
react version 16.2
I'm using npm version 6.0.1
webpack version 4.

I think webpack does't know my font files (like ttf, otf, eot, etc...)

Answer 1

This issue is because of a change introduced in webpack v4. Check this issue in Webpack github (Incompatible loaders section). You can either go with the workaround that is suggested just below in the site which is to add another plugin as follows to your webpack config:

new LoaderOptionsPlugin({
  options: {
    context: process.cwd() // or the same value as `context`
  }
})

Or you can upgrade the version of file-loader to v1.1.6 in which this issue is resolved.