gaearon / gaearon/react-hot-loader

RHL + linked package affects a result of the __webpack_require__

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

Description

### Description

What you are reporting: bug

### Expected behavior

What you think should happen: no errors

### Actual behavior

What actually happens:

Got an error
```
Uncaught TypeError: _assign is not a function
at Object.eval (FallbackCompositionState.js:42)
at eval (FallbackCompositionState.js:117)
at Object../node_modules/@foo/bar/node_modules/react-dom/lib/FallbackCompositionState.js (vendors~c86a8e5207895f0071cd62ec57b3260f.js:2728)
at __webpack_require__ (c86a8e5207895f0071cd62ec57b3260f.js:783)
at fn (c86a8e5207895f0071cd62ec57b3260f.js:151)
at Object.eval (BeforeInputEventPlugin.js:21)
at eval (BeforeInputEventPlugin.js:427)
at Object../node_modules/@foo/bars/node_modules/react-dom/lib/BeforeInputEventPlugin.js (vendors~c86a8e5207895f0071cd62ec57b3260f.js:2524)
at __webpack_require__ (c86a8e5207895f0071cd62ec57b3260f.js:783)
at fn (c86a8e5207895f0071cd62ec57b3260f.js:151)
```
when `react-hot-loader/babel` added to `.babelrc` and some package `@foo/bar` is linked with `npm link`
We had to look at the compiled source to find out what is `_assign`:
`var _assign = __webpack_require__(/*! object-assign */ "./node_modules/@foo/bar/node_modules/object-assign/index.js");`
`_assign` - is an empty object when `react-hot-loader/babel` added to `.babelrc`

There is no problem without `react-hot-loader/babel` or if we install `@foo/bar` without `npm link`

If we start a **build** instead of webpack-dev-server then got another error
```
AppContainer.prod.js:29 Uncaught TypeError: Super expression must either be null or a function, not undefined
at _inherits (AppContainer.prod.js:29)
at eval (AppContainer.prod.js:37)
at eval (AppContainer.prod.js:57)
```

If we look at the compiled code of `AppContainer.prod.js` then we'll see:
```js
// ...
var React = __webpack_require__(/*! react */ "./node_modules/@foo/bar/node_modules/react/react.js");
var Component = React.Component;

var AppContainer = function (_Component) {
_inherits(AppContainer, _Component);

function AppContainer() {
_classCallCheck(this, AppContainer);

return _possibleConstructorReturn(this, (AppContainer.__proto__ || Object.getPrototypeOf(AppContainer)).apply(this, arguments));
}

_createClass(AppContainer, [{
key: 'render',
value: function render() {
if (this.props.component) {
return React.createElement(this.props.component, this.props.props);
}

return React.Children.only(this.props.children);
}
}]);

return AppContainer;
}(Component);
// ...
```
`React` is an empty object (we saw similar behavior in the previous case).

As well there is no problem without `react-hot-loader/babel` or if we install `@foo/bar` without `npm link`

### Environment

RHL: 4.3.7
node: v8.11.3
npm: v6.4.1
webpack: 4.19
babel: 6
MacOS: 10.13.3

.babelrc:
```json
{
"presets": [
"react",
[
"env",
{
"targets": {
"ie": 11
},
"modules": false,
"useBuiltIns": "entry"
}
]
],
"plugins": [
"react-hot-loader/babel",
"external-helpers",
"syntax-dynamic-import",
"transform-async-to-generator",
"transform-class-properties",
"transform-export-extensions",
"transform-object-rest-spread",
"transform-react-remove-prop-types"
]
}
```

The rule for JS-loader in our webpack-config is:
```
{
test: /\.(js|es6)$/,
include: [
config.path.static,
/node_modules\/@foo\//,
],
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: config.path.babelCache
}
}
]
},
```
Also we have `resolve.modules.symlinks: false` in our webpack config cause we are using `npm link`

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the linked-package case with react-hot-loader/babel, the shown .babelrc, webpack JS-loader rule, and resolve.modules.symlinks: false. Compare webpack-dev-server and production builds, then inspect the generated modules around object-assign and React; done means both modes run without the reported empty-object and runtime errors.

Written by the indexing model from the issue text.

Assessment

Tech stack
babel, javascript, react, webpack
Domain
build-system, frontend, tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.