模块构建失败：TypeError：无法读取未定义的属性“上下文”-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.