模块构建失败:TypeError:无法读取未定义的属性“上下文” - Webpack

Posted

技术标签:

【中文标题】模块构建失败:TypeError:无法读取未定义的属性“上下文” - Webpack【英文标题】:Module build failed: TypeError: Cannot read property 'context' of undefined - Webpack 【发布时间】:2018-12-12 11:01:42 【问题描述】:

我想建立我的项目

我编写了这段代码来构建我的项目 npm run build 但我得到了这个错误:

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

这是我的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]
;

不知道是什么问题!

我的操作系统是 macOS highSierra 版本 10.13.3 节点 js 版本 10 反应版本 16.2 我正在使用 npm 版本 6.0.1 webpack 版本 4。

我认为 webpack 不知道我的字体文件(如 ttf、otf、eot 等...)

【问题讨论】:

嘿,你能在这里分享 package.json 文件吗?我猜你需要添加一个新插件 【参考方案1】:

此问题是由于 webpack v4 中引入的更改。在Webpack github (Incompatible loaders section) 中检查此问题。您可以使用网站下方建议的解决方法,即在您的 webpack 配置中添加另一个插件,如下所示:

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

或者您可以将file-loader 的版本升级到v1.1.6 以解决此问题。

【讨论】:

感谢@Ragul Parani,升级部分完成了这项工作。

以上是关于模块构建失败:TypeError:无法读取未定义的属性“上下文” - Webpack的主要内容,如果未能解决你的问题,请参考以下文章

模块构建失败:TypeError:无法读取 Object.module.exports 处未定义的属性“上下文”

NuxtJS Apollo 模块 TypeError:无法读取未定义的属性“$apolloHelpers”

错误:捆绑失败:TypeError:无法读取未定义的属性“transformFile”,React Native

angular_1.default.module Uncaught TypeError:无法读取未定义的属性“模块”

为啥这些 Jest 测试失败了? TypeError:无法读取未定义的属性“应用”

ModuleBuildError:模块构建失败:TypeError [ERR_INVALID_ARG_TYPE]:“路径”参数必须是字符串类型。接收类型未定义