Core: Fix auto-title in webpack5

[shilman]

Issue: #16891 #16903

What I did

Webpack5 no longer includes path polyfills by default, so we need to add it by hand.

self-merging @tmeasday

How to test

I did sb link the repro from #16891 and it failed before the change & worked after

[nx-cloud]

Nx Cloud Report

CI ran the following commands for commit 8ddd297. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

Status	Command
	nx run-many --target=prepare --all --parallel --max-parallel=15

---

Sent with 💌 from NxCloud.

[nx-cloud]

Nx Cloud Report

We didn't find any information for the current pull request with the commit 8ddd297.
You might need to set the 'NX_BRANCH' environment variable in your CI pipeline.

Check the Nx Cloud Github Integration documentation for more information.

---

Sent with 💌 from NxCloud.

[tmeasday]

Great!

[bebraw]

I think this fix should go to manager webpack config as well. I had to patch like this in my project:

module.exports = {
  ...
  managerWebpack: (config) => {
    config.resolve = {
      ...config.resolve,
      fallback: {
        ...config.resolve.fallback,
        path: require.resolve('path-browserify'),
      },
    };

    return config;
  },
}

It seems manager config is missing the shim right now.

[shilman]

@bebraw is the patch something specific to a particular addon or your project's config? i don't think storybook core needs it, but i'm happy to add it if it's causing enough people problems

[bebraw]

Without the additional fix, it was crashing at the path import within auto title logic for me. It would be consistent to have the same shimming behavior for manager compilation as well. I imagine there's something in my project that's triggering the title logic.

…

On 6. Dec 2021, at 14.40, Michael Shilman ***@***.***> wrote:  @bebraw is the patch something specific to a particular addon? i don't think storybook core needs it, but i'm happy to add it if it's causing enough people problems — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android.

[tmeasday]

Hmmm, I wonder why auto title would be running on the manager side @bebraw. Any chance of a stack trace?

[bebraw]

I will try to reduce it. It's definitely weird it's getting picked up in my particular case.

…

On 6. Dec 2021, at 21.39, Tom Coleman ***@***.***> wrote:  Hmmm, I wonder why auto title would be running on the manager side @bebraw. Any chance of a stack trace? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android.

[bebraw]

@tmeasday Here's the trace, https://gist.github.com/bebraw/210b6a2411f53c5063eca40d88bdeace . To keep it simple, I disabled all the addons.

[tmeasday]

@bebraw from that trace it looks like you are importing @storybook/react inside your manager.js -- is that right?

That's a little unexpected but I suppose if you are doing it, others will be too, in which case this polyfill is necessary, certainly outside of 7.0.

[bebraw]

@bebraw from that trace it looks like you are importing @storybook/react inside your manager.js -- is that right?

That's a good catch.

I see this kind of usage import { addDecorator } from '@storybook/react';. The import explains the trouble.

In my case it seems it's even dead code so I can safely remove it if addDecorator is still supported, likely then the shim config should exist for manager as well.

[tmeasday]

@bebraw -- I wonder why you are using addDecorator in manager.js?

[bebraw]

@tmeasday It's some older code I didn't write. It's possible the initial usage was simply wrong.

[shilman]

Ok given that, I'm going to close that PR