withStorybook -> "TypeError: addon.startsWith is not a function"

[williamsonmatt]

Describe the bug
I'm upgrading to 8.4.4 from an earlier version and added withStorybook to my metro.config.js file.

This resulted in the following error when loading expo:

> cd apps/expo && npx expo start --web
Starting project at /home/matt/fieldtrip/frontend/apps/expo
TypeError: addon.startsWith is not a function
TypeError: addon.startsWith is not a function
    at resolveAddonFile (/home/matt/fieldtrip/frontend/node_modules/@storybook/react-native/dist/metro/withStorybook.js:86:17)
    at generate2 (/home/matt/fieldtrip/frontend/node_modules/@storybook/react-native/dist/metro/withStorybook.js:151:30)
    at withStorybook (/home/matt/fieldtrip/frontend/node_modules/@storybook/react-native/dist/metro/withStorybook.js:291:32)
    at Object.<anonymous> (/home/matt/fieldtrip/frontend/apps/expo/metro.config.js:31:10)
    at Module._compile (node:internal/modules/cjs/loader:1562:14)
    at Object.<anonymous> (node:internal/modules/cjs/loader:1699:10)
    at Module.load (node:internal/modules/cjs/loader:1313:32)
    at Function._load (node:internal/modules/cjs/loader:1123:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:217:24)

The cause seems to be my @storybook/addon-styling-webpack addon, for which their installation instructions require defining the add-on as an Object:

{
  name: '@storybook/addon-styling-webpack',
  options: {
    rules: [
     ....
    ]
  }
}

It appears withStorybook expects all add-ons to be strings, but this configuration is an object.

My local patch that resolves the issue is to replace all instances of addon with addon.name ?? addon within resolveAddonFile. That fixes the module compilation error.

To Reproduce
Steps to reproduce the behavior:

1. Start with a project that uses withStorybook
2. Integrate @storybook/addon-styling-webpack, configuring the add-on using the object config as instructed.

System:
Please paste the results of npx -p @storybook/cli@next sb info here.

matt@machine:~/fieldtrip/frontend$ npx -p @storybook/cli@next sb info
sh: 1: @storybook/[email protected]: not found

Additional context
<3

[dannyhw]

We probably should handle the this case (object in addons array).

Thanks for bringing it to my attention.

Do note though that web addons that apply bundler config won't work since we are running in a different context, i.e we run your project with your metro config. For example a webpack addon will not work since none of that config will even apply anywhere.

The webpack styling addon should be used in a storybook with for example a reactjs webpack configuration