Webpack 5 extract-text plugin child invoked though not used

Question

I am updating my 10 year old Node website, to bring it in line with the latest software and (especially) address any possible security issues. This means implementing webpage 5, which (among much else) no longer uses the extract-text-webpack-plugin, used in webpack versions 1 to 3. Yet, despite removing all references to "extract-text-webpack-plugin" in the main webpack.js in my project root (and checking there is no reference to it anywhere else in the project, such as all the files invoked in node-modules/webpack) I get this error when I try to run my site:

/Users/pmr906_1/venv/TCangular/tc/node_modules/webpack/lib/webpack.js |tc-clien | - /Users/pmr906_1/venv/TCangular/tc/public/webpack.js |tc-clien | Child extract-text-webpack-plugin: |tc-clien |
|tc-clien | ERROR in ./~/less-loader/stringify.loader.js!./~/bootstrap/less/bootstrap.less |tc-clien | Module build failed: Error: ENOENT: no such file or directory, open '/Users/pmr906_1/venv/TCangular/tc/node_modules/bootstrap/less/bootstrap.less' |tc-clien | @ ./~/css-loader!./~/less-loader!./public/app/app.less

Hence my question: where is the invocation of "Child extract-text-webpack-plugin" coming from? There is no reference to "extract-text-webpack-plugin" in either of the two files here specified.

Help!

Here is the core code of my application, as of now:

package.json:

{
  "name": "tc",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "pm2 startOrReload pm2.json",
    "prod": "pm2 startOrReload pm2.json --env production",
    "logs": "pm2 logs",
    "test": "node --use_strict $(npm bin)/jasmine"
  },
  "dependencies": {
    "angular2": "2.0.0-beta.15",
    "async": "^3.2.6",
    "base64url": "^3.0.1",
    "bcrypt": "^5.1.1",
    "body-parser": "^1.20.2",
    "bootstrap": "^5.3.3",
    "bson": "^6.8.0",
    "codemirror": "^6.0.1"
  },
  "devDependencies": {
    "css-loader": "^7.1.2",
    "less": "^4.2.0",
    "less-loader": "^12.2.0",
    "mini-css-extract-plugin": "^2.9.1",
    "webpack": "^5.94.0"
  }
}

And the webpackconfig.js (including many references to plugins etc not yet added to the project, but that should not result in the error seen):

var _ = require('lodash')
  , webpack = require('webpack')
  , ResolverPlugin = webpack.ResolverPlugin
  , ProvidePlugin = webpack.ProvidePlugin
  , IgnorePlugin = webpack.IgnorePlugin
//  , ExtractTextPlugin = require("extract-text-webpack-plugin")
  , path = require('path')
  , clientRoot = path.resolve(__dirname)
  , bowerRoot = path.resolve(clientRoot, '..', 'bower_components')
  , nodeRoot = path.resolve(clientRoot, '..', 'node_modules')
  , devtool = 'eval-source-map'
  , debug = true
;

switch (process.env.NODE_ENV) {
  case 'production':
    devtool = '#source-map';
    debug = false;
    break;
  case 'development':
    devtool = 'eval-source-map';
    debug = true;
    break;
}

var config = {
  context: clientRoot,
  entry: {
    app: path.join(clientRoot, 'app/boot.js'),
    t: path.join(clientRoot, 'app/t.js'),
  },
  output: {
    path: path.join(clientRoot, 'dist'),
    filename: '[name].bundle.js',
    devtoolModuleFilenameTemplate(info) {
     return `file:///${info.absoluteResourcePath.replace(/\\/g, '/')}`;
   },
  },
  externals: {
    jquery: 'jQuery',
    rxjs: 'Rx',
    lodash: '_',
    bson: 'bson',
    'codemirror/lib/codemirror': 'CodeMirror',
    'codemirror/mode/xml/xml': false,
  },
  module: {
    loaders: [
      {
        test: /\.png(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=1000&minetype=image/jpg&prefix=dist/"
      }, {
        test: /\.jpg(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=1000&minetype=image/jpg&prefix=dist/"
      }, {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=1000&minetype=application/font-woff&prefix=dist/"
      }, {
        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=1000&minetype=application/font-woff&prefix=dist/"
      }, {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=1000&minetype=application/octet-stream&prefix=dist/"
      }, {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=1000&minetype=application/vnd.ms-fontobject&prefix=dist/"
      }, {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=1000&minetype=image/svg+xml&prefix=dist/"
      },
      {
        test: /\.css$/, 
//        loader: ExtractTextPlugin.extract("style-loader", "css-loader"),
        //loader: 'style!css'
      },
      {
        test: /\.less$/,
        //loader: 'style!css!less?sourceMap'
 //       loader: ExtractTextPlugin.extract(
 //         "style-loader", "css-loader!less-loader"),
      },
    ],
    noParse: [
    ]
  },
  resolve: {
    root: [clientRoot],
    modulesDirectories: ['web_modules', 'node_modules', 'bower_components', ],
    alias: {
      bower: bowerRoot,
      node: nodeRoot,
    },
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
      },
    }),
    new ResolverPlugin(new ResolverPlugin.DirectoryDescriptionFilePlugin(
      'bower.json', ['main']
    )), 
    // prevent webpack accident include server security information
    new IgnorePlugin(new RegExp('config\/production.*')),
//    new ExtractTextPlugin("app.css"),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor', filename: 'vendor.bundle.js',
      chunks: ['app'],
      minChunks: function(module, count) {
        return module.resource && module.resource.indexOf(clientRoot) === -1;
      }
    }),

  ],
  debug: debug,
  devtool: devtool,
};

var compiler = webpack(config);

if (process.env.NODE_ENV === 'development') {
  compiler.watch({
    aggregateTimeout: 300,
    poll: 1000,
  }, handleError);
} else {
 compiler.watch({
    aggregateTimeout: 300,
    poll: 1000,
  }, handleError);
  //compiler.run(handleError);
}

function handleError(err, stats) {
  console.log(stats.toString({
    colors: true,
    cached: false,
  }));
}

Answer 1

Apologies all! Out of desperation, I restarted the computer and the problem went away. Seems that npm had somehow cached an older version of webpack and hence generated the error. Oh well.