Module build failed: TypeError: Cannot read property 'context' of undefined at Object.module.exports

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

There are a bunch of issues [like that](https://github.com/webpack-contrib/worker-loader/issues/125) conflicts with webpack 4. I created [PR](https://github.com/passy/autoprefixer-loader/pull/40) but I'm not sure how long does it take to merge it and release. — zishe, Apr 20 '18 at 02:45

score -1 · Answer 1 · answered May 02 '18 at 22:41

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

Module build failed: TypeError: Cannot read property 'context' of undefined at Object.module.exports

1 Answers1