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

Posted 2023-02-22

【中文标题】模块构建失败：TypeError：无法读取 Object.module.exports 处未定义的属性“上下文”

【英文标题】：Module build failed: TypeError: Cannot read property 'context' of undefined at Object.module.exports

【发布时间】：2018-09-10 00:39:12

【问题描述】：

我在安装 webpack 后遇到了这个异常错误，搜索了整个 web 尝试了所有解决方案，但没有任何效果，

//我的 webpack.config.js 文件

const webpack = require("webpack");
const path = require("path");
const config = 
    entry : path.resolve(__dirname,"src/index.js"),
    output : 
        path : path.resolve(__dirname,"dist/assets"),
        filename : "bundle.js",
        publicPath : "assets"
    ,
    devServer : 
        inline : true,
        contentBase : path.resolve(__dirname,"dist"),
        port : 3000
    ,
    module : 
        rules : [
            
                test : /\.js$/,
                exclude : path.resolve(__dirname,"node_modules"),
                loader : "babel-loader",
                query: 
                    presets: ["env","latest","react","stage-0","es2015"]
                
            ,
            
                test : /\.css$/,
                loader: 'style-loader!css-loader!autoprefixer-loader'
            ,
            
                test : /\.scss$/,
                loader: 'style-loader!css-loader!autoprefixer-loader!sass-loader'
            
        ]
    
;
module.exports = config;

我的 babelrc 文件

  "presets" : ["env","latest","react","stage-0","es2015"]

Index.js 文件

import React from 'react'
import ReactDOM from 'react-dom'
import  hello, goodbye  from './lib'

ReactDOM.render(
    <div>
        hello
        goodbye
    </div>,
    document.getElementById('root')
);

lib.js 文件

import React from 'react'
import  text from './titles.json'
import './stylesheets/hello.css'
import './stylesheets/goodbye.scss'

export const hello = (
    <h1 id="title"
        className="hello">
        text.hello
    </h1>
);
export const goodbye = (
    <h2 id="goodbye"
        className="goodbye">
        text.bye
    </h2>
);

titles.json

  "hello" : "Bonjour",
  "bye" : "Au Revoir"

我没有在 webpack.config 文件中包含 json 加载器，因为我发现 webpack 中默认添加了 json 加载器，当我在控制台中检查浏览器时出现此错误 -> ReferenceError: ReactDOM is not defined.

我在 CLI 中遇到的错误

//文件夹结构

【问题讨论】：

有一堆问题like that与webpack 4冲突。我创建了PR，但我不确定合并和发布需要多长时间。

【参考方案1】：

解决方案似乎是围绕删除 autoprefixer-loader，我不确定，但可能不再需要包含它，因为它是作为加载器之一的一部分包含或内置在较新版本中的的 webpack。再次，我只是在这里推测。

当前的 bang (!) 参数分隔语法似乎仍然有效

  test: /\.scss$/,
  loader: 'style-loader!css-loader!sass-loader',

但是 webpack 文档似乎更喜欢下面的分解样式

webpack sass-loader

module: 
    rules: [
      
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: 
          presets: ['env', 'react'],
        ,
      ,
      
        test: /\.css$/,
        use: [
          
            loader: 'style-loader',
          ,
          
            loader: 'css-loader',
          ,
        ],
      ,
      
        test: /\.scss$/,
        use: [
          
            loader: 'style-loader',
          ,
          
            loader: 'css-loader',
          ,
          
            loader: 'sass-loader',
          ,
        ],
      ,
    ],
  ,