Update from 4.2.0 to 4.3.1 doesn't work with mdx files (manual setup)

[solidevolution]

Version

@nuxtjs/storybook: 4.3.1 nuxt: v2.15.8

Steps to reproduce

Did the manual setup like described in the docs (own preview.js etc, no storybook config in nuxt.config) Add a vue component to stories.mdx files

What is Expected?

Vue components show up in the docs

What is actually happening?

Vue components only rendered in story tab, not in doc tab.

[prashantpalikhe]

@solidevolution Do you have nuxt-storybook ejected? Are you exporting custom parameters in preview.js? If yes, you need to ensure that you import the globalParameters from the .nuxt-storybook folder and export that along with your custom parameters. Otherwise, the docs will break indeed. It needs to be documented better.

[solidevolution]

Currently I'm only use those:

import {
  parameters as nuxtParameters,
  decorators as nuxtDecorators,
} from '~/.nuxt-storybook/storybook/preview.js'

and then

export const parameters = {
    ...nuxtParameters,
    {
        ... my overwrites
    }
}

export const decorators = nuxtDecorators

[solidevolution]

So I looked in the source and than I can confirm, I use parameters from ~/.nuxt-storybook/storybook/preview.js which seems to be globalParameters.

[solidevolution]

To help you debug, here our parameters without the sorting details

export const parameters = {
  layout: 'centered',
  viewMode: 'story', // default view mode for components
  actions: { argTypesRegex: '^@.*' },
  controls: { expanded: true, sort: 'requiredFirst' },
  viewport: { viewports },
  options: {
    storySort: {
      order: [
        'One',
        [
          'One',
          'Two,
        ],
        'Two',
        [
          'One,
          'Two',
        ],
        'Three',
        ['One', 'Two'],
        'Four',
        ['One', 'Two'],
      ],
    },
  },
  backgrounds: { disable: true },
  docs: {
    theme,
  },
  ...nuxtParameters,
}

[solidevolution]

I tried it again with npx nuxt storybook eject and added missing globalTypes to preview and middleware.js to .storybook folder but the problems are the same: No Sorting / custom parameters and no vue components in mdx files.

[solidevolution]

├── @nuxtjs/storybook@4.3.1
├── @storybook/addon-a11y@6.4.22
├── @storybook/addon-docs@6.4.22
├── @storybook/addon-jest@6.4.22
├── @storybook/addon-storysource@6.4.22

[solidevolution]

Oh wait a second, the problem now seems to come from a plugin. I will give you feedback soon.

[solidevolution]

Ok, I found out a helpful information about all who use nuxt-storybook:

DONT do this:

import { addDecorator } from '@storybook/vue'

const results = require('../.jest-test-results.json')
  addDecorator(
    withTests({
      results,
    })
  )

inside your preview.js!

Always use

import {
  globalTypes as nuxtGlobalTypes,
  parameters as nuxtParameters,
  decorators as nuxtDecorators,
} from '~/.nuxt-storybook/storybook/preview.js'

and export those with your customizations like this:

export const decorators = [
  ...nuxtDecorators,
  withTests({
    results: require('../.jest-test-results.json'),
  }),
]

Now all errors are gone. Thank you for the eject tip, @prashantpalikhe

[solidevolution]

No disrespect for your repository but in the current project we use the nuxt application and storybook in a monorepo to split dependencies and load. Currently we did a lot of environment specific disables in nuxt config to have a different nuxt and tailwind config. It's pretty simple to run storybook/vue and if the webpack or vite config in future is so different, than it's in my opinion the best way to separat the design system. This is also important to use it with multiple applications.