Storybook: Migrate webpack configuration in 5.x

[shilman]

We changed the webpack configuration API between 4.x and 5.x. Although we documented this change in MIGRATION.md, we didn't anticipate the chaos this change would cause, including:

• Broken inline SVGs
• Broken PNGs
• Broken CSS

There are probably more issues that we don't know about yet.

Discussed a path forward with @tmeasday and documenting this as an umbrella issue:

• [x] Provide a flag for printing out the final webpack config to assist people debugging webpack issues such as the ones above => #6082
• [x] Deprecate "extend mode" and discourage people from using it => #6104
• [ ] Warn user when their configs contain conflicting/redundant rules
• [x] Update existing presets as needed and/or provide instructions to help people migrate to the new setup

Deprecating extend mode

Extend mode is "magic" behavior that obscures customization without providing enough added value to justify its existence. It's also another code path and another source of confusion in documentation / mental model / etc. Instead we should encourage people to use full-control mode and make that as convenient as possible.

[shilman]

A simpler option would be to restore baseConfig to full-control mode. @igor-dv @ndelangen @tmeasday what do you think about this?

[ndelangen]

I think storybook's CLI (start & build commands) should create a .log file when a problem is detected or someone passes --debug it them.

This log can then be used to output things like the full webpack config.

Before storybook actually starts we should do some final analysis of the webpack config for common known issues. (things like double loaders, double plugins, removal of storybook entrypoints)

Also we want to create presets for the things most people are writing custom webpack config for.

[shilman]

OK debugged this with @ndelangen. There was a regression in SB5 for webpack "extend mode" which caused the issues here. In 4.x extend-mode operated on baseConfig and in 5.0 it operated on the defaultConfig.

Here is the diff in output between v4 and v5 extend configs (red is v4, green is v5): https://gist.github.com/shilman/5ce0d26a77d2774b13d30f7f346b93d5/revisions

What we're going to do:

• Restore the old behavior to unbreak people
• Deprecate extend-mode as previously discussed

Adding this to #6104 now!

[tmeasday]

Aha! Good work!

[shilman]

Olé!! I just released https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.7 containing PR #6082 that references this issue. Upgrade today to try it out!

Because it's a pre-release you can find it on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Whoopee!! I just released https://github.com/storybooks/storybook/releases/tag/v5.0.2 containing PR #6082 that references this issue. Upgrade today to try it out!

Closing this issue. Please re-open if you think there's still more to do.

[elie222]

Still having issues importing SVGs.

[shilman]

@elie222 i added a --debug-webpack CLI flag so you can see the final preview webpack config. How many rules do you have that match SVG?

[shilman]

@jacobgranberry are you using 5.0.2? Also do you need to run with -- --debug-webpack (it used to be that way in npm -- I use yarn now)?

[jacobgranberry]

@shilman the extra dashes worked. sorry, still new to this. thank you for the quick response!