Cannot read property 'tap' of undefined

[charklewis]

I have seen a new error come through that I can't seem to debug or work out what is going.

[webpack-cli] TypeError: Cannot read property 'tap' of undefined
    at WebpackShellPlugin.apply (/code/node_modules/webpack-shell-plugin-next/lib/index.js:419:34)
    at webpack (/code/node_modules/webpack-cli/node_modules/webpack/lib/webpack.js:51:13)
    at WebpackCLI.createCompiler (/code/node_modules/webpack-cli/lib/webpack-cli.js:176:24)
    at WebpackCLI.run (/code/node_modules/webpack-cli/lib/webpack-cli.js:268:25)
    at async runCLI (/code/node_modules/webpack-cli/lib/bootstrap.js:59:9)

I have console logged the compiler.hooks from the WebpackShellPlugin.prototype.apply function and they are listed below.

{
  shouldEmit: SyncBailHook {},
  done: AsyncSeriesHook {},
  additionalPass: AsyncSeriesHook {},
  beforeRun: AsyncSeriesHook {},
  run: AsyncSeriesHook {},
  emit: AsyncSeriesHook {},
  assetEmitted: AsyncSeriesHook {},
  afterEmit: AsyncSeriesHook {},
  thisCompilation: SyncHook {},
  compilation: SyncHook {},
  normalModuleFactory: SyncHook {},
  contextModuleFactory: SyncHook {},
  beforeCompile: AsyncSeriesHook {},
  compile: SyncHook {},
  make: AsyncParallelHook {},
  afterCompile: AsyncSeriesHook {},
  watchRun: AsyncSeriesHook {},
  failed: SyncHook {},
  invalid: SyncHook {},
  watchClose: SyncHook {},
  infrastructureLog: SyncBailHook {},
  environment: SyncHook {},
  afterEnvironment: SyncHook {},
  afterPlugins: SyncHook {},
  afterResolvers: SyncHook {},
  entryOption: SyncBailHook {},
  infrastructurelog: SyncBailHook {}
}

My dev dependancies are very simple:

"devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "eslint": "^7.8.1",
    "eslint-config-prettier": "^6.11.0",
    "prettier": "^2.1.2",
    "webpack": "^5.3.0",
    "webpack-cli": "^4.1.0",
    "webpack-shell-plugin-next": "^2.0.4"
  },

Similar with my web pack config:

/* eslint-env node */

const path = require("path")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const WebpackShellPluginNext = require("webpack-shell-plugin-next")

module.exports = (_, options) => ({
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  devtool: options.mode === "production" ? "source-map" : false,
  plugins: [
    new CleanWebpackPlugin(),
    new WebpackShellPluginNext({
      onAfterDone: {
        scripts: [
          options.mode === "development"
            ? "npm run install_statics"
            : "echo 'install_statics is run as separate command in production'",
        ],
      },
    }),
  ],
})

I have verified that my version is 2.0.8 for webpack-shell-plugin-next and 5.9.0 for webpack.

[jdugas]

I have the same issue. The failure happens in index.js on the line: compiler.hooks.afterDone.tap('webpack-shell-plugin-next', this.afterDone);

I commented the line out and then didn't have any issue. I confirmed that doing this does remove the the 'afterDone' hook as I suspected it would. I am just pointing out that there is something wrong with the setup of the 'afterDone' hook.

I reviewed the documentation again and realized I'm using Webpack 4 so I can't use the most up to date version of webpack-shell-plugin-next. I removed it and then reinstalled it at version 1.*. I no longer see the issue with unmodified code.

[s00d]

Hello. I can't repeat this mistake. Can you try updating the webpack and if that doesn't help, then create a repository with an example?