Storybook: 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 (https://github.com/storybookjs/storybook/pull/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