Gatsby - Hot update was not successful

CrispyBacon1999 commented 5 years ago

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 commented 5 years ago

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

CrispyBacon1999 commented 5 years ago

Yes, I used the starter tempate for it.

willianrod commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

dzearing commented 5 years ago

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

ronaldborman commented 5 years ago

@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 commented 5 years ago

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.

ecraig12345 commented 3 years ago

Closing this since a lot of tooling has changed since it was opened and it may no longer be relevant. If this is still a problem, please file a new issue.

microsoft / fluentui