-
Notifications
You must be signed in to change notification settings - Fork 800
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
docs: update create-react-app migration #729
Conversation
Where is babel-loader? |
Codecov Report
@@ Coverage Diff @@
## next #729 +/- ##
=======================================
Coverage 71.42% 71.42%
=======================================
Files 12 12
Lines 420 420
Branches 89 128 +39
=======================================
Hits 300 300
+ Misses 93 87 -6
- Partials 27 33 +6
Continue to review full report at Codecov.
|
PS: What about https://github.com/cdharris/react-app-rewire-hot-loader ? |
Whoops. I apologize, i have missed babel loader. I will try now to eject and add babel loader and also will try https://github.com/cdharris/react-app-rewire-hot-loader. |
@Grimones - it is better to continue with this PR. To have a history. |
Okay. As you asked i have installed react-app-rewire-hot-loader Also i have tried to add 3 hocs. TestComponent and HOCs have their own state with counter. I have read When adding first hoc to the TestComponent i get React-hot-loader: a _class6 was found where a Component was expected.
function _class6() {
var _ref3;
var _temp3, _this5, _ret3;
_classCallCheck(this, _class6);
for (var _len3 = arguments.length, args = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
args[_key3] = arguments[_key3];
}
return _ret3 = (_temp3 = (_this5 = _possibleConstructorReturn(this, (_ref3 = _class6.__proto__ || Object.getPrototypeOf(_class6)).call.apply(_ref3, [this].concat(args))), _this5), _this5.state = {
counter: 0
}, _temp3), _possibleConstructorReturn(_this5, _ret3);
}
flow.forEach | @ | hotReplacementRender.js:177
-- | -- | --
| hotReplacementRender | @ | hotReplacementRender.js:139
| next | @ | hotReplacementRender.js:151
| flow.forEach | @ | hotReplacementRender.js:160
| hotReplacementRender | @ | hotReplacementRender.js:139
| next | @ | hotReplacementRender.js:151
| flow.forEach | @ | hotReplacementRender.js:168
| hotReplacementRender | @ | hotReplacementRender.js:139
| ./node_modules/react-hot-loader/lib/reconciler/hotReplacementRender.js.exports.default | @ | hotReplacementRender.js:190
| componentWillReceiveProps | @ | AppContainer.dev.js:57
| callComponentWillReceiveProps | @ | react-dom.development.js:6389
| updateClassInstance | @ | react-dom.development.js:6575
| updateClassComponent | @ | react-dom.development.js:7848
| beginWork | @ | react-dom.development.js:8225
| performUnitOfWork | @ | react-dom.development.js:10224
| workLoop | @ | react-dom.development.js:10288
| callCallback | @ | react-dom.development.js:542
| invokeGuardedCallbackDev | @ | react-dom.development.js:581
| invokeGuardedCallback | @ | react-dom.development.js:438
| renderRoot | @ | react-dom.development.js:10366
| performWorkOnRoot | @ | react-dom.development.js:11014
| performWork | @ | react-dom.development.js:10967
| requestWork | @ | react-dom.development.js:10878
| scheduleWorkImpl | @ | react-dom.development.js:10732
| scheduleWork | @ | react-dom.development.js:10689
| enqueueForceUpdate | @ | react-dom.development.js:6250
| ./node_modules/react/cjs/react.development.js.Component.forceUpdate | @ | react.development.js:255
| getInstances.forEach.inst | @ | utils.dev.js:33
| setTimeout | @ | utils.dev.js:33
| setTimeout (async) | |
| updateInstances | @ | utils.dev.js:33
| sourceModule.hot.addStatusHandler.status | @ | utils.dev.js:45
| hotSetStatus | @ | bootstrap f21f7b7…:201
| hotApply | @ | bootstrap f21f7b7…:547
| (anonymous) | @ | bootstrap f21f7b7…:288
| Promise resolved (async) | |
| hotUpdateDownloaded | @ | bootstrap f21f7b7…:287
| hotAddUpdateChunk | @ | bootstrap f21f7b7…:264
| webpackHotUpdateCallback | @ | bootstrap f21f7b7…:7
| (anonymous) And TestComponent is refreshed, counter starts from beginning. This is what i get when i add second HOC React-hot-loader: a _class4 was found where a Component was expected.
function _class4() {
var _ref2;
var _temp2, _this3, _ret2;
_classCallCheck(this, _class4);
for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
return _ret2 = (_temp2 = (_this3 = _possibleConstructorReturn(this, (_ref2 = _class4.__proto__ || Object.getPrototypeOf(_class4)).call.apply(_ref2, [this].concat(args))), _this3), _this3.state = {
counter: 0
}, _temp2), _possibleConstructorReturn(_this3, _ret2);
}
flow.forEach | @ | hotReplacementRender.js:177
-- | -- | --
| hotReplacementRender | @ | hotReplacementRender.js:139
| next | @ | hotReplacementRender.js:151
| flow.forEach | @ | hotReplacementRender.js:160
| hotReplacementRender | @ | hotReplacementRender.js:139
| next | @ | hotReplacementRender.js:151
| flow.forEach | @ | hotReplacementRender.js:168
| hotReplacementRender | @ | hotReplacementRender.js:139
| ./node_modules/react-hot-loader/lib/reconciler/hotReplacementRender.js.exports.default | @ | hotReplacementRender.js:190
| componentWillReceiveProps | @ | AppContainer.dev.js:57
| callComponentWillReceiveProps | @ | react-dom.development.js:6389
| updateClassInstance | @ | react-dom.development.js:6575
| updateClassComponent | @ | react-dom.development.js:7848
| beginWork | @ | react-dom.development.js:8225
| performUnitOfWork | @ | react-dom.development.js:10224
| workLoop | @ | react-dom.development.js:10288
| callCallback | @ | react-dom.development.js:542
| invokeGuardedCallbackDev | @ | react-dom.development.js:581
| invokeGuardedCallback | @ | react-dom.development.js:438
| renderRoot | @ | react-dom.development.js:10366
| performWorkOnRoot | @ | react-dom.development.js:11014
| performWork | @ | react-dom.development.js:10967
| requestWork | @ | react-dom.development.js:10878
| scheduleWorkImpl | @ | react-dom.development.js:10732
| scheduleWork | @ | react-dom.development.js:10689
| enqueueForceUpdate | @ | react-dom.development.js:6250
| ./node_modules/react/cjs/react.development.js.Component.forceUpdate | @ | react.development.js:255
| getInstances.forEach.inst | @ | utils.dev.js:33
| setTimeout | @ | utils.dev.js:33
| setTimeout (async) | |
| updateInstances | @ | utils.dev.js:33
| sourceModule.hot.addStatusHandler.status | @ | utils.dev.js:45
| hotSetStatus | @ | bootstrap f21f7b7…:201
| hotApply | @ | bootstrap f21f7b7…:547
| (anonymous) | @ | bootstrap f21f7b7…:288
| Promise resolved (async) | |
| hotUpdateDownloaded | @ | bootstrap f21f7b7…:287
| hotAddUpdateChunk | @ | bootstrap f21f7b7…:264
| webpackHotUpdateCallback | @ | bootstrap f21f7b7…:7
| (anonymous) TestComponent and HOC gets refreshed And when i add the third HOC React-hot-loader: a _class2 was found where a Component was expected.
function _class2() {
var _ref;
var _temp, _this, _ret;
_classCallCheck(this, _class2);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = _class2.__proto__ || Object.getPrototypeOf(_class2)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
counter: 0
}, _temp), _possibleConstructorReturn(_this, _ret);
}
flow.forEach | @ | hotReplacementRender.js:177
-- | -- | --
| hotReplacementRender | @ | hotReplacementRender.js:139
| next | @ | hotReplacementRender.js:151
| flow.forEach | @ | hotReplacementRender.js:160
| hotReplacementRender | @ | hotReplacementRender.js:139
| next | @ | hotReplacementRender.js:151
| flow.forEach | @ | hotReplacementRender.js:168
| hotReplacementRender | @ | hotReplacementRender.js:139
| ./node_modules/react-hot-loader/lib/reconciler/hotReplacementRender.js.exports.default | @ | hotReplacementRender.js:190
| componentWillReceiveProps | @ | AppContainer.dev.js:57
| callComponentWillReceiveProps | @ | react-dom.development.js:6389
| updateClassInstance | @ | react-dom.development.js:6575
| updateClassComponent | @ | react-dom.development.js:7848
| beginWork | @ | react-dom.development.js:8225
| performUnitOfWork | @ | react-dom.development.js:10224
| workLoop | @ | react-dom.development.js:10288
| callCallback | @ | react-dom.development.js:542
| invokeGuardedCallbackDev | @ | react-dom.development.js:581
| invokeGuardedCallback | @ | react-dom.development.js:438
| renderRoot | @ | react-dom.development.js:10366
| performWorkOnRoot | @ | react-dom.development.js:11014
| performWork | @ | react-dom.development.js:10967
| requestWork | @ | react-dom.development.js:10878
| scheduleWorkImpl | @ | react-dom.development.js:10732
| scheduleWork | @ | react-dom.development.js:10689
| enqueueForceUpdate | @ | react-dom.development.js:6250
| ./node_modules/react/cjs/react.development.js.Component.forceUpdate | @ | react.development.js:255
| getInstances.forEach.inst | @ | utils.dev.js:33
| setTimeout | @ | utils.dev.js:33
| setTimeout (async) | |
| updateInstances | @ | utils.dev.js:33
| sourceModule.hot.addStatusHandler.status | @ | utils.dev.js:45
| hotSetStatus | @ | bootstrap f21f7b7…:201
| hotApply | @ | bootstrap f21f7b7…:547
| (anonymous) | @ | bootstrap f21f7b7…:288
| Promise resolved (async) | |
| hotUpdateDownloaded | @ | bootstrap f21f7b7…:287
| hotAddUpdateChunk | @ | bootstrap f21f7b7…:264
| webpackHotUpdateCallback | @ | bootstrap f21f7b7…:7
| (anonymous) And again all of them gets refreshed. Finally when all HOCs are set i'm able to modify render method in HOCs and TestComponent without refreshing them and loosing state. On modifying lifecycle methods i get React-stand-in: You did update _class6 s lifecycle method ƒ componentDidMount() {
var _this6 = this;
this.interval = setInterval(function () {
_this6.setState(function (prevState) {
return {
counter: prevSt… . Unable to repeat
__stack_frame_overlay_proxy_console__ | @ | index.js:2177
-- | -- | --
| _reactUtils.reactLifeCycleMethods.forEach.key | @ | inject.js:84
| checkLifeCycleMethods | @ | inject.js:82
| update | @ | createClassProxy.js:131
| ./node_modules/react-hot-loader/lib/reconciler/proxies.js.exports.updateProxyById | @ | proxies.js:51
| flow.forEach | @ | hotReplacementRender.js:173
| hotReplacementRender | @ | hotReplacementRender.js:139
| next | @ | hotReplacementRender.js:151
| flow.forEach | @ | hotReplacementRender.js:160
| hotReplacementRender | @ | hotReplacementRender.js:139
| next | @ | hotReplacementRender.js:151
| flow.forEach | @ | hotReplacementRender.js:175
| hotReplacementRender | @ | hotReplacementRender.js:139
| next | @ | hotReplacementRender.js:151
| flow.forEach | @ | hotReplacementRender.js:160
| hotReplacementRender | @ | hotReplacementRender.js:139
| next | @ | hotReplacementRender.js:151
| flow.forEach | @ | hotReplacementRender.js:175
| hotReplacementRender | @ | hotReplacementRender.js:139
| next | @ | hotReplacementRender.js:151
| flow.forEach | @ | hotReplacementRender.js:160
| hotReplacementRender | @ | hotReplacementRender.js:139
| next | @ | hotReplacementRender.js:151
| flow.forEach | @ | hotReplacementRender.js:168
| hotReplacementRender | @ | hotReplacementRender.js:139
| ./node_modules/react-hot-loader/lib/reconciler/hotReplacementRender.js.exports.default | @ | hotReplacementRender.js:190
| componentWillReceiveProps | @ | AppContainer.dev.js:57
| callComponentWillReceiveProps | @ | react-dom.development.js:6389
| updateClassInstance | @ | react-dom.development.js:6575
| updateClassComponent | @ | react-dom.development.js:7848
| beginWork | @ | react-dom.development.js:8225
| performUnitOfWork | @ | react-dom.development.js:10224
| workLoop | @ | react-dom.development.js:10288
| callCallback | @ | react-dom.development.js:542
| invokeGuardedCallbackDev | @ | react-dom.development.js:581
| invokeGuardedCallback | @ | react-dom.development.js:438
| renderRoot | @ | react-dom.development.js:10366
| performWorkOnRoot | @ | react-dom.development.js:11014
| performWork | @ | react-dom.development.js:10967
| requestWork | @ | react-dom.development.js:10878
| scheduleWorkImpl | @ | react-dom.development.js:10732
| scheduleWork | @ | react-dom.development.js:10689
| enqueueForceUpdate | @ | react-dom.development.js:6250
| ./node_modules/react/cjs/react.development.js.Component.forceUpdate | @ | react.development.js:255
| getInstances.forEach.inst | @ | utils.dev.js:33
| setTimeout | @ | utils.dev.js:33
| setTimeout (async) | |
| updateInstances | @ | utils.dev.js:33
| sourceModule.hot.addStatusHandler.status | @ | utils.dev.js:45
| hotSetStatus | @ | bootstrap f21f7b7…:201
| hotApply | @ | bootstrap f21f7b7…:547
| (anonymous) | @ | bootstrap f21f7b7…:288
| Promise resolved (async) | |
| hotUpdateDownloaded | @ | bootstrap f21f7b7…:287
| hotAddUpdateChunk | @ | bootstrap f21f7b7…:264
| webpackHotUpdateCallback | @ | bootstrap f21f7b7…:7
| (anonymous) And nothing happens, any reload or loosing state. |
If you will add a new hoc it will cause state loss, as log tree is absolutely different. As I understand - all works as expected. Could you confirm that |
@Grimones thanks, that's awesome! |
@Grimones yep |
I close it but we can continue discussion here. |
Yes, I can confirm that https://github.com/Grimones/cra-rhl/commit/4ed74af2dc649301695f67df05a12f210fb7820c |
@neoziro - maybe it worth to point on |
Why not, or including it in this project if it is working great. |
Oh no! @Grimones - your example got lost! |
@Grimones - 😭😿😞 |
OMG 😞 |
I am not CRA/Rewire expert - so it's up to you. |
I also can assure that react-app-rewire-hot-loader works without ejecting. |
create-react-app react 16.7 alpha 2, not working without ejecting, getting the hooks error message. |
Let me double check. Probably I could change default settings for RHL and fix hooks(more or less) for everyone. |
Working example of using react-hot-leader in CRA without ejecting with the help of react-app-rewire-hot-loader can be seen here |
@mytee306 - could you explain how to make it work to help me update README? |
@theKashey The react-app-rewire-hot-loader README has simple instructions. You may use it as a reference. |
@mytee306 your example lost too 😿 |
Fixed now, thanks for the heads up :) |
Hi! @neoziro have asked to test v4 with create-react-app
#595 (comment)
i have tested it and reported results to neoziro in gitter. But i guess you don't use it very often so i decided to make a small pull request changing the docs.
Commit with implementation
https://github.com/Grimones/cra-rhl/commit/af6df09d7677c22aa753e03d8641cebe93ac8644