Docs pages : The docs page does not display the component code "No code available"

[messenjer]

Hello,

In my storybook, the docs page does not display the component code. It displays "No code available" (see capture below)

I manage to reproduce it with a basic installation, I create a "vue3" project with Vite and then I install storybook with the storybook-builder-vite. In the default examples, I have the same problem.

Here is the commands, I execute in a new folder:

npm init vite@latest my-vue-app --template vue-ts
cd my-vue-app
npm install
npx sb@next init --builder storybook-builder-vite
npm run storybook

and my package.json

{
  "name": "my-vue-app",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "serve": "vite preview",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "vue": "^3.2.16"
  },
  "devDependencies": {
    "@babel/core": "^7.15.8",
    "@storybook/addon-actions": "^6.4.0-beta.6",
    "@storybook/addon-essentials": "^6.4.0-beta.6",
    "@storybook/addon-links": "^6.4.0-beta.6",
    "@storybook/vue3": "^6.4.0-beta.6",
    "@vitejs/plugin-vue": "^1.9.2",
    "babel-loader": "^8.2.2",
    "storybook-builder-vite": "^0.1.0",
    "typescript": "^4.4.3",
    "vite": "^2.6.0",
    "vue-loader": "^16.8.1",
    "vue-tsc": "^0.3.0"
  }
}

I try also with a react application, and I have the same issue

npm init @vitejs/app vite-react-app --template react
cd vite-react-app
npm install
npm run storybook

Is it a known problem? Where can I look to fix this, the "vite" configuration? or in the storybook code?

Thanks

Mathieu

[messenjer]

Hello,

I also tested with a classic installation of storybook (without vite) and it's working.

vue create my-project
cd my-project
npx sb init
npm run storybook

Although the generated code does not seem to be very useful for the documentation of the component. For each story, it's the same code. It doesn't match the explanation of the functionality in the documentation. https://github.com/storybookjs/storybook/blob/next/docs/writing-docs/doc-blocks.md

I will try also with docPages https://storybook.js.org/docs/vue/writing-docs/docs-page if I find another solution.

Regards

Mathieu

[Psvensso]

Just shedding some light on this, @storybook/addon-docs uses the storySource and @storybook/source-loader to load source and modify the story (adding the storySource parameter to the story).

As the name suggests, the @storybook/source-loader is a Webpack loader.

So i guess this would have to be totaly re-written for Vite/Esbuild.

[messenjer]

So i guess this would have to be totally re-written for Vite/Esbuild.

Yes, we are having some issues like this with storybook-quickly-builder.

We must therefore find alternatives. For the "No code available", now we use Format MDX for stories which work more or less ;-)

[shilman]

If your stories accept args as input and you are using one of the supported frameworks (most popular frameworks except vue3 at this time), it should dynamically generate a snippet based on the return value of the story function. No loader needed.

[Nisgrak]

Same issue, any fix?

[lk0606]

Same issue, any fix? and I use vue3 + tsx, my code here. help wanted! https://github.com/wont-org/vue3-el/blob/docs/sb/components/Button/index.stories.tsx

[lk0606]

I think, the problem is vue-docgen-api. which used webpack. but vite haven't. @story/docs options is passed under that.

Looking forward to your solution