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

[nloding]

Current behavior

When using react-styleguidist with create-react-app@next and react-scripts@next it fails to compile and gives the following error: TypeError: Cannot read property 'tap' of undefined in the IterpolateHtmlPlugin from react-dev-utils.

The full error:

❯ 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.

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"
  },

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

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

4. Install the new dependency
5. Try to run yarn run styleguide

Expected behavior

react-styleguidist to launch per the documentation!

I've also filed this bug with create-react-app: facebook/create-react-app#4945

[sapegin]

I've answered at CRA issue.

[marcofugaro]

@sapegin is the next branch the WIP branch with the support for CRA 2.0? Can I try with that in the meantime?

[sapegin]

@marcofugaro Not exactly but it should fix problems with dynamic imports: we're using a smaller editors and don't do code splitting there. It's pretty close to finish I guess, only #1076 is left. To fully support CRA2 we'll need to drop Webpack 3 which is the next next major release. Feel free to help with any of them! ;-)

https://github.com/styleguidist/react-styleguidist/milestones

[sapegin]

I'm rereading this and shouldn't we just ignore this plugin as we ignore html-webpack-plugin?

[sapegin]

Looks like the issue was fixed on the CRA side, so closing it.