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

[nloding]

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.

[bugzpodder]

There are several compatibility issues with [email protected] and styleguidist. See https://github.com/facebook/create-react-app/issues/4567
I don't think styleguidist supports [email protected] at this point.

[sapegin]

Since we have to support webpack 3 and 4, we're using not the latest versions of webpack plugins and other webpack related dependencies. I think that's the reason for this issue. We're going to drop webpack 3 support in the next next major release. I don't think it's possible for us to support CRA 1 and CRA 2 at the same time.

[bartvde]

I'm getting this same error when doing a production build (so unrelated to styleguide):

> node scripts/build.js

Creating an optimized production build...
Failed to compile.

Cannot read property 'tap' of undefined

Removing the InterpolateHtmlPlugin plugin from the webpack production config gets rid of the error, but ofcourse that is no viable fix.

[bartvde]

My issue seems to be related to the 4.0.0-alpha.2 of html-webpack-plugin released 3 hours ago (4.0.0-alpha works fine) https://www.npmjs.com/package/html-webpack-plugin?activeTab=versions

[ChiaJune]

I have upgraded to version 4.0.0-alpha.2, but there are still errors

[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]

Have you tested that theory, @nanjixiong218?

[nanjixiong218]

Have you tested that theory, @nanjixiong218?

yes, it works well for me , please ensure the react-dev-utils is the right version. i sometime a strange problem is that ths version is 6.0.0.next, but the content is not fit the version.

[Timer]

Sorry, I meant the ordering.

maybe this problem caused by the sequence of plugin use

[nanjixiong218]

Sorry, I meant the ordering.

maybe this problem caused by the sequence of plugin use

yes, the HtmlWebpackPlugin is must the first . the readme of HtmlWebpackPlugin alse has noticed

[nloding]

@nanjixiong218 you tested this with react-styleguidist?

[nanjixiong218]

@nanjixiong218 you tested this with react-styleguidist?

i had not tested it

[Timer]

This will be fixed in the next 2.0 beta.