gaearon / gaearon/react-hot-loader

react-dom patch can be broken when multiple version of react-hot-loader is installed

Open
#1,222 8 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
12.2k
Forks
775
PR merge metrics
No merged PRs in 30d

Description

If you are reporting a bug or having an issue setting up React Hot Loader, please fill in below. For feature requests, feel free to remove this template entirely.

### Description

I'm encapsulating all webpack and babel configurations into a CLI tool so that `react-hot-loader` may be placed under my tools, however there is another `react-hot-loader` installed from other packages depending on this:

```
/my-app
/node_modules
/react-hot-loader # installed unexpectedly via other packages
/my-cli-tool
/node_modules
/react-hot-loader # the actual one
```

### Expected behavior

We expect everything works fine in such structure.

### Actual behavior

When the actual `react-hot-loader` patches `react-dom`, it generates some error in runtime:

```
Uncaught TypeError: Cannot read property 'hasOwnProperty' of undefined
at eval (react-dom.development.js?61bb:2392)
at eval (react-dom.development.js?61bb:21321)
at Object../node_modules/react-dom/cjs/react-dom.development.js (index.44497f310ddecdb84807.js:1942)
at __webpack_require__ (index.44497f310ddecdb84807.js:724)
at fn (index.44497f310ddecdb84807.js:101)
at eval (index.js?8bc8:37)
at Object../node_modules/react-dom/index.js (index.44497f310ddecdb84807.js:1954)
at __webpack_require__ (index.44497f310ddecdb84807.js:724)
at fn (index.44497f310ddecdb84807.js:101)
at eval (react-hot-loader.development.js?fdf8:10)
```

### To fix

The issue lies in [webpackTagCommonJSExport.js](https://github.com/gaearon/react-hot-loader/blob/master/src/webpack/webpackTagCommonJSExports.js#L7), this file has a `require('react-hot-loader')` statement, however this is a generated code snippet inserted into other files, so this `require` call resolves to the one installed via other package.

I fixed it by mark it as `require('%%REACT_HOT_LOADER_LOCATION%%')` and replace this keyword from its [webpack-loader](https://github.com/gaearon/react-hot-loader/blob/master/src/webpack/index.js#L45) by adding an extra `.replace` there

If this solution is acceptable, I'd like to send a pull request for this

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.