storybook: [Bug]: Nx Project cannot watch and hot reload

Describe the bug

I’m using Nx with storybook. I see storybook used to support --watch and someone broke it but rather than fixing it was removed 🤷🏽.

The problem is that now I’m left unsure how to get storybook to hot reload in an Nx project.

To Reproduce

Create an Nx Project with React and vite Install the storybook plugin

Try adding --watch flag

System

Storybook Environment Info:

  System:
    OS: Linux 5.10 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (16) x64 Intel(R) Core(TM) i9-10980HK CPU @ 2.40GHz
    Shell: 5.2.15 - /bin/bash
  Binaries:
    Node: 20.11.1 - /usr/local/share/nvm/versions/node/v20.11.1/bin/node
    Yarn: 1.22.22 - /usr/bin/yarn <----- active
    npm: 10.2.4 - /usr/local/share/nvm/versions/node/v20.11.1/bin/npm
  npmPackages:
    @storybook/addon-essentials: 7.6.17 => 7.6.17 
    @storybook/addon-interactions: ^7.5.3 => 7.6.17 
    @storybook/core-server: 7.6.17 => 7.6.17 
    @storybook/jest: ^0.2.3 => 0.2.3 
    @storybook/react-vite: 7.6.17 => 7.6.17 
    @storybook/test-runner: ^0.13.0 => 0.13.0 
    @storybook/testing-library: ^0.2.2 => 0.2.2 
    storybook: 7.6.17 => 7.6.17

Additional context

There has to be a workaround for this? It feels like you had something that worked really well… why wouldn’t you just fix it?

About this issue

  • Original URL
  • State: closed
  • Created 3 months ago
  • Comments: 20 (6 by maintainers)

Most upvoted comments

Hey, I took a look at this again today, I set up a new project with Nx and storybook and et voila, it seemed to work right off the bat with hot reloading. No need for the watch flag.

I’m not sure what the issues are with my other project, it might be due to the project locations maybe? I’ll have to investigate but I have something that works which is perfect for now.