search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
83.49k stars 9.13k forks source link

[Bug]: docs tab not display in storybook ui #27023

Open jon9090 opened 2 months ago

jon9090 commented 2 months ago

Describe the bug

I utilize Storybook alongside Angular. I've included @storybook/addon-docs to showcase the code tab, but it's not rendering in the Storybook UI.

What might be causing this issue? Am I overlooking something, or could it be a bug?

package.json:

"@storybook/addon-docs": "^8.0.9",
"@nx/storybook": "18.3.4",
"@storybook/angular": "7.6.18",

main.ts:

import type { StorybookConfig } from '@storybook/angular';

const config: StorybookConfig = {
  stories: ['../../../**/*.stories.@(js|jsx|ts|tsx|mdx)'],
  addons: ['@storybook/addon-essentials', '@storybook/addon-interactions', 'storybook-addon-angular-router', "@storybook/addon-docs"],
  framework: {
    name: '@storybook/angular',
    options: { },
  },
};

export default config;

// To customize your webpack configuration you can use the webpackFinal field.
// Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config
// and https://nx.dev/recipes/storybook/custom-builder-configs
image

To Reproduce

const meta: Meta<FooComponent> = {
  component: FooComponent,
  title: 'FooComponent'
};

export default meta;
type Story = StoryObj<FooComponent>;

export const Primary: Story = {
  parameters: {
    docs: { source: { state: 'open' } },
  },
  args: {}
};

System

Storybook Environment Info:

  System:
    OS: macOS 14.4.1
    CPU: (8) arm64 Apple M2
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn <----- active
    npm: 10.5.0 - /usr/local/bin/npm
    pnpm: 8.6.11 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 124.0.6367.119
    Edge: 124.0.2478.80
    Safari: 17.4.1
  npmPackages:
    @storybook/addon-docs: ^8.0.9 => 8.0.9
    @storybook/addon-essentials: 7.6.18 => 7.6.18
    @storybook/addon-interactions: ^7.5.3 => 7.6.18
    @storybook/addon-storysource: ^8.0.9 => 8.0.9
    @storybook/angular: 7.6.18 => 7.6.18
    @storybook/core-server: 7.6.18 => 7.6.18
    @storybook/html-vite: ^8.0.9 => 8.0.9
    @storybook/jest: ^0.2.3 => 0.2.3
    @storybook/test-runner: ^0.13.0 => 0.13.0
    @storybook/testing-library: ^0.2.2 => 0.2.2
    storybook-addon-angular-router: ^1.10.0 => 1.10.0


### Additional context

_No response_
kangaroo19 commented 2 months ago 
import type { StorybookConfig } from '@storybook/angular';

const config: StorybookConfig = {
  stories: ['../../../**/*.stories.@(js|jsx|ts|tsx|mdx)'],
  addons: ['@storybook/addon-essentials', '@storybook/addon-interactions', 'storybook-addon-angular-router', "@storybook/addon-docs"],
  framework: {
    name: '@storybook/angular',
    options: { },
  },
  docs: {   /* add this code */
    autodocs: true,
  },
};

export default config;

i 've solved that problem by adding that code

jon9090 commented 2 months ago

@kangaroo19 I did:

 docs: {   /* add this code */
    autodocs: true,
  },

but it throw an error:

(0 , react__WEBPACK_IMPORTED_MODULE_0__.useContext)(...).componentStoriesFromCSFFile is not a function
TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.useContext)(...).componentStoriesFromCSFFile is not a function
    at Primary (http://localhost:4400/vendors-node_modules_storybook_addon-docs_dist_DocsRenderer-K4EAMTCU_mjs.iframe.bundle.js:5836:83)
    at Nh (http://localhost:4400/vendors-node_modules_storybook_addon-docs_dist_DocsRenderer-K4EAMTCU_mjs.iframe.bundle.js:38555:7)
    at Vk (http://localhost:4400/vendors-node_modules_storybook_addon-docs_dist_DocsRenderer-K4EAMTCU_mjs.iframe.bundle.js:41737:11)
    at Uk (http://localhost:4400/vendors-node_modules_storybook_addon-docs_dist_DocsRenderer-K4EAMTCU_mjs.iframe.bundle.js:41431:11)
    at Tk (http://localhost:4400/vendors-node_modules_storybook_addon-docs_dist_DocsRenderer-K4EAMTCU_mjs.iframe.bundle.js:41425:23)
    at Ik (http://localhost:4400/vendors-node_modules_storybook_addon-docs_dist_DocsRenderer-K4EAMTCU_mjs.iframe.bundle.js:41411:5)
    at Nk (http://localhost:4400/vendors-node_modules_storybook_addon-docs_dist_DocsRenderer-K4EAMTCU_mjs.iframe.bundle.js:41134:7)
    at Gk (http://localhost:4400/vendors-node_modules_storybook_addon-docs_dist_DocsRenderer-K4EAMTCU_mjs.iframe.bundle.js:41071:51)
    at J (http://localhost:4400/vendors-node_modules_storybook_addon-docs_dist_DocsRenderer-K4EAMTCU_mjs.iframe.bundle.js:42973:17)
    at MessagePort.R (http://localhost:4400/vendors-node_modules_storybook_addon-docs_dist_DocsRenderer-K4EAMTCU_mjs.iframe.bundle.js:43004:11)
kangaroo19 commented 2 months ago

could you show me your any stories.ts code?

wangmeijian commented 1 month ago

@kangaroo19 I did:

 docs: {   /* add this code */
    autodocs: true,
  },

but it throw an error:

(0 , react__WEBPACK_IMPORTED_MODULE_0__.useContext)(...).componentStoriesFromCSFFile is not a function
TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.useContext)(...).componentStoriesFromCSFFile is not a function
    at Primary (http://localhost:4400/vendors-node_modules_storybook_addon-docs_dist_DocsRenderer-K4EAMTCU_mjs.iframe.bundle.js:5836:83)
    at Nh (http://localhost:4400/vendors-node_modules_storybook_addon-docs_dist_DocsRenderer-K4EAMTCU_mjs.iframe.bundle.js:38555:7)
    at Vk (http://localhost:4400/vendors-node_modules_storybook_addon-docs_dist_DocsRenderer-K4EAMTCU_mjs.iframe.bundle.js:41737:11)
    at Uk (http://localhost:4400/vendors-node_modules_storybook_addon-docs_dist_DocsRenderer-K4EAMTCU_mjs.iframe.bundle.js:41431:11)
    at Tk (http://localhost:4400/vendors-node_modules_storybook_addon-docs_dist_DocsRenderer-K4EAMTCU_mjs.iframe.bundle.js:41425:23)
    at Ik (http://localhost:4400/vendors-node_modules_storybook_addon-docs_dist_DocsRenderer-K4EAMTCU_mjs.iframe.bundle.js:41411:5)
    at Nk (http://localhost:4400/vendors-node_modules_storybook_addon-docs_dist_DocsRenderer-K4EAMTCU_mjs.iframe.bundle.js:41134:7)
    at Gk (http://localhost:4400/vendors-node_modules_storybook_addon-docs_dist_DocsRenderer-K4EAMTCU_mjs.iframe.bundle.js:41071:51)
    at J (http://localhost:4400/vendors-node_modules_storybook_addon-docs_dist_DocsRenderer-K4EAMTCU_mjs.iframe.bundle.js:42973:17)
    at MessagePort.R (http://localhost:4400/vendors-node_modules_storybook_addon-docs_dist_DocsRenderer-K4EAMTCU_mjs.iframe.bundle.js:43004:11)

the same issue

valentinpalkovic commented 1 month ago

You have a mix of Storybook 8 and 7 dependencies. Please make sure that all Storybook dependencies are using the same version.

wangmeijian commented 1 month ago

You have a mix of Storybook 8 and 7 dependencies. Please make sure that all Storybook dependencies are using the same version.

no, my dependencies version is 8.1.1 all @valentinpalkovic 

"@chromatic-com/storybook": "^1",
"@storybook/addon-essentials": "^8.1.1",
"@storybook/addon-interactions": "^8.1.1",
"@storybook/addon-links": "^8.1.1",
"@storybook/addon-mdx-gfm": "^8.1.1",
"@storybook/blocks": "^8.1.1",
"@storybook/testing-library": "^0.2.2",
"@storybook/vue3": "^8.1.1",
"@storybook/vue3-vite": "^8.1.1",
"storybook": "^8.1.1",