模块构建失败：TypeError：无法在Object.module.exports中读取未定义的属性“context”

Question

I got this unusual error after webpack installation, Searched whole web tried all solution but nothing works,

//My webpack.config.js file

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;

My babelrc file

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

Index.js file

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 file

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"
}

i didnot include json loader in webpack.config file as i found out that json loader is added in webpack by default and when i check in browser in console i get this error -> ReferenceError: ReactDOM is not defined.

Error that i get in CLI

//Folder Structure

Answer 1

The solution seems to be around removing the autoprefixer-loader, I don't know for sure, but it may no longer be necessary to include it because it is included as part of one of the loaders or is built into newer versions of webpack. Again I'm just speculating here.

The current bang ( ! ) argument separated syntax seems to still work

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

But the webpack documentation seems to prefer the broken out style as below

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',
          },
        ],
      },
    ],
  },