React-hot-loader: no instrumentation found. Please require react-hot-loader before React

[urikphytech]

Description

After upgrading to react-hot-loader v 4.0.0 i'm getting an error after updating some components (doesn't happen on every component)

Here's the error:

React-hot-loader: fatal error caused by  ƒ Connect(props, context) {
        _classCallCheck(this, Connect);

        var _this = _possibleConstructorReturn(this, _Component.call(this, props, context));

        _this.version = version;
     …  - no instrumentation found.  Please require react-hot-loader before React. More in troubleshooting.

I read in the troubleshooting guide that I need to import hot before importing react. The thing is, I'm importing react using webpack expose-loader.

Is there another way around this? Do I need to stop using expose-loader? If so, do I need to import hot before every time I import React? Or just the first time?

Expected behavior

Component should reload

Actual behavior

Component doesn't reload and error is shown in console

Environment

react 16.2
react-hot-loader version 4.0.0
webpack 2.6.1
redux 3.5.2

1. node -v:
   v6.10.2
2. npm -v:
   3.10.10 (though i'm using yarn if that matters, yarn version 0.21.3)

Then, specify:

1. Operating system:
   macOS Sierra
2. Browser and version:
   Chrome 65.0.3325.162

[theKashey]

expose-loader don't seems the root cause (but I dont get the point how it works), but there is noone else to blame.
React-hot-loader should be imported before React, and only once.

[rflmyk]

Same when I import hot before react this error happen. There are a clear documentation about that?
For example:

 import { hot } from 'react-hot-loader'
 import React, { Component  } from 'react'

A important details is that I using Redux too.

[theKashey]

This problem going to be partially washed away by #991, as long we will allow component to be not proxied.

[rflmyk]

Cool, but do you can see a work around for while?

[theKashey]

Just yesterdayI thought that this is an impossible case. And it is still impossible.
Having babel plugin, and importing ReactHotLoader before anything else - __always__ works.
Allways, except __one__ case - you have more that one "React" under the hook.

That is actually a common case for us, then we are running example from our examples folder with _linked_ RHL, and example is using nearest React for it, while RHL will use _nearest_ React for it. And they are different.

Please ensure that you are using a single copy of React, or enforce it - https://github.com/gaearon/react-hot-loader/blob/master/examples/styled-components/webpack.config.babel.js#L24

[TaurusWood]

@theKashey , thank u resolve my problem. But I Don't know why I add aliasto solve it？
In webpack documents about Resolve.alias，It only explains:

>
Create aliases to import or require certain modules more easily.

but What did Resolve.alias do，What is the difference between Resolve.alias and webpack's default parsing path?

[theKashey]

Think about webpack aliases as a dependency mocking.
It could be, that you might have more than one version of something - react, styled-components, lodash - anything. You may use yarn resolutions to pin some dependency to a specific version, or use webpack aliases to pin any name to some folder, which actually does the same - pins dependency to a specific version.