Module build failed: TypeError: Cannot read property 'context' of undefined - Webpack
10,715
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.
Related videos on Youtube
Author by
Mahdi
Updated on September 15, 2022Comments
-
Mahdi over 1 year
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...)
-
Tarek about 3 yearsthanks @Ragul Parani , the upgrading part did the job.