npm build failing on Class extends value undefined is not a constructor or null

Question

I have reviewed other answers to similar questions but I am not familiar enough with npm to translate them to what I am seeing. I am trying to build a project and I get the error :

     ERROR  TypeError: Class extends value undefined is not a constructor or null
TypeError: Class extends value undefined is not a constructor or null
    at Object.<anonymous> (D:\Development\Website\prosystem88\node_modules\mini-css-extract-plugin\dist\CssDependency.js:12:46)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (D:\Development\Website\prosystem88\node_modules\mini-css-extract-plugin\dist\index.js:12:45)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)

....there is more to this but I think this is the only relevant part, let me know if it isnt

The index.js area :

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _webpack = _interopRequireDefault(require("webpack"));

var _webpackSources = _interopRequireDefault(require("webpack-sources"));

var _CssDependency = _interopRequireDefault(require("./CssDependency"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

The CssDependency.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _webpack = _interopRequireDefault(require("webpack"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

class CssDependency extends _webpack.default.Dependency {
  constructor({
    identifier,
    content,
    media,
    sourceMap
  }, context, identifierIndex) {
    super();
    this.identifier = identifier;
    this.identifierIndex = identifierIndex;
    this.content = content;
    this.media = media;
    this.sourceMap = sourceMap;
    this.context = context;
  }

  getResourceIdentifier() {
    return `css-module-${this.identifier}-${this.identifierIndex}`;
  }

}

exports.default = CssDependency;

I keep getting information that this may be a circular dependency, but I do not understand how that is in this case. Any pointers would be helpful.

I have tried multiple, different little things but I'm so far at sea with this build process and npm that I am concerned I'm going to screw the whole project.

Answer 1

In this case the issue was that mini-css-extract-plugin requires webpack >= 4.1.0

Source