TypeError: Cannot read property 'tap' of undefined

[jerryOnlyZRJ]

It seems that can't work with webpack customed hooks such as html-webpack-plugin-before-html-processing in html-webpack-plugin, when we tap these events, the error occurred.

compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing.tap(... 
                                                        ^
TypeError: Cannot read property 'tap' of undefined

[liuzhiyang0113]

i have the same problem

[stephencookdev]

Cheers for raising :slightly_smiling_face:

I'm struggling to repro this a bit. I gather it's from plugins that work with the html-webpack-plugin, rather than that plugin working by itself

I've pushed a branch repro/html-webpack-plugin that includes a webpack config using html-webpack-plugin. You can see at the moment on that branch if you run npm run prepare ; npm run test ; npm run cleanup from within the directory __tests__/setups/v4-html-webpack-plugin that the tests all pass.

Could you modify that branch to reproduce the issue you're talking about?

[kazusa0106]

same proplem 1.create the project by vue/cli 2.add the webpack config file:

3.webpack --config webpack.test.config.js --mode production

result:

vue/[email protected] [email protected]

[jerryOnlyZRJ]

Cheers for raising 🙂

I'm struggling to repro this a bit. I gather it's from plugins that work with the html-webpack-plugin, rather than that plugin working by itself

I've pushed a branch repro/html-webpack-plugin that includes a webpack config using html-webpack-plugin. You can see at the moment on that branch if you run npm run prepare ; npm run test ; npm run cleanup from within the directory __tests__/setups/v4-html-webpack-plugin that the tests all pass.

Could you modify that branch to reproduce the issue you're talking about?

Sure.There is my PR: https://github.com/stephencookdev/speed-measure-webpack-plugin/pull/69

[kkkman22]

i have the same problem

"speed-measure-webpack-plugin": "^1.3.0", "webpack": "4.29.3", "webpack-bundle-analyzer": "3.0.3", "webpack-cli": "3.2.1", "webpack-dev-server": "3.1.14", "webpack-merge": "4.2.1"

[Shubham-Sharma-23]

Facing the same issue, anyone any luck?

[huixisheng]

I have the some problem. create by vue/cli.

vue.config.js

module.exports = {
  chainWebpack: (config) => {
     smp.wrap(config);
  }
}

  /node_modules/@vue/preload-webpack-plugin/src/index.js:114
        compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing.tap(
                                                                ^

TypeError: Cannot read property 'tap' of undefined
    at Proxy.compiler.hooks.compilation.tap.compilation (/node_modules/@vue/preload-webpack-plugin/src/index.js:114:65)
    at args (/node_modules/speed-measure-webpack-plugin/WrappedPlugin/index.js:52:19)
    at SyncHook.eval [as call] (eval at create (/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:17:1)
    at SyncHook.lazyCompileHook (/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.newCompilation (/node_modules/webpack/lib/Compiler.js:507:26)
    at hooks.beforeCompile.callAsync.err (/node_modules/webpack/lib/Compiler.js:543:29)
    at _err1 (eval at create (/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:16:1)
    at func.apply.argsButLast.map.concat.callbackArgs (/node_modules/speed-measure-webpack-plugin/WrappedPlugin/index.js:44:9)
    at Array.compiler.inputFileSystem.readFile (/node_modules/webpack/lib/DllReferencePlugin.js:72:15)
    at Storage.finished (/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:16)
    at provider (/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:79:9)
    at /node_modules/graceful-fs/graceful-fs.js:90:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:53:3)

[fizal619]

I also have the same issue. Will be watching this thread :)

Proxy.compilerHooks.afterPlugins.tap (...node_modules/hard-source-webpack-plugin/lib/ExcludeModulePlugin.js:40:50)

[givingwu]

anyone fixed this problem here? solution and why?

[jerryOnlyZRJ]

anyone fixed this problem here? solution and why?

Nobody. Because this plugin use the ES6 Proxy to watch all of the compile & compilation's hooks, but when we tap a customed hook, it'll not be proxy.

[geekox86]

@jerryOnlyZRJ is there a better approach like proxying the Webpack hooks object for any additions?

[tstackhouse]

I've been doing some testing and I found that in the wrapHooks function in WrappedPlugin, if we change this:

  const wrapped = Object.keys(hooks).reduce((acc, method) => {
    acc[method] = genProxy(method);
    return acc;
  }, {});

to this:

    acc[method] = genProxy(method);
    return acc;
  }, orig.hooks);

The test cases in #69 pass, however it does result in a few errors from SMP, like so:

  console.error ../../../index.js:105                                                                                                                                                                                                                             Could not find a matching event to end plugins CustomPlugin/Compiler/done { id: 705 }

But that definitely represents a step in the right direction. It means we might be able to set us a custom proxy object that can handle custom hooks.

[vpiskunov]

Any luck with this? Using Vue + Nativescript project, it runs fine when building for ios/native, but fails with the above error on web-build, presuming as html plugin is not used in native builds, but fails as above on web.

[stephencookdev]

very interesting @tstackhouse - cheers for poking around a bit!

Errors like that mean that SMP has seen an "end" event for something, without a corresponding "start" event... Not sure why your change would trigger that :thinking: It's possible those console errors are unrelated, since there is an existing outstanding issue to look at occasional logs of ends but no starts

[ryu-wish]

Is there any solution?

[ankitseepossible]

I am also facing the same issue while implementing critical css with magento pwa studio.

compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing.tap(
                    this.name,
                    ({ plugin: { options } }) => {
                        options.minify = options.minify || {};
                        options.minify.minifyCSS = true;
                    }
                );

in above code I am getting TypeError: Cannot read property 'tap' of undefined any solution ?