Storybook: Addon-docs: hot module replacement throws error

Created on 7 May 2019 · 20Comments · Source: storybookjs/storybook

Describe the bug
I am using storybook for angular. Since I installed the addon-docs and created my first mdx file, the hot moddule replacement crashes with following error

Unhandled Promise rejection: Manifest request to b3fa85f7c6693e1eaa33.hot-update.json timed out. ; Zone: <root> ; Task: Promise.then ; Value: Error: Manifest request to b3fa85f7c6693e1eaa33.hot-update.json timed out.
at XMLHttpRequest.request.onreadystatechange [as __zone_symbol__ON_PROPERTYreadystatechange] (runtime~main.b3fa85f7c6693e1eaa33.bundle.js:sourcemap:91)
    at XMLHttpRequest.wrapFn (vendors~main.b3fa85f7c6693e1eaa33.bundle.js:sourcemap:208211)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (vendors~main.b3fa85f7c6693e1eaa33.bundle.js:sourcemap:207302)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (vendors~main.b3fa85f7c6693e1eaa33.bundle.js:sourcemap:207074)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (vendors~main.b3fa85f7c6693e1eaa33.bundle.js:sourcemap:207377)
    at invokeTask (vendors~main.b3fa85f7c6693e1eaa33.bundle.js:sourcemap:208623)
    at XMLHttpRequest.globalZoneAwareCallback (vendors~main.b3fa85f7c6693e1eaa33.bundle.js:sourcemap:208649) Error: Manifest request to b3fa85f7c6693e1eaa33.hot-update.json timed out.
    at XMLHttpRequest.request.onreadystatechange [as __zone_symbol__ON_PROPERTYreadystatechange] (http://localhost:6006/runtime~main.b3fa85f7c6693e1eaa33.bundle.js:91:16)
    at XMLHttpRequest.wrapFn (http://localhost:6006/vendors~main.b3fa85f7c6693e1eaa33.bundle.js:208211:39)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:6006/vendors~main.b3fa85f7c6693e1eaa33.bundle.js:207302:31)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (http://localhost:6006/vendors~main.b3fa85f7c6693e1eaa33.bundle.js:207074:47)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (http://localhost:6006/vendors~main.b3fa85f7c6693e1eaa33.bundle.js:207377:34)
    at invokeTask (http://localhost:6006/vendors~main.b3fa85f7c6693e1eaa33.bundle.js:208623:14)
    at XMLHttpRequest.globalZoneAwareCallback (http://localhost:6006/vendors~main.b3fa85f7c6693e1eaa33.bundle.js:208649:17)

To Reproduce
Steps to reproduce the behavior:

Set up storybook for angular
Install and configure addon-docs
Create mdx

Expected behavior
Hot module replacement should work.

System:

OS: MacOS
Device: Macbook Pro 2018
Browser: chrome
Framework: angular
Addons: docs
Version: 5.2.0-alpha.3

docs inactive question / support

Source

glappsi

👍2

Most helpful comment

This is happening for me in a pretty big project. Let me try to delete everything but the storybook story so you have an accurate reproduction 👍

rijkvanzanten on 20 Jan 2020

❤2

All 20 comments

@glappsi Sorry I missed this one. Are you still seeing this issue on the latest beta?

shilman on 24 Jul 2019

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] on 15 Aug 2019

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!

stale[bot] on 14 Sep 2019

Hi @shilman, I'm encountering this issue on 5.3.3 using mdx + vue files for stories. It also seems to prevent me from refreshing the page with CMD+R; although I'm not a 100% sure if that's caused by the same error.

rijkvanzanten on 16 Jan 2020

@rijkvanzanten this exact error? i thought zone-xxx was an angular thing..

shilman on 16 Jan 2020

Hmm, same symptom caused by something else

runtime~main.c914f7f22c1adf320e20.bundle.js:sourcemap:92 Uncaught (in promise) Error: Manifest request to c914f7f22c1adf320e20.hot-update.json timed out.
    at XMLHttpRequest.request.onreadystatechange (runtime~main.c914f7f22c1adf320e20.bundle.js:sourcemap:92)
request.onreadystatechange @ runtime~main.c914f7f22c1adf320e20.bundle.js:sourcemap:92
Promise.then (async)
check @ vendors~main.c914f7f22c1adf320e20.bundle.js:sourcemap:195524
push../node_modules/webpack-hot-middleware/process-update.js.module.exports @ vendors~main.c914f7f22c1adf320e20.bundle.js:sourcemap:195486
processMessage @ vendors~main.c914f7f22c1adf320e20.bundle.js:sourcemap:195379
handleMessage @ vendors~main.c914f7f22c1adf320e20.bundle.js:sourcemap:195239
handleMessage @ vendors~main.c914f7f22c1adf320e20.bundle.js:sourcemap:195202

rijkvanzanten on 16 Jan 2020

It starts happening to me as soon as I have more than 1 <Story> component inside a <Preview> component.

Works:

<Preview mdxSource={`<v-icon name="person" color="--blue-grey" />`}>
    <Story name='intro' height='40px'>{{
    components: { VIcon },
    template: '<v-icon name="person" color="--blue-grey" />',
    }}</Story>
</Preview>

Causes the error:

<Preview mdxSource={`
<v-icon name="star" color="--light-blue" sup />
<v-icon name="accessibility_new" color="--red" x-small />
<v-icon name="warning" color="--purple" small />
<v-icon name="gesture" color="--blue" />
<v-icon name="security" color="--green" large />
<v-icon name="person" color="--orange" x-large />
`}>
    <Story name="sup" height="60px">
        {{
            components: { VIcon },
            template: `<v-icon name="star" color="--light-blue" sup />`
        }}
    </Story>
    <Story name="x-small" height="60px">
        {{
            components: { VIcon },
            template: `<v-icon name="accessibility_new" color="--red" x-small />`
        }}
    </Story>
    <Story name="small" height="60px">
        {{
            components: { VIcon },
            template: `<v-icon name="warning" color="--purple" small />`
        }}
    </Story>
    <Story name="default" height="60px">
        {{
            components: { VIcon },
            template: `<v-icon name="gesture" color="--blue" />`
        }}
    </Story>
    <Story name="large" height="60px">
        {{
            components: { VIcon },
            template: `<v-icon name="security" color="--green" large />`
        }}
    </Story>
    <Story name="x-large" height="60px">
        {{
            components: { VIcon },
            template: `<v-icon name="person" color="--orange" x-large />`
        }}
    </Story>
</Preview>

rijkvanzanten on 16 Jan 2020

Scratch that, I'm seeing it without multiple items per preview now too. Maybe it's caused by the total item of elements.. ?

rijkvanzanten on 17 Jan 2020

@rijkvanzanten Are you using Vue inline story rendering in SB Docs, or iframes?

shilman on 18 Jan 2020

I tried both, doesn't seem to make a difference

rijkvanzanten on 18 Jan 2020

@rijkvanzanten I tried adding your example to our vue-kitchen-sink and could not repro. Can you check your setup?

Example: https://github.com/storybookjs/storybook/commit/ee29dbaf0aaf01a95f94bc88a6f9e6276653acaf

shilman on 19 Jan 2020

This is happening for me in a pretty big project. Let me try to delete everything but the storybook story so you have an accurate reproduction 👍

rijkvanzanten on 20 Jan 2020

❤2

I get this error all the time and now the only way I can fix it is by restarting the server which is really painful. I did notice that it seems to happen with particular stories. Once those stories are introduced, everytime there is an update I get a similar hot update error message. Below is a snapshot of my deps that might be helpful.

    "@angular/core": "^8.2.14",
    "@storybook/addon-actions": "5.3.5",
    "@storybook/addon-centered": "5.3.5",
    "@storybook/addon-docs": "5.3.5",
    "@storybook/addon-knobs": "5.3.5",
    "@storybook/addon-links": "5.3.5",
    "@storybook/addon-notes": "5.3.5",
    "@storybook/addon-storysource": "5.3.5",
    "@storybook/addon-viewport": "5.3.5",
    "@storybook/addons": "5.3.5",
    "@storybook/angular": "5.3.5",
    "@storybook/react": "5.3.5",
    "@storybook/source-loader": "5.3.5",