Next.js: React-hot-loader: Please require react-hot-loader before React.

[u3u]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Console no error

Current Behavior

React-hot-loader: fatal error caused by ƒ BasicLayout()
no instrumentation found. Please require react-hot-loader before React. More in troubleshooting.

Steps to Reproduce (for bugs)

1. Open the page
2. Use next/link to jump to other pages

Your Environment

| Tech | Version |
|---------|---------|
| next | v5.0.0 |
| node | v8.9.0 |
| OS | macOS High Sierra version 10.13.3 |
| browser | Chrome/64.0.3282.140 |

[timneutkens]

Please provide a repository to reproduce this.

[u3u]

@timneutkens
Sorry, I found the reason.
It's caused by the <Layout /> component in antd, but I do not know why.

As long as the use of this component, there will be this problem.

import * as React from 'react'
import { Layout } from 'antd'

const { Header, Content, Footer } = Layout

export default class BasicLayout extends React.Component {
  render() {
    return (
      <Layout>
        <Header />
        <Content />
        <Footer />
      </Layout>
    )
  }
}

[u3u]

antd version of this issue is v3.2.0.
I switch it to v2.13.11 there is no problem.
But I use next/@4.2.3 and antd/@3.2.0 is no problem.

[jadengore]

@u3u Does this resolve it for you? https://github.com/gaearon/react-hot-loader/blob/master/docs/Troubleshooting.md#react-hot-loader-fatal-error-caused-by-xxx---no-instrumentation-found

I have this issue too in my app with a HOC layout component.

[u3u]

@jadengore Thank you very much!
I import the react-hot-loader module and fix it with the hot decorator! 😄
But all pages need this, a bit of trouble. 😕

import { hot } from 'react-hot-loader'
import * as React from 'react'
import styled from 'react-emotion'
import BasicLayout from 'layouts/basic-layout'

const H1 = styled.h1`
  margin: 0.5em;
  text-align: center;
`

@hot(module)
export default class IndexPage extends React.Component {
  public render() {
    return (
      <BasicLayout>
        <H1>Index Page</H1>
      </BasicLayout>
    )
  }
}

[OrangeXC]

@u3u use next/5.0.1-canary.10 and antd/@3.2.3 is no problem.

[u3u]

@OrangeXC
I tried this, but after using next/@5.0.1-canary.10, the problem was even more, I don't know why

[u3u]

This problem seems to be fixed in version 5.0.1-canary.11.
But there is a smaller chance of recurrence, no major impact.

[arnaud-zad]

I still have this problem with 5.0.1-canary.15

[blainegarrett]

I am experiencing this as well in canary.15. In my case the error involves MuiThemeProvider and triggering hot reloading (save, etc). I assume I have something incorrectly setup however.

[mcdyzg]

I am experiencing this without next.
Finally i resovle it with this:

webpack.config.js:

entry: [
        'react-hot-loader/patch',
        './src/app/index.js'
]

[ckeeney]

This is what solved this problem for me:
https://github.com/gaearon/react-hot-loader/issues/894#issuecomment-393005041

[timneutkens]

Just a heads up, react-hot-loader has been removed from the Next.js codebase in next@canary.