question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

`build-storybook --docs` has no effect

See original GitHub issue

Describe the bug

The --docs flag to the build-storybook CLI has no discernible effect (see docs). The flag (when combined with --no-manager-cache) does work with start-storybook. Confirmed on 6.3.7 and 6.4.0-alpha.32.

To Reproduce

Repro repo: https://github.com/kylegach/build-storybook-docs-mode

_I also published the build result to GH Pages: https://kylegach.github.io/build-storybook-docs-mode/_

  1. Add "build-storybook:docs": "build-storybook -s public -o docs --docs" to package.json’s "scripts"
  2. (Literally no other changes)
  3. Run yarn build-storybook:docs
  4. Confirm that the result is the same as yarn build-storybook

System

Environment Info
System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
    Yarn: 3.0.1 - ~/.yarn/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v14.16.0/bin/npm
  Browsers:
    Chrome: 89.0.4389.128
    Firefox: 88.0.1
    Safari: 14.1.1
  npmPackages:
    @storybook/addon-actions: ^6.4.0-alpha.32 => 6.4.0-alpha.32
    @storybook/addon-docs: ^6.4.0-alpha.32 => 6.4.0-alpha.32
    @storybook/addon-essentials: ^6.4.0-alpha.32 => 6.4.0-alpha.32
    @storybook/addon-links: ^6.4.0-alpha.32 => 6.4.0-alpha.32
    @storybook/node-logger: ^6.4.0-alpha.32 => 6.4.0-alpha.32
    @storybook/preset-create-react-app: ^3.2.0 => 3.2.0
    @storybook/react: ^6.4.0-alpha.32 => 6.4.0-alpha.32

Additional context

npx sb@next repro
✔ 🌈 Select the repro framework › react
✔ 📝 Select the repro base template › cra
✔ Enter the output directory … build-storybook-docs-mode
🏃 Running cra into /Users/kg666261/projects/build-storybook-docs-mode

🏃 Starting for cra latest

{
  name: 'cra',
  version: 'latest',
  appName: 'build-storybook-docs-mode',
  creationPath: '/Users/kg666261/projects',
  cwd: '/Users/kg666261/projects/build-storybook-docs-mode',
  e2e: false,
  pnp: false,
  framework: 'react',
  generator: 'npx create-react-app@{{version}} {{appName}} --use-npm && cd {{appName}} && echo "FAST_REFRESH=true" > .env && echo "SKIP_PREFLIGHT_CHECK=true" > .env'
}

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:1
  • Comments:14 (11 by maintainers)

github_iconTop GitHub Comments

2reactions
shilmancommented, Jan 21, 2022

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

npx sb upgrade
2reactions
shilmancommented, Jan 7, 2022

@kylemh Strangely, when I tried it again today it reproduces per your instructions 🤔

I’ve isolated the bug and am looking for a fix. It was nondeterministic because it involves caching. Specifically, we cache the manager UI when we ship Storybook. If your main.js configuration matches the default configuration, it uses the cached build, which doesn’t have DOCS_MODE set. The dev server has a --no-manager-cache flag, but the production build does not.

Therefore we can either:

  • Incorporate --docs into the cache busting behavior
  • Add --no-manager-cache to build-storybook
  • Always build the manager in production (adding ~10s to the build time)

I’m tempted to go with the last option for simplicity’s sake

Read more comments on GitHub >

github_iconTop Results From Across the Web

DocsPage - Storybook - JS.ORG
Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and...
Read more >
Canvas - Storybook
Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and...
Read more >
Build a simple component - Storybook Tutorials
Learn how to develop UIs with components and design systems. Our in-depth frontend guides are created by Storybook maintainers and peer-reviewed by the...
Read more >
Material UI in Storybook
Storybook is a frontend workbench for building UIs in isolation. ... No more inconsistent snapshot tests because fonts load instantly.
Read more >
Configure Storybook
Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found