storybook: FAST_REFRESH=true causes compilation error (Webpack 5 support)

Describe the bug FAST_REFRESH=true causes compilation error. Same as if I would configure .storybook/main.js or add plugin manually into config.plugins.

To Reproduce Steps to reproduce the behavior:

Default config
FAST_REFRESH=true start-storybook

The same project builds successfully with webpack & @pmmmwh/react-refresh-webpack-plugin. The same storybook compiles without FAST_REFRESH=true

yarn run v1.22.10
$ FAST_REFRESH=true start-storybook
info @storybook/react v6.1.15
info => Using prebuilt manager
info => Loading presets
info => Loading 1 config file in "./.storybook"
info => Loading 7 other files in "./.storybook"
info => Adding stories defined in ".storybook/main.js"
info => Using React fast refresh
info => Using default Webpack setup
0% compilingERR! TypeError: Cannot read property 'tap' of undefined
ERR!     at /Users/dan/github/project/node_modules/@pmmmwh/react-refresh-webpack-plugin/lib/index.js:236:65

Expected behavior Succesful compilation

System

Environment Info:

  System:
    OS: macOS 11.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 13.8.0 - ~/.nvm/versions/node/v13.8.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v13.8.0/bin/yarn
    npm: 6.13.6 - ~/.nvm/versions/node/v13.8.0/bin/npm
  Browsers:
    Chrome: 88.0.4324.96
    Firefox: 84.0.2
    Safari: 14.0.2
  npmPackages:
    @storybook/addon-actions: ^6.1.15 => 6.1.15 
    @storybook/addon-essentials: ^6.1.15 => 6.1.15 
    @storybook/addon-links: ^6.1.15 => 6.1.15 
    @storybook/react: ^6.1.15 => 6.1.15

Packages:

    "react-refresh": "^0.9.0",
    "webpack": "^5.18.0",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 2
Comments: 21 (7 by maintainers)

Most upvoted comments

@timkindberg going to beta this week, final in about a month (knock wood)

shilman on Feb 21, 2021

@shilman It works for us too with 6.4.0-alpha.25, many thanks!

dcwarwick on Aug 7, 2021

Does that fix it? It contains this PR that’s supposed to fix it: #15616

@shilman Yes, it works now (having 6.4.0-alpha.22), thank you for letting us know.

rtrembecky on Aug 3, 2021

I’m seeing this problem too (“no longer a waterfall hook, but a bailing hook instead”) – it does indeed look like a new problem, recently appearing. I see some deprecation warnings before, which I don’t know if they are relevant:

...
info => Using React fast refresh
info => Using default Webpack5 setup
info => Loading custom manager config
[DEP_WEBPACK_MAIN_TEMPLATE_OUTPUT_OPTIONS] DeprecationWarning: MainTemplate.outputOptions is deprecated (use Compilation.outputOptions instead)
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:50426) [DEP_WEBPACK_MAIN_TEMPLATE_REQUIRE] DeprecationWarning: MainTemplate.hooks.require is deprecated (use JavascriptModulesPlugin.getCompilationHooks().renderRequire instead)
(node:50426) [DEP_WEBPACK_COMPILATION_NORMAL_MODULE_LOADER_HOOK] DeprecationWarning: Compilation.hooks.normalModuleLoader was moved to NormalModule.getCompilationHooks(compilation).loader
info => Using cached manager
/Users/dave/git/ibm-cloud-cognitive/node_modules/webpack/lib/NormalModuleFactory.js:294
							throw new Error(
							^
Error: NormalModuleFactory.afterResolve (CaseSensitivePathsPlugin, ReactRefreshPlugin) is no longer a waterfall hook, but a bailing hook instead. Do not return the passed object, but modify it instead. Returning false will ignore the request and results in no module created.
    at /Users/dave/git/ibm-cloud-cognitive/node_modules/webpack/lib/NormalModuleFactory.js:294:14
    at _next0 (eval at create (/Users/dave/git/ibm-cloud-cognitive/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:17:1)
    at eval (eval at create (/Users/dave/git/ibm-cloud-cognitive/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:33:1)
    at /Users/dave/git/ibm-cloud-cognitive/node_modules/case-sensitive-paths-webpack-plugin/index.js:176:9
    at /Users/dave/git/ibm-cloud-cognitive/node_modules/case-sensitive-paths-webpack-plugin/index.js:125:7
    at /Users/dave/git/ibm-cloud-cognitive/node_modules/case-sensitive-paths-webpack-plugin/index.js:125:7
    at CaseSensitivePathsPlugin.fileExistsWithCase (/Users/dave/git/ibm-cloud-cognitive/node_modules/case-sensitive-paths-webpack-plugin/index.js:95:5)
    at /Users/dave/git/ibm-cloud-cognitive/node_modules/case-sensitive-paths-webpack-plugin/index.js:118:10
    at CaseSensitivePathsPlugin.getFilenamesInDir (/Users/dave/git/ibm-cloud-cognitive/node_modules/case-sensitive-paths-webpack-plugin/index.js:52:5)
    at CaseSensitivePathsPlugin.fileExistsWithCase (/Users/dave/git/ibm-cloud-cognitive/node_modules/case-sensitive-paths-webpack-plugin/index.js:101:8)
    at /Users/dave/git/ibm-cloud-cognitive/node_modules/case-sensitive-paths-webpack-plugin/index.js:118:10
    at /Users/dave/git/ibm-cloud-cognitive/node_modules/case-sensitive-paths-webpack-plugin/index.js:72:5
    at processTicksAndRejections (internal/process/task_queues.js:80:21)
error Command failed with exit code 1.

dcwarwick on Jul 15, 2021

@dcwarwick perhaps there’s a regression in #15399? if you could open a new issue with a reproduction that would be really helpful https://storybook.js.org/docs/react/contribute/how-to-reproduce

shilman on Aug 3, 2021

Try upgrading to the latest prerelease:

npx sb@next upgrade --prerelease

Does that fix it? It contains this PR that’s supposed to fix it: https://github.com/storybookjs/storybook/pull/15616

shilman on Aug 2, 2021