Story source code in addon-docs only updating with every other change to controls

Describe the bug We are having two issues with code snippets which I think are actually symptoms of the same problem:

• Freshly loaded pages on Storybook don’t display the correct story source
• Changes to controls are reflected immediately in the story, but the code snippet is only updated on every SECOND change to the controls (for example, if I toggle a boolean control from false to true, the change doesn’t show. If I then toggle a second boolean control, both changes are reflected in the story source)

The update of the source can also be triggered by clicking on the name of another story within the same group. Editing a control value or clicking on a story name also resolves the fresh-load issue, which is why I suspect they have the same root cause.

When running in local development mode, the hot reload sometimes also causes the source to render properly, but that is lost upon a full page refresh.

To Reproduce Unfortunately our storybook is private, so I don’t have a working demo yet.

System

Environment Info:

  System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
  Binaries:
    Node: 12.21.0 - /usr/local/opt/node@12/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.11 - /usr/local/opt/node@12/bin/npm
  Browsers:
    Chrome: 90.0.4430.85
    Safari: 13.1.3
  npmPackages:
    @storybook/addon-a11y: 6.2.2 => 6.2.2 
    @storybook/addon-actions: 6.2.2 => 6.2.2 
    @storybook/addon-docs: 6.2.2 => 6.2.2 
    @storybook/addon-essentials: 6.2.2 => 6.2.2 
    @storybook/addon-knobs: 6.2.2 => 6.2.2 
    @storybook/addon-links: 6.2.2 => 6.2.2 
    @storybook/addon-postcss: ^2.0.0 => 2.0.0 
    @storybook/addons: 6.2.2 => 6.2.2 
    @storybook/react: 6.2.2 => 6.2.2 
    @storybook/source-loader: 6.2.2 => 6.2.2 
    @storybook/storybook-deployer: ^2.8.7 => 2.8.7 
    @storybook/theming: 6.2.2 => 6.2.2 

Additional context We are using the Template.bind({}) approach—stories that don’t use this don’t seem to experience the issue.

We are using custom webpack configuration, but nothing related to source loading—that is coming from @storybook/addon-docs. We were using addon-storysource as well but removing that did not resolve the issue.

main.js

module.exports = {
  stories: [
    '../../[redacted path]/src/**/*.stories.tsx',
    '../../[redacted path]/src/**/*.stories.tsx',
    '../../[redacted path]/src/**/*.stories.tsx',
    '../../[redacted path]/src/**/*.stories.tsx',
    '../../[redacted path]/src/Icon.stories.tsx',
  ],
  addons: [
    '@storybook/addon-postcss',
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-knobs',
    'storybook-readme',
    '@storybook/addon-a11y',
    'storybook-addon-playroom',
  ]
}

[shilman]

Glad to hear you got it sorted!! 🚀

[randak]

@shilman After quite a bit of digging, we traced this down to a problem in the code of one of our custom global decorators. One of the layers delays rendering in a way that confuses source-loader. Sorry for the false alarm here. Thanks for your support!