Error: Plugin could not be registered at 'html-webpack-plugin-before-html-generation'. Hook was not found.

[caiodesign]

Bug

i'm using react-storybook v4.0.0-alpha.22 and everytime I try to build or start storybook, i get this error:

sudo npm run storybook

> [email protected] storybook /Users/colive61/Workspace/test/web-portal-frontend
> set NODE_ENV=dev && start-storybook -p 6006

info @storybook/react v4.0.0-alpha.22
info 
info => Loading presets
info => Loading custom webpack config (extending mode).
  0% compiling(node:48999) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:48999) UnhandledPromiseRejectionWarning: Error: Plugin could not be registered at 'html-webpack-plugin-before-html-generation'. Hook was not found.
BREAKING CHANGE: There need to exist a hook at 'this.hooks'. To create a compatibility layer for this hook, hook into 'this._pluginCompat'.
    at Compilation.plugin (/Users/colive61/Workspace/test/web-portal-frontend/node_modules/tapable/lib/Tapable.js:69:9)
    at Compilation.deprecated [as plugin] (internal/util.js:70:15)
    at compiler.plugin (/Users/colive61/Workspace/test/web-portal-frontend/node_modules/google-fonts-webpack-plugin/src/index.js:108:16)
    at AsyncParallelHook.eval [as callAsync] (eval at create (/Users/colive61/Workspace/test/web-portal-frontend/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:13:1)
    at AsyncParallelHook.lazyCompileHook (/Users/colive61/Workspace/test/web-portal-frontend/node_modules/tapable/lib/Hook.js:154:20)
    at hooks.beforeCompile.callAsync.err (/Users/colive61/Workspace/test/web-portal-frontend/node_modules/webpack/lib/Compiler.js:536:20)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/colive61/Workspace/test/web-portal-frontend/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/colive61/Workspace/test/web-portal-frontend/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.compile (/Users/colive61/Workspace/test/web-portal-frontend/node_modules/webpack/lib/Compiler.js:529:28)
    at compiler.hooks.watchRun.callAsync.err (/Users/colive61/Workspace/test/web-portal-frontend/node_modules/webpack/lib/Watching.js:77:18)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/colive61/Workspace/test/web-portal-frontend/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:24:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/colive61/Workspace/test/web-portal-frontend/node_modules/tapable/lib/Hook.js:154:20)
    at Watching._go (/Users/colive61/Workspace/test/web-portal-frontend/node_modules/webpack/lib/Watching.js:40:32)
    at Watching.compiler.readRecords.err (/Users/colive61/Workspace/test/web-portal-frontend/node_modules/webpack/lib/Watching.js:32:9)
    at Compiler.readRecords (/Users/colive61/Workspace/test/web-portal-frontend/node_modules/webpack/lib/Compiler.js:396:11)
    at new Watching (/Users/colive61/Workspace/test/web-portal-frontend/node_modules/webpack/lib/Watching.js:29:17)
(node:48999) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:48999) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Dependencies:

• "@storybook/addon-actions": "^3.4.5",
• "@storybook/addon-links": "^3.4.5",
• "@storybook/addons": "^3.4.5",
• "@storybook/cli": "^4.0.0-alpha.7",
• "@storybook/react": "^4.0.0-alpha.7",
• "webpack": "^4.8.1",
• "webpack-bundle-analyzer": "^2.13.1",
• "webpack-cli": "^3.1.1",
• "webpack-dev-server": "^3.1.3",
• "webpack-livereload-plugin": "^2.1.1",
• "webpack-spritesmith": "^0.4.1"

Affected platforms

• macOS / Ubuntu

Webpack.config

// you can use this file to add your custom webpack plugins, loaders and anything you like.
// This is just the basic way to add additional webpack configurations.
// For more information refer the docs: https://storybook.js.org/configurations/custom-webpack-config

// IMPORTANT
// When you add this file, we won't add the default configurations which is similar
// to "React Create App". This only has babel loader to load JavaScript.
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const SpritesmithPlugin = require('webpack-spritesmith');
const webpack = require('webpack');
const path = require('path');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const GoogleFontsPlugin = require('google-fonts-webpack-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');

module.exports = {
  node: {
    fs: 'empty'
  },
  optimization: {
    // runtimeChunk: 'single',
    runtimeChunk: false,
    splitChunks: false
  },
  resolve: {
    // modules: [path.join(__dirname, '../node_modules'),],
    alias: {
      'nextel-ui': path.resolve(__dirname, '../src/js/nextel-ui.js')
    }
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['react', 'stage-0', 'es2015'],
          env: {
            "development": {
              "presets": ["react-hmre"]
            }
          },
          plugins: [
            'transform-class-properties',
            'syntax-class-properties',
            'babel-plugin-dynamic-import-node',
            // Generates an `index.html` file with the <script> injected.
            new HtmlWebpackPlugin({
              inject: true,
              template: path.resolve('public/index.html'),
            }),
            // Makes the public URL available as %PUBLIC_URL% in index.html, e.g.:
            // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
            new InterpolateHtmlPlugin(HtmlWebpackPlugin, {
              PUBLIC_URL: publicUrl,
              // You can pass any key-value pairs, this was just an example.
              // WHATEVER: 42 will replace %WHATEVER% with 42 in index.html.
            }),
            // ...
          ]
        }
      },
      {
        test: /\.(scss|sass|css)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
              data: '$env: ' + process.env.NODE_ENV + ';'
            }
          },
          {
            loader: 'sass-resources-loader',
            options: {
              // Provide path to the file with resources
              resources: [
                path.join(__dirname, '../src/scss/config/_config.dev.scss')
              ]
            }
          }
        ]
      },
      {
        test: /\.(eot|svg|otf|ttf|woff|woff2)$/,
        use: 'file-loader'
      },
      {
        test: /\.(jpg|png|gif)$/,
        use: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
              query: {
                gifsicle: {
                  interlaced: true
                },
                mozjpeg: {
                  progressive: true
                },
                optipng: {
                  optimizationLevel: 7
                },
                pngquant: {
                  quality: '65-90',
                  speed: 4
                }
              }
            }
          }
        ]
      }
    ]
  },
  plugins: [
    // // new MiniCssExtractPlugin({
    // //     // Options similar to the same options in webpackOptions.output
    // //     // both options are optional
    // //     filename: '[name].css',
    // //     chunkFilename: '[id].css'
    // // // }),
    new GoogleFontsPlugin({
      fonts: [
        { family: 'Source Sans Pro' },
        {
          family: 'Roboto',
          variants: ['300', '400', '500', '700', '700italic']
        }
      ]
      /* ...options */
    })
    // new webpack.HotModuleReplacementPlugin(),
    // new webpack.NamedModulesPlugin(),
    // new webpack.DefinePlugin({
    //   PRODUCTION: JSON.stringify(false)
    // })
  ]
};

Any ideas?
thx!

[caiodesign]

package updated to:

• "@storybook/cli": "^4.0.0-alpha.23",
• "@storybook/react": "^4.0.0-alpha.23",

[ndelangen]

So it appears the GoogleFontsPlugin assumes the html-webpack-plugin is used:

https://github.com/gabiseabra/google-fonts-webpack-plugin/blob/master/src/index.js#L108

I guess I'm going to need to implement the 'html-webpack-plugin-before-html-generation' hook into our plugin generating pages for us 😞

[ndelangen]

For now you could remove the Plugin and add the fonts via preview-head.html regular old <link> tags?

[caiodesign]

@ndelangen I removed GoogleFontsPlugin and now I can build my storybook.
I'll add the fonts via <link> tag.
thank you so much mate!