InterpolateHtmlPlugin: Cannot read property 'tap' of undefined, react-scripts@next
See original GitHub issueIs 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
- Init a new CRA@next app:
npx create-react-app@next --scripts-version=2.0.0-next.a671462c styleguidist-test
- Add
react-styleguidist
as a devDependency:
"devDependencies": {
"react-styleguidist": "^7.3.4"
},
- Add the following scripts, from the styleguidist documentation:
"styleguide": "styleguidist server",
"styleguide:build": "styleguidist build"
- Install the new dependency
- 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.
Issue Analytics
- State:
- Created 5 years ago
- Comments:13 (4 by maintainers)
Top Results From Across the Web
Cannot read property 'tap' of undefined, react-scripts@next
When using react-styleguidist with create-react-app@next and react-scripts@next it fails to compile and gives the following error: TypeError: ...
Read more >ProgressPlugin TypeError: Cannot read property 'tap' of ...
In my case the error was that I put a plugin under resolve.plugins , instead of directly in plugins inside the webpack config....
Read more >Cannot read property 'tap' of undefined - YBZ_前端一员- 博客园
building for prod environment...E:\vue-project\vue-element-admin-master\node_modules\script-ext-html-webpack-plugin\lib\plugin.js:50
Read more >React- Webpack: Cannot read property 'tap' of undefined
React- Webpack: Cannot read property 'tap' of undefined ... require("case-sensitive-paths- webpack-plugin");const InterpolateHtmlPlugin ...
Read more >Cannot read property 'tap' of undefined at HtmlWebpackPlugin ...
TypeError : Cannot read property 'tap' of undefined at HtmlWebpackPlugin.apply. Enterprise 2022-04-23 05:47:09 views: null.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
maybe this problem caused by the sequence of plugin use, HtmlWebpackPlugin should uses before InterpolateHtmlPlugin.
compatable for webpack4 react-dev-utils should to the version 6.0.0.next, html-webpack-plugin should to 3.x
This will be fixed in the next 2.0 beta.