Fluentui: Gatsby - Hot update was not successful

[CrispyBacon1999]

Environment Information

• __gatsby__: ^2.4.0
• __@uifabric/fluent-theme__: ^0.16.7
• __gatsby-plugin-transition-link__: ^1.12.4
• __Chrome__: 74.0.3729.131

Please provide a reproduction of the bug in a codepen:

Running in gatsby. This is where the issue is coming from.
I am using the gatsby plugin gatsby-plugin-transition-link

<Stack>
    <AniLink paintDrip to="/page1">
        <DefaultButton>Page 1</DefaultButton>
    </AniLink>
    <AniLink paintDrip to="/page2">
        <DefaultButton>Page 2</DefaultButton>
    </AniLink>
</Stack>

Actual behavior:

On page load, getting an error.

TypeError: Cannot read property 'render' of undefined
    at DefaultButton.componentRender (react-hot-loader.development.js:2038)
    at DefaultButton.obj.<computed> [as render] (BaseComponent.js:225)
    at finishClassComponent (react-dom.development.js:14741)
    at updateClassComponent (react-dom.development.js:14696)
    at beginWork (react-dom.development.js:15644)
    at performUnitOfWork (react-dom.development.js:19312)
    at workLoop (react-dom.development.js:19352)
    at renderRoot (react-dom.development.js:19435)
    at performWorkOnRoot (react-dom.development.js:20342)
    at performWork (react-dom.development.js:20254)
    at performSyncWork (react-dom.development.js:20228)
    at interactiveUpdates$1 (react-dom.development.js:20495)
    at interactiveUpdates (react-dom.development.js:2170)
    at dispatchInteractiveEvent (react-dom.development.js:4882)

Expected behavior:

Page should load normally with no errors.

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No)

Requested priority: Normal

I'm not sure if it's an issue with Fabric or with the gatsby plugin, but I've been using this plugin for a while. I will submit an issue on that end.

[kenotron]

Gatsby support is very, very new for UI Fabric. We'll be fixing this. Did you use the gatsby-starter-uifabric ??

[CrispyBacon1999]

Yes, I used the starter tempate for it.

[WillianRod]

I'm not using gatsby but still getting the same error. v 6.181.1

I was using two buttons, Default and Primary button. If I use two buttons side to side, the second one get this error. With only one button, works just fine.

[WillianRod]

The problem started when I updated all my dependencies.

Doing some downgrade to see where the problem started, found out that this is a problem with react-hot-loader and the problem started happening with version ^4.7.0 so I downgraded to version 4.6.3 and looks just fine with the latest version of office-ui-fabric-react

[CrispyBacon1999]

@WillianRod that seems to be a temporary fix for it. Not really a feasible one though.

[dzearing]

@kenotron oh hmm, is there anything we're doing bad here wrt react-hot-loader 4.6.3 working but not the latest?

[ronaldborman]

@kenotron FYI I also see the same error when using gatsby-starter-uifabric (after HMR kicks in), although I've only made textual changes to the generated index.tsx. react-hot-loader is at 4.8.4 and office-ui-fabric-react is at 6.176.0. When I downgrade the first to 4.6.3 the problem disappears.

For the record I've created https://github.com/kenotron/gatsby-starter-uifabric/issues/2 so that others are aware of this problem.

[kenotron]

Thanks for reporting - I'll look at it this week as I have time! Looks like I'll have to look a bit at the react-hot-loader dep.