Storybook: Enable "--display-error-details" in webpack

[munerf]

Is your feature request related to a problem? Please describe.
To debug module imports I would like to enable webpack's "--display-error-details" inside storybook!

Describe the solution you'd like
How can I do it?

[ndelangen]

@shilman added a --debug-webpack options recently, perhaps we can add this setting when that is active?

[ndelangen]

If this flag is toggle-able from the webpack config, this should be fairly simple to implement, any takers?

[jamieshark]

Hi there! I think you can enable this webpack setting through the stats property in a custom config. Based on the default webpack config, it doesn't look like there are any default settings for stats, so we can assign that as a property on the default config and return it as a new custom config.

1. Create a .storybook/webpack.config.js file.
2. Add the stats option in your webpack config.

// .storybook/webpack.config.js
module.exports = async ({ config, mode }) => {
  config.stats = {
    errorDetails: true, // --display-error-details
  }
  return config;
};

Let me know if this works for your use case!

[dhuang612]

Hi,

I would like to take this on!

[dhuang612]

Hi,

I am pretty new to webpack. I've done some research into how to setup this via stats
https://webpack.js.org/configuration/stats/#statserrordetails

The files I see related to Webpack in this project are under
lib > core > src > server > preview
with the two files being:
base-webpack.config.js custom-webpack-preset.js
But then I also see a dev-server.js file.

Edit
under src/client/manager
I see a file called conditional-polyfills.js which seems to add in the ability to do polyfills.
Do I add a webpack.config.js file with --display-error-details set to true
to get this feature enabled?

Could I get some help on how I'm supposed to approach this?
created PR #8391 as a starting point

Thanks!

[sakito21]

@shilman
This fixed #8391 Issue.
I think you can close it.