gaearon / gaearon/react-hot-loader
RHL + linked package affects a result of the __webpack_require__
- 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
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