Storybook: Hot reload removes any providers if config is provided via main.js (React, MDX)

Created on 19 Dec 2019  路  4Comments  路  Source: storybookjs/storybook

Describe the bug
If a hot reload occurs any component that is wrapped via addDecorator will be 'gone'. If you're using things like contexts that could crash your Storybook completely, and you need to refresh to recover from it. This ONLY occurs if you provide your stories config via main.js. If you move that config back to preview.js via configure, everything works fine.

To Reproduce
I've created a minimal reproduction repo: https://github.com/JeroenReumkens/sb-hotreload-reproduction

  • Start Storybook via npm run storybook
  • Check the example story
  • See that the background is red, and that the context has a value of "initial value".
  • Open test.jsx and change for example the text inside the div, so a hot reload occurs
  • See the error Cannot read property 'value' of null
  • You could also comment out the usage of the context inside test.jsx and see that if it hot reloads the red div would also be gone.

  • Now remove the stories entry from main.js and enable the configure line in preview.js. Restart Storybook and follow the exact same steps defined above, and notice that this problem doesn't occur.

Expected behavior

  • The behaviour should be equal to when you use configure via preview.js. That means a hot reload should not remove any components wrapped around a story during hot reload.

System:
Please paste the results of npx -p @storybook/cli@next sb info here.

System: OS: macOS 10.15.1 CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz Binaries: Node: 10.15.0 - ~/.nvm/versions/node/v10.15.0/bin/node Yarn: 1.13.0 - ~/.nvm/versions/node/v10.15.0/bin/yarn npm: 6.4.1 - ~/.nvm/versions/node/v10.15.0/bin/npm Browsers: Chrome: 79.0.3945.79 Firefox: 70.0.1 Safari: 13.0.3 npmPackages: @storybook/addon-docs: ^5.3.0-beta.31 => 5.3.0-beta.31 @storybook/cli: ^5.3.0-beta.31 => 5.3.0-beta.31 @storybook/react: ^5.3.0-beta.31 => 5.3.0-beta.31

bug core high priority

Most helpful comment

Gadzooks!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.0-rc.12 containing PR #9354 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

All 4 comments

Thank you for the bug report @JeroenReumkens

I have a good idea on where to fix this, would you be interested in contributing? perhaps in a pair-programming way?

I'll work on this tomorrow

PR is open!

Gadzooks!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.0-rc.12 containing PR #9354 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

Was this page helpful?
0 / 5 - 0 ratings