FAST_REFRESH=true causes compilation error (Webpack 5 support) #13745

dn-l · 2021-01-27T13:18:01Z

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

The text was updated successfully, but these errors were encountered:

dn-l · 2021-01-28T09:10:02Z

It works if I remove @pmmmwh/react-refresh-webpack-plugin, but how can I use it in my original webpack config then?

tooppaaa · 2021-01-31T14:44:13Z

Storybook has a dependency to @pmmmwh/react-refresh-webpack-plugin@0.4.2, which appears to not have webpack 5 support. https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/CHANGELOG.md#fixes

Fixed Webpack 5 compatibility by requiring webpack_require (#233)

Storybook isn't (up to my knowledge) compatible with webpack 5 until 6.2. @shilman

shilman · 2021-01-31T16:21:35Z

That's correct. We're shooting for webpack 5 support in 6.2. I guess we'll need to figure out fast refresh in webpack 5 or live without it for now.

dn-l · 2021-01-31T18:55:36Z

Oooh gotya! 👍

timkindberg · 2021-02-03T18:16:20Z

Hate to be this guy, but any rough ETA on when 6.2 would be release? Days, weeks, months?

shilman · 2021-02-21T14:09:31Z

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

rtrembecky · 2021-07-07T11:37:39Z

Hi, fast refresh still doesn't work for me. Whether I use FAST_REFRESH=true or reactOptions: { fastRefresh: true }, I get:

/Users/richard/uc/web/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/richard/uc/web/node_modules/webpack/lib/NormalModuleFactory.js:294:14
    at _next0 (eval at create (/Users/richard/uc/web/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at eval (eval at create (/Users/richard/uc/web/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:31:1)
    at /Users/richard/uc/web/node_modules/case-sensitive-paths-webpack-plugin/index.js:176:9

npx sb info:

Environment Info:

  System:
    OS: macOS 11.4
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 12.16.3 - ~/.nvm/versions/node/v12.16.3/bin/node
    Yarn: 2.4.1 - ~/.nvm/versions/node/v12.16.3/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v12.16.3/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Firefox: 88.0.1
    Safari: 14.1.1
  npmPackages:
    @storybook/addon-actions: ^6.3.2 => 6.3.2 
    @storybook/addon-docs: ^6.3.2 => 6.3.2 
    @storybook/addon-essentials: ^6.3.2 => 6.3.2 
    @storybook/addon-links: ^6.3.2 => 6.3.2 
    @storybook/builder-webpack5: ^6.3.2 => 6.3.2 
    @storybook/manager-webpack5: ^6.3.2 => 6.3.2 
    @storybook/react: ^6.3.2 => 6.3.2

react-refresh-webpack-plugin is at 0.4.3 already, so this is some new problem 🤔

ZJH9Rondo · 2021-07-14T09:40:52Z

@rtrembecky the same problem

dcwarwick · 2021-07-15T01:09:42Z

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.

ZJH9Rondo · 2021-07-15T07:20:20Z

@shilman SOS!!!

iseredov · 2021-07-21T07:49:50Z

Try to remove yarn.lock and reinstall dependencies.

rtrembecky · 2021-07-26T08:07:31Z

Try to remove yarn.lock and reinstall dependencies.

@iseredov tried now, didn't work.

dcwarwick · 2021-08-02T16:09:00Z

Try to remove yarn.lock and reinstall dependencies.

Ditto: removed yarn.lock cleared caches and ran yarn afresh, and get the exact same set of messages I posted above. I'm keeping fastRefresh: true commented out for the time being as a workaround.

shilman · 2021-08-02T17:39:59Z

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: #15616

shilman · 2021-08-02T17:41:14Z

In fact, I'm going to close this as fixed in #15616

Please upgrade and let me know if it's not working. If so, I'll reopen!

rtrembecky · 2021-08-03T08:23:51Z

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.

dcwarwick · 2021-08-03T17:12:51Z

@shilman I've not been able to check this because my storybook comes up empty on 6.4.0-alpha.22. In fact, it comes up empty on anything from 6.4.0-alpha.20 onwards -- it's fine up to and including 6.4.0-alpha.19. I wonder if something in #15399 has caused something to change? My storybook config supplies an array of specific individual path-and-file-names for the stories field, as we resolve our own glob and then filter out some unwanted files. Is this a known problem already, or do you need me to open an issue?

shilman · 2021-08-03T17:17:11Z

@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

dcwarwick · 2021-08-03T18:30:25Z

Opened issue #15746

dcwarwick · 2021-08-07T20:22:50Z

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

ChrKahl · 2022-06-22T14:47:09Z

My workaround is to disable fast refresh by running: FAST_REFRESH=false npm start

tooppaaa added react compatibility with other tools labels Jan 31, 2021

shilman added the configuration babel / webpack label Jan 31, 2021

dn-l changed the title ~~FAST_REFRESH=true causes compilation error~~ FAST_REFRESH=true causes compilation error (Webpack 5 support) Feb 1, 2021

shilman closed this as completed Aug 2, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FAST_REFRESH=true causes compilation error (Webpack 5 support) #13745

FAST_REFRESH=true causes compilation error (Webpack 5 support) #13745

dn-l commented Jan 27, 2021 •

edited

dn-l commented Jan 28, 2021 •

edited

tooppaaa commented Jan 31, 2021

shilman commented Jan 31, 2021

dn-l commented Jan 31, 2021

timkindberg commented Feb 3, 2021

shilman commented Feb 21, 2021

rtrembecky commented Jul 7, 2021 •

edited

ZJH9Rondo commented Jul 14, 2021

dcwarwick commented Jul 15, 2021 •

edited

ZJH9Rondo commented Jul 15, 2021

iseredov commented Jul 21, 2021

rtrembecky commented Jul 26, 2021

dcwarwick commented Aug 2, 2021

shilman commented Aug 2, 2021

shilman commented Aug 2, 2021

rtrembecky commented Aug 3, 2021

dcwarwick commented Aug 3, 2021

shilman commented Aug 3, 2021

dcwarwick commented Aug 3, 2021

dcwarwick commented Aug 7, 2021

ChrKahl commented Jun 22, 2022

FAST_REFRESH=true causes compilation error (Webpack 5 support) #13745

FAST_REFRESH=true causes compilation error (Webpack 5 support) #13745

Comments

dn-l commented Jan 27, 2021 • edited

dn-l commented Jan 28, 2021 • edited

tooppaaa commented Jan 31, 2021

shilman commented Jan 31, 2021

dn-l commented Jan 31, 2021

timkindberg commented Feb 3, 2021

shilman commented Feb 21, 2021

rtrembecky commented Jul 7, 2021 • edited

ZJH9Rondo commented Jul 14, 2021

dcwarwick commented Jul 15, 2021 • edited

ZJH9Rondo commented Jul 15, 2021

iseredov commented Jul 21, 2021

rtrembecky commented Jul 26, 2021

dcwarwick commented Aug 2, 2021

shilman commented Aug 2, 2021

shilman commented Aug 2, 2021

rtrembecky commented Aug 3, 2021

dcwarwick commented Aug 3, 2021

shilman commented Aug 3, 2021

dcwarwick commented Aug 3, 2021

dcwarwick commented Aug 7, 2021

ChrKahl commented Jun 22, 2022

dn-l commented Jan 27, 2021 •

edited

dn-l commented Jan 28, 2021 •

edited

rtrembecky commented Jul 7, 2021 •

edited

dcwarwick commented Jul 15, 2021 •

edited