builder-webpack5 is missing ErrorOverlay

[theKashey]

Describe the bug
When using storybook in webpack5 mode all errors in the source code will be suppressed down to warning in a console and to feedback is displayed

To Reproduce

• webpack4

  • Start storybook
  • break a source code (import front file or make a syntax mistake)
  • an error is shown in the terminal and browser window
  • the story disappears

• webpack5

  • Start storybook
  • break a source code (import front file or make a syntax mistake)
  • no error is shown neither in the terminal, nor browser window
  • the story (just) disappears

The same is happening during the initial build - the build just failing with no reason provided.

System

  System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 16.3.0 - ~/.nvm/versions/node/v16.3.0/bin/node
    Yarn: 1.22.5 - ~/.yarn/bin/yarn
    npm: 7.15.1 - ~/.nvm/versions/node/v16.3.0/bin/npm
  Browsers:
    Chrome: 100.0.4896.60
    Firefox: 95.0
    Safari: 15.4
  npmPackages:
    @storybook/addon-actions: ^6.4.19 => 6.4.19 
    @storybook/addon-essentials: ^6.4.19 => 6.4.19 
    @storybook/addon-interactions: ^6.4.19 => 6.4.19 
    @storybook/addon-links: ^6.4.19 => 6.4.19 
    @storybook/builder-webpack5: ^6.4.20 => 6.4.20 
    @storybook/manager-webpack5: ^6.4.20 => 6.4.20 
    @storybook/react: ^6.4.19 => 6.4.19 
    @storybook/testing-library: ^0.0.9 => 0.0.9 

Additional context
Probably react-error-overlay never was "really" here (apart of #2900) and was included due to CRA defaults.

I've tried to add https://github.com/gregberge/error-overlay-webpack-plugin but is had no effect, probably something more than just plugin is required.

[valentinpalkovic]

I did some investigations and it seems, that webpack-hot-middleware is not 100% webpack 5 compactible:

Pull Request: webpack-contrib/webpack-hot-middleware#397

Related issues:

• webpack-hot-middleware/client?reload=true is no longer working with webpack 5. webpack-contrib/webpack-hot-middleware#390
• webpack 5 - hmr check api no longer returns updated modules webpack/webpack#12408

So currently we cannot do a lot. We have to wait for a new webpack-hot-middleware version, which fixes the issue.

I have found a hacky solution by pinning the webpack-hot-middleware version to a commit in a fork of webpack-hot-middleware, described here: webpack-contrib/webpack-hot-middleware#390 (comment) (use it at your own risk) This was working for me. The build error was successfully propagated to the frontend error overlay.

[shilman]

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid. Please open a new issue referencing this one if:

• this is still a problem in SB 7.x
• you can provide a consistent reproduction in 7.x (at https://storybook.new/ or per repro docs).