search

numical / script-ext-html-webpack-plugin

Enhances html-webpack-plugin functionality with different deployment options for your scripts including 'async', 'preload', 'prefetch', 'defer', 'module', custom attributes, and inlining.
MIT License
588 stars 105 forks source link

Plugin could not be registered at 'html-webpack-plugin-alter-asset-tags'. Hook was not found. #40

Closed hacenator closed 6 years ago

hacenator commented 6 years ago

script-ext-html-webpack-plugin 1.8.8 with webpack 4.0.1

Error: Plugin could not be registered at 'html-webpack-plugin-alter-asset-tags'. Hook was not found. BREAKING CHANGE: There need to exist a hook at 'this.hooks'. To create a compatiblity layer for this hook, hook into 'this._pluginCompat'. at Compilation.plugin (/home/rost/work/pokebase/server/webclient/node_modules/webpack/node_modules/tapable/lib/Tapable.js:63:9) at Compilation.deprecated [as plugin] (internal/util.js:53:15) at compiler.plugin (/home/rost/work/pokebase/server/webclient/node_modules/script-ext-html-webpack-plugin/lib/plugin.js:37:19)

midudev commented 6 years ago

The plugin is still not prepared to be used with Webpack 4.

sherlock1982 commented 6 years ago

Html-webpack-plugin 3.0.4 works. Though please note https://github.com/numical/script-ext-html-webpack-plugin/issues/41

numical commented 6 years ago

Webpack 4 supported in v2.0.0 of this plugin thanks to this PR. Note this requires html-webpack-plugin v.3.0.6

CPatchane commented 6 years ago

Hi here :), I updated these packages but I still have this error even that :/ I use the v2.0.0 with html-webpack-plugin v3.0.6 in my work here

Here is the stack trace:

Plugin could not be registered at 'html-webpack-plugin-alter-asset-tags'. Hook was not found.
    BREAKING CHANGE: There need to exist a hook at 'this.hooks'. To create a compatiblity layer for this hook, hook into 'this._pluginCompat'.
          at Compilation.plugin (node_modules/cozy-scripts/node_modules/tapable/lib/Tapable.js:63:9)
          at compiler.plugin (node_modules/cozy-scripts/node_modules/script-ext-html-webpack-plugin/lib/plugin.js:38:19)
          at SyncHook.eval (eval at create (node_modules/cozy-scripts/node_modules/tapable/lib/HookCodeFactory.js:17:12), <anonymous>:7:1)
          at SyncHook.lazyCompileHook [as _call] (node_modules/cozy-scripts/node_modules/tapable/lib/Hook.js:35:21)
          at Compiler.newCompilation (node_modules/cozy-scripts/node_modules/webpack/lib/Compiler.js:418:26)
          at hooks.beforeCompile.callAsync.err (node_modules/cozy-scripts/node_modules/webpack/lib/Compiler.js:457:29)
          at AsyncSeriesHook.eval [as callAsync] (eval at create (node_modules/cozy-scripts/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
          at AsyncSeriesHook.lazyCompileHook [as _callAsync] (node_modules/cozy-scripts/node_modules/tapable/lib/Hook.js:35:21)
          at Compiler.compile (node_modules/cozy-scripts/node_modules/webpack/lib/Compiler.js:452:28)
          at readRecords.err (node_modules/cozy-scripts/node_modules/webpack/lib/Compiler.js:200:11)
          at Compiler.readRecords (node_modules/cozy-scripts/node_modules/webpack/lib/Compiler.js:322:11)
          at hooks.run.callAsync.err (node_modules/cozy-scripts/node_modules/webpack/lib/Compiler.js:197:10)
          at AsyncSeriesHook.eval [as callAsync] (eval at create (node_modules/cozy-scripts/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
          at AsyncSeriesHook.lazyCompileHook [as _callAsync] (node_modules/cozy-scripts/node_modules/tapable/lib/Hook.js:35:21)
          at hooks.beforeRun.callAsync.err (node_modules/cozy-scripts/node_modules/webpack/lib/Compiler.js:194:19)
          at AsyncSeriesHook.eval [as callAsync] (eval at create (node_modules/cozy-scripts/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:15:1)
          at AsyncSeriesHook.lazyCompileHook [as _callAsync] (node_modules/cozy-scripts/node_modules/tapable/lib/Hook.js:35:21)
          at Compiler.run (node_modules/cozy-scripts/node_modules/webpack/lib/Compiler.js:191:24)
          at runWithDependencies (node_modules/cozy-scripts/node_modules/webpack/lib/MultiCompiler.js:239:15)
          at asyncLib.map (node_modules/cozy-scripts/node_modules/webpack/lib/MultiCompiler.js:175:6)
          at arrayEachIndex (node_modules/cozy-scripts/node_modules/neo-async/async.js:2494:9)
          at Object.map (node_modules/cozy-scripts/node_modules/neo-async/async.js:2845:9)
          at runCompilers (node_modules/cozy-scripts/node_modules/webpack/lib/MultiCompiler.js:172:13)
          at MultiCompiler.runWithDependencies (node_modules/cozy-scripts/node_modules/webpack/lib/MultiCompiler.js:184:3)
          at MultiCompiler.run (node_modules/cozy-scripts/node_modules/webpack/lib/MultiCompiler.js:235:9)

Hope that can help!

numical commented 6 years ago

Hi, I cannot repeat this:

  1. I cloned https://github.com/CPatchane/create-cozy-app/tree/renovate/webpack-4.x;
  2. yarn install
  3. yarn test

All ran OK.

Can you describe how you hit the issue above. Also please try with a clean install - I suspect one of the plugin versions was not updated correctly.

CPatchane commented 6 years ago

Hi @numical thanks for considering my issue,

  1. I cloned the repository https://github.com/CPatchane/create-cozy-app in a new test folder, git fetch and git checkout the renovate/webpack-4.x branch
  2. yarn (equivalent to yarn install)
  3. Do yarn test:cozy-scripts:vue (one of the tests suite that uses webpack, which is included in yarn test in any cases)

I also use yarn v1.3.2 on node v8.9.4 (on Travis it runs on node 6).

And my tests still failed with the above error. Also, I removed the Travis CI cache for my project and run the build again here, but it still has the issue too :/

I tried to know if my lock files was locking to an older version of the package, but I only get this:

$ find . -iname yarn.lock -print | xargs grep script-ext-html-webpack-plugin
./packages/cozy-scripts/yarn.lock:script-ext-html-webpack-plugin@2.0.0:
./packages/cozy-scripts/yarn.lock:  resolved "https://registry.yarnpkg.com/script-ext-html-webpack-plugin/-/script-ext-html-webpack-plugin-2.0.0.tgz#ca739efee7a6619e21cd3d68326aff62dadc51b2"

I don't know if that can help, but I use an array of configurations for multi-compiling with webpack in the build script.

Let me know if I can help you more to fix that issue and thanks again :)

numical commented 6 years ago

OK. Tried again and observed the issue. I think I must have missed the checkout of the webpack4 branch. The problem seems a pretty gross one - the new plugin mechanism now is based on properties of the 'hooks' property. But that begs the question as to how my webpack4 tests (and others' reported success) are working. Hmm... Pretty busy week coming up at work so dunno if I will get this fixed before next weekend - sorry. Will keep you updated on any progress...

numical commented 6 years ago

@CPatchane - I have made some progress - try out v2.0.1 - it gets further through your unit tests but still does not complete them. This is deeply unsatisfying as I cannot reproduce your problem in my unit tests, so I am working in the dark. However I'll keep at it when I can...

CPatchane commented 6 years ago

Cool! It seems that there is no htmlWebpackPluginAlterAssetTags in the compilation.hooks in your compilationCallback, but I can't say more :/ Maybe that article can help you https://medium.com/webpack/webpack-4-migration-guide-for-plugins-loaders-20a79b927202

numical commented 6 years ago

OK - I have an idea: In packages/cozy-scripts/config you have a series of config files that are combined to create a webpack config. ScriptExtHtmlWebpackPlugin is defined in webpack.config.base.js but it depends on HtmlWebpackPlugin which is only defined in other config files.
Is it possible that a webpack config is being built with ScriptExt but without HtmlWebpackPlugin? This certainly fits the displayed bug where ScriptExt is assuming the existence of compilation.hooks.htmlWebpackPluginAlterAssetTags that will only be created if HtmlWebpackPlugin is included.

CPatchane commented 6 years ago

Good point! In any case we use the HtmlWebpackPlugin, but it may appear in a different order in the webpack plugins array definition. Maybe, since ScriptExt is defined before HtmlWebpack in the plugins list, webpack try to load it before the required HtmlWebpack? It could make more sense to put them together. I'll do some tests and let you know :) By the way, it was working great until here, is it also explicable?

CPatchane commented 6 years ago

We progress but there is a new error message now :/. You can see the Travis build log here

Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

      at Chunk.get (.tmp_test/test-app-vue/node_modules/cozy-scripts/node_modules/webpack/lib/Chunk.js:460:9)
      at .tmp_test/test-app-vue/node_modules/cozy-scripts/node_modules/extract-text-webpack-plugin/dist/index.js:176:47
      at Array.forEach (native)
      at .tmp_test/test-app-vue/node_modules/cozy-scripts/node_modules/extract-text-webpack-plugin/dist/index.js:171:18
      at AsyncSeriesHook.eval [as callAsync] (eval at create (.tmp_test/test-app-vue/node_modules/cozy-scripts/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:12:1)
      at AsyncSeriesHook.lazyCompileHook [as _callAsync] (.tmp_test/test-app-vue/node_modules/cozy-scripts/node_modules/tapable/lib/Hook.js:35:21)
      at Compilation.seal (.tmp_test/test-app-vue/node_modules/cozy-scripts/node_modules/webpack/lib/Compilation.js:881:27)
      at hooks.make.callAsync.err (.tmp_test/test-app-vue/node_modules/cozy-scripts/node_modules/webpack/lib/Compiler.js:464:17)
      at _done (eval at create (.tmp_test/test-app-vue/node_modules/cozy-scripts/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:9:1)
      at _err1 (eval at create (.tmp_test/test-app-vue/node_modules/cozy-scripts/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:32:22)
      at _addModuleChain (.tmp_test/test-app-vue/node_modules/cozy-scripts/node_modules/webpack/lib/Compilation.js:749:12)
      at processModuleDependencies.err (.tmp_test/test-app-vue/node_modules/cozy-scripts/node_modules/webpack/lib/Compilation.js:688:9)
numical commented 6 years ago

Yup - HtmlWebpackPlgin must be before StyleExt... in the plugins list. So that (probably) explains that issue. As for the extract-text-webpack-plugin issue, I see there are 4.0.0.beta-X releases - I suggest you try one of those.

CPatchane commented 6 years ago

Great so! I guess something internally changed in webpack 4 and the plugin list order is more important now, it should explain why my configuration worked until now using webpack 3. Thanks a lot for your time @numical and for resolving this issue for my usage 👍

numical commented 6 years ago

:-)

CPatchane commented 6 years ago

Maybe a better error message or a note in documentation about that plugins order could be useful for later/others?

numical commented 6 years ago

@CPatchane - already there: https://github.com/numical/script-ext-html-webpack-plugin#basic-usage ;-)