InterpolateHtmlPlugin: Cannot read property 'tap' of undefined, react-scripts@next

Is this a bug report?

Yes. When attempting to run react-styleguidist with react-scripts@next an error occurs: TypeError: Cannot read property 'tap' of undefined in the IterpolateHtmlPlugin from react-dev-utils.

Did you try recovering your dependencies?

Yes, all of the above.

Which terms did you search for in User Guide?

Everything in the subject!

Environment

Environment:
  OS:  macOS High Sierra 10.13.6
  Node:  10.9.0
  Yarn:  1.9.4
  npm:  6.2.0
  Watchman:  4.9.0
  Xcode:  Xcode 9.4.1 Build version 9F2000
  Android Studio:  Not Found

Packages: (wanted => installed)
  react: ^16.4.2 => 16.4.2
  react-dom: ^16.4.2 => 16.4.2
  react-scripts: 2.0.0-next.a671462c => 2.0.0-next.a671462c

Steps to Reproduce

1. Init a new CRA@next app: npx create-react-app@next --scripts-version=2.0.0-next.a671462c styleguidist-test
2. Add react-styleguidist as a devDependency:

  "devDependencies": {
    "react-styleguidist": "^7.3.4"
  },

1. Add the following scripts, from the styleguidist documentation:

    "styleguide": "styleguidist server",
    "styleguide:build": "styleguidist build"

1. Install the new dependency
2. Try to run yarn run styleguide

Expected Behavior

react-styleguidist should start, per their documentation.

Actual Behavior

The error above occurs.

❯ yarn run styleguide
yarn run v1.9.4
$ styleguidist server
Loading webpack config from:
/Users/nloding/code/oss/styleguidist-test/node_modules/react-scripts/config/webpack.config.dev.js

TypeError: Cannot read property 'tap' of undefined
TypeError: Cannot read property 'tap' of undefined
    at compiler.hooks.compilation.tap.compilation (/Users/nloding/code/oss/styleguidist-test/node_modules/react-dev-utils/InterpolateHtmlPlugin.js:26:63)
    at SyncHook.eval [as call] (eval at create (/Users/nloding/code/oss/styleguidist-test/node_modules/tapable/lib/HookCodeFactory.js:17:12), <anonymous>:13:1)
    at SyncHook.lazyCompileHook [as _call] (/Users/nloding/code/oss/styleguidist-test/node_modules/tapable/lib/Hook.js:35:21)
    at Compiler.newCompilation (/Users/nloding/code/oss/styleguidist-test/node_modules/webpack/lib/Compiler.js:438:26)
    at hooks.beforeCompile.callAsync.err (/Users/nloding/code/oss/styleguidist-test/node_modules/webpack/lib/Compiler.js:474:29)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/nloding/code/oss/styleguidist-test/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/nloding/code/oss/styleguidist-test/node_modules/tapable/lib/Hook.js:35:21)
    at Compiler.compile (/Users/nloding/code/oss/styleguidist-test/node_modules/webpack/lib/Compiler.js:469:28)
    at compiler.hooks.watchRun.callAsync.err (/Users/nloding/code/oss/styleguidist-test/node_modules/webpack/lib/Watching.js:77:18)
    at _err1 (eval at create (/Users/nloding/code/oss/styleguidist-test/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:29:1)
    at compilerInvalid (/Users/nloding/code/oss/styleguidist-test/node_modules/webpack-dev-middleware/lib/Shared.js:161:5)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/nloding/code/oss/styleguidist-test/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:16:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/nloding/code/oss/styleguidist-test/node_modules/tapable/lib/Hook.js:35:21)
    at Watching._go (/Users/nloding/code/oss/styleguidist-test/node_modules/webpack/lib/Watching.js:40:32)
    at Watching.compiler.readRecords.err (/Users/nloding/code/oss/styleguidist-test/node_modules/webpack/lib/Watching.js:32:9)
    at Compiler.readRecords (/Users/nloding/code/oss/styleguidist-test/node_modules/webpack/lib/Compiler.js:342:11)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Reproducible Demo

To reproduce the issue, follow the steps above.

[nanjixiong218]

maybe this problem caused by the sequence of plugin use, HtmlWebpackPlugin should uses before InterpolateHtmlPlugin.

plugins: [
    new HtmlWebpackPlugin({
      title: 'Output Management',
      template: './index.html',
    }),
    new InterpolateHtmlPlugin({
      name: 'xu'
    }),    
  ],

compatable for webpack4 react-dev-utils should to the version 6.0.0.next, html-webpack-plugin should to 3.x

[Timer]

This will be fixed in the next 2.0 beta.