Storybook: Storybook hot reloading causes hooks error

[wgpsutherland]

I get the following error when my storybook hot reloads. It works perfectly on the first load:

TypeError: Cannot read property 'hooks' of undefined
at StoryStore.cleanHooks (http://localhost:9009/vendors~main.0e777466815571a0333e.bundle.js:6197:22)
at renderMain (http://localhost:9009/vendors~main.0e777466815571a0333e.bundle.js:8181:22)
at StoryStore.renderUI (http://localhost:9009/vendors~main.0e777466815571a0333e.bundle.js:8296:9)
at StoryStore.emit (http://localhost:9009/vendors~main.0e777466815571a0333e.bundle.js:6474:35)
at http://localhost:9009/vendors~main.0e777466815571a0333e.bundle.js:5943:16

I am using a redux provider, although I am not sure if it is related. It's code and the stories look like this regardless:

// provider.tsx
const Provider: React.FC = ({ children }) => (
    <ThemeProvider theme={theme}>
        <Provider store={store}>
            <Router>
                {children}
            </Router>
        </Provider>
    </ThemeProvider>
)

export default Provider


// decorators.tsx
export const withProvider = (storyFn: any) => <Provider>
    {storyFn()}
</Provider>


// 2-TodoCard.stories.tsx
const complete = () => <TodoCard todo={completeTodo} />  // the TodoCard is just a React.FC
const incomplete = () => <TodoCard todo={incompleteTodo} />

storiesOf('TodoCard', module)
    .addDecorator(withProvider)
    .add('complete', complete)
    .add('incomplete', incomplete)

webpack.config.js (inside .storybook/ - normal app uses default create-react-app webpack):

module.exports = ({ config }) => {
    config.module.rules.push({
        test: /\.(ts|tsx)$/,
        use: [
            {
                loader: require.resolve('awesome-typescript-loader'),
            },
            // Optional
            {
                loader: require.resolve('react-docgen-typescript-loader'),
            },
        ],
    });
    config.resolve.extensions.push('.ts', '.tsx');
    // config.entry = config.entry.filter(singleEntry => !singleEntry.includes('/webpack-hot-middleware/'));  // hot reloading causing a hooks bug
    return config;
};

[shilman]

@wgpsutherland Have you tried 4.3.0-alpha.x? There are one or more related bugfixes there that haven't made it back to latest yet. cc @Hypnosphi

[wgpsutherland]

Hey, thanks for the reply. I upgraded from

devDependencies": {
    "@storybook/addon-actions": "^5.2.1",
    "@storybook/addon-info": "^5.2.1",
    "@storybook/addon-links": "^5.2.1",
    "@storybook/addons": "^5.2.1",
    "@storybook/react": "^5.2.1",
    "@types/storybook__react": "^4.0.2"
 }

to

"devDependencies": {
    "@storybook/addon-actions": "^5.3.0-alpha.11",
    "@storybook/addon-info": "^5.3.0-alpha.11",
    "@storybook/addon-links": "^5.3.0-alpha.11",
    "@storybook/addons": "^5.3.0-alpha.11",
    "@storybook/react": "^5.3.0-alpha.11",
    "@types/storybook__react": "^4.0.2"
  }

and the issue still persists

[shilman]

@wgpsutherland Thanks for trying. Can you try disabling addon-info? It's been mostly replaced by addon-docs and it wouldn't surprise me if it's what's causing the problem.

[Hypnosphi]

@wgpsutherland does it happen on any code change?

[wgpsutherland]

@shilman I'm afraid it still happens after removing addon-info.
@Hypnosphi the error happens when modifying the story code of the story the browser is on, and the story you just changed disappears from the sidebar and the error is persistent across all other stories. When you modify the code of a story the browser is not currently navigated to, the story that you modified disappears from the sidebar, and the other stories continue to work, including the one you were navigated to.

[gpawlik]

I think the following method: https://github.com/storybookjs/storybook/blob/next/lib/client-api/src/story_store.ts#L399 should be changed to something safer, eg.:

cleanHooks(id: string) {
    this._data[id] && this._data[id].hooks.clean();
}

[MarkLyck]

I'm having this issue as well.

[Hypnosphi]

@wgpsutherland I tried to reproduce this in our own setup, and it happens only when I rename a story. If you're saying that in your case it also happens on any change in story _code_ (as opposed to the name), please create a GitHub repo with minimal reproduction

[wgpsutherland]

@Hypnosphi it happens every time I change the code in the story or in the component. I've created this repo that reproduces the issue: https://github.com/wgpsutherland/storybook-hotreload-repro
Please let me know if you can't reproduce, I've done a clean git clone of this repo and it does reproduce the error for me.

[Hypnosphi]

@wgpsutherland Looks like you're mixing Component Story Format and storiesOf API in your stories:

export default {
    title: 'Button',
};

storiesOf('Button', module)
    .add('gray', () => <Button color='gray' fluid size='large' type='submit'>Add</Button>)
    .add('blue', () => <Button color='blue' fluid size='large' type='submit'>Add</Button>)

You have to pick one. So it should be either

export default {
    title: 'Button',
};

export const gray = () => <Button color='gray' fluid size='large' type='submit'>Add</Button>
export const blue = () => <Button color='blue' fluid size='large' type='submit'>Add</Button>

or

storiesOf('Button', module)
    .add('gray', () => <Button color='gray' fluid size='large' type='submit'>Add</Button>)
    .add('blue', () => <Button color='blue' fluid size='large' type='submit'>Add</Button>)

[Hypnosphi]

@shilman I think we should show some warning when CSF and storiesOf are mixed inside a single file.

Also, we should warn when duplicate kinds are declared, like we do with stories. Duplicate kind declaration is the actual cause of stories disappearing from sidebar: during HMR, the kind gets cleaned up twice, and the second time happens after adding the fresh versions of the stories.

[Hypnosphi]

Tu sum up, there are two issues here:

1. Stories get removed on HMR. The fix is to deduplicate kind declarations, i.e. pick one from export default and storiesOf
2. When you remove a story, an exception is thrown. Fixed by #8408

[shilman]

@Hypnosphi In the first version of CSF I actually forbid duplicate kinds. Then I re-enabled it due to this PR from @hipstersmoothie, which I tested (but perhaps not thoroughly enough). Can you take a look: https://github.com/storybookjs/storybook/pull/8133

[Hypnosphi]

@shilman Let's add duplicate kinds in official-storybooks and test how HMR works?

[Hypnosphi]

@shilman BTW #8133 was released in alpha.12 while the repro uses alpha.11 and I still see no warning here, probably because only one of kind declarations is CSF.

I can reproduce the HMR issue using two plain storiesOf calls with the same kind in different files.

[shilman]

Egads!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.0-alpha.18 containing PR #8411 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.

[Hypnosphi]

Issue with HMR not fixed yet

[shilman]

Ermahgerd!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.2.4 containing PR #8411 that references this issue. Upgrade today to try it out!

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

[selrond]

Not sure how is #8411 fixing it, as I don't use storiesOf in my app at all, but it works!

[Hypnosphi]

@selrond I think it was #8408 in your case

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!