Addon-controls: Warn if docs preset is run after controls

[shilman]

Addon-controls requires addon-docs and also requires that its preset is run earlier in the main.js addons array. We should check for this automatically and warn if its misconfigured because people might not see this in the docs.

[shilman]

Yay!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-beta.46 containing PR #11458 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

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

[koop]

I'm seeing this error on rc.26 with the following code included in an addon's preset.js:

export const addons = [
  '@storybook/addon-links',
  {
    name: '@storybook/addon-docs',
    options: {
      configureJSX: true,
    },
  },
  '@storybook/addon-controls',
  '@storybook/addon-backgrounds',
];

I see there's a test case with an object so not quite sure what's happening here. Haven't dug in much further.

[bekapod]

👋 I am running into this warning as well, I am using a self-created preset which looks like: ['@storybook/addon-essentials', '@storybook/addon-a11y'] and my app configuration is just ['my-preset'].

After doing some digging, I see that the checker only ever receives my app configuration rather than the preset config. This means the indexOf's return -1 rather than >= 0 (because neither controls, docs or essentials is explicitly listed in my app).

I'm not sure what the solution is though 😦 - would it be expected that the checker resolve my-preset to figure out if that's loading the presets in the correct order?

[shilman]

@koop are you running this from a preset like @bekapod ?

[pchr-srf]

For everyone finding this after getting the message WARN Expected '@storybook/addon-docs' (or essentials) to be listed before '@storybook/addon-controls'. Check your main.js? in their Storybook build:

addon-essentials contains both addon-docs and addon-controls, so make sure that if you have an entry for addon-docs in your main.js, it is listed before addon-essentials or addon-controls.

What it should say: WARN Expected '@storybook/addon-docs' to be listed before '@storybook/addon-controls' (or '@storybook/addon-essentials'). Check your main.js?

I opened a PR (#12738) to make the phrasing a bit clearer, hope that helps.

[shilman]

Yo-ho-ho!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-alpha.24 containing PR #12738 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

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

[shilman]

Ooh-la-la!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.27 containing PR #12738 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade

[Sapendo]

I am faced with the same warning. However, we do not have @storybook/addon-docs in main.js.



Does somebody know how I can fix this?

[benbender]

@shilman Pls reopen this bug report. To me it seems the issue hasn't been fixed at all, just the wording of the warning got adjusted.

I'm facing this issue loading @storybook/addon-essentials from a custom preset on latest alpha @next. No further changes seem to be necessary to trigger the warning.

If I move @storybook/addon-essentials from the preset into main.ts, the warning is gone. Either the warning should be fixed or it should state that loading @storybook/addon-essentials from within a preset is unsupported.

[mrlubos]

Same issue as @Sapendo, I do not use essentials nor docs, yet I see the warning

[shilman]

@Sapendo you have addon-controls in main.js and that's why you're getting the warning. If you add adon-docs before addon-controls the warning will go away.

[Sapendo]

@shilman But I do not use addon-docs. Should I add it to avoid warning only? If so, it is very strange)

[shilman]

@Sapendo addon-controls uses docgen data generated by addon-docs. It will still work without, but it can be a degraded experience. We plan to change this in a future version of docs/controls, possibly as soon as 6.4

[shilman]

@benbender updated #15625

[benbender]

@shilman Thank you very much (for your general work on storybook and for the fix)!

Just to get this right: addon-controls is automatically loaded and if you either don't load addon-docs or later (via preset f.e.) you'll get the warning?
Not the end of the world but definitly worth a fix if possible as it's quite confusing if you are not that much into the internals of storybook...

[shilman]

@benbender it's a complicated system and we'll overhaul it at some point soon.

what's going on is that there's a whole pipeline of argType inference that happens at startup time. this includes args that the user provides, e.g. args: { a: 3 } => "there's an arg called a that's a number. there's also metadata that's extracted from the source code of the default.component. and finally, if the user manually specifies argTypes, those take precedence. there are even a few more steps that i'm omitting for clarity.

for historical reasons, addon-docs is responsible for the default.component analysis. this is why we expect that to happen before the controls addon consumes the results. in the next iteration (hopefully in 6.4), that analysis will happen outside of addon-docs, and that weird inter-addon dependency won't be necessary.