docs: update create-react-app migration #729

Grimones · 2017-12-26T23:22:47Z

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

theKashey · 2017-12-26T23:25:54Z

Where is babel-loader?

codecov-io · 2017-12-26T23:26:11Z

Codecov Report

Merging #729 into next will not change coverage.
The diff coverage is n/a.

@@           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

Impacted Files	Coverage Δ
...-hot-loader/src/reconciler/hotReplacementRender.js	`77.18% <0%> (ø)`	⬆️
...es/react-hot-loader/src/reconciler/reactHydrate.js	`55.76% <0%> (ø)`	⬆️
...ages/react-hot-loader/src/reconciler/reactUtils.js	`84.61% <0%> (ø)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 3089850...1c914b9. Read the comment docs.

theKashey · 2017-12-26T23:27:25Z

PS: What about https://github.com/cdharris/react-app-rewire-hot-loader ?

Grimones · 2017-12-26T23:33:40Z

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.
I think you should decline this PR. Where i can write you about results? May be there is an issue with progress on v4 (i saw one but it is closed now)?

theKashey · 2017-12-27T00:09:14Z

@Grimones - it is better to continue with this PR. To have a history.

Grimones · 2017-12-27T00:57:41Z

Okay.
I have forgot to mention that despite i've forgotten to add babel loader it was working fine.
So, i have ejected cra and added babel. As expected - it is working.
Branch https://github.com/Grimones/cra-rhl/tree/react-hot-loader%40next

As you asked i have installed react-app-rewire-hot-loader
And it is working
Commit https://github.com/Grimones/cra-rhl/commit/4ed74af2dc649301695f67df05a12f210fb7820c

Also i have tried to add 3 hocs. TestComponent and HOCs have their own state with counter.
Commit https://github.com/Grimones/cra-rhl/commit/632e93d30a332e3533398e79feacefca0edfbe81

I have read react-stand-in and Known limitations and side effects and i guess that it is expected behaviour. See logs below.

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.

theKashey · 2017-12-27T05:17:01Z

If you will add a new hoc it will cause state loss, as log tree is absolutely different.
If you will modify any class - it may be updated without state loss
If you will change componentDidMount it will not have effect, as long component does not get refreshed. Ie it will be not called.

As I understand - all works as expected.

Could you confirm that react-app-rewire-hot-loader will work without ejecting?

gregberge · 2017-12-27T09:24:22Z

@Grimones thanks, that's awesome!

gregberge · 2017-12-27T10:59:35Z

@Grimones yep babel-loader is missing so we can't merge this PR. I think we could not simplify the migration from create-react-app but maybe we could discuss again about adding it in the project by default.

gregberge · 2017-12-27T11:04:54Z

I close it but we can continue discussion here.

Grimones · 2017-12-27T11:10:29Z

Yes, I can confirm that react-app-rewire-hot-loader works without ejecting

https://github.com/Grimones/cra-rhl/commit/4ed74af2dc649301695f67df05a12f210fb7820c

theKashey · 2017-12-27T11:13:38Z

@neoziro - maybe it worth to point on react-app-rewire-hot-loader in README.

gregberge · 2017-12-27T11:15:30Z

Why not, or including it in this project if it is working great.

theKashey · 2018-05-08T09:18:21Z

Oh no! @Grimones - your example got lost!

theKashey · 2018-06-04T03:24:05Z

@Grimones - 😭😿😞

Grimones · 2018-06-05T14:30:07Z

OMG 😞
I was cleaning up my repositories. I thought that it was a showcase for an issue and deleted it. I apologize.
May be it will be better to add cra example and cra + react-app-rewire-hot-loader here?

theKashey · 2018-06-05T21:42:05Z

I am not CRA/Rewire expert - so it's up to you.

samuelcastro · 2018-10-14T15:58:45Z

I also can assure that react-app-rewire-hot-loader works without ejecting.

eytanronen · 2018-11-22T14:17:12Z

create-react-app react 16.7 alpha 2, not working without ejecting, getting the hooks error message.

theKashey · 2018-11-28T02:21:57Z

Let me double check. Probably I could change default settings for RHL and fix hooks(more or less) for everyone.

mateja176 · 2019-03-31T17:58:31Z

Working example of using react-hot-leader in CRA without ejecting with the help of react-app-rewire-hot-loader can be seen here

theKashey · 2019-03-31T20:50:44Z

@mytee306 - could you explain how to make it work to help me update README?

mateja176 · 2019-03-31T22:39:07Z

@theKashey The react-app-rewire-hot-loader README has simple instructions. You may use it as a reference.

SQReder · 2019-05-06T11:49:26Z

@mytee306 your example lost too 😿

mateja176 · 2019-05-06T12:47:15Z

@mytee306 your example lost too 😿

Fixed now, thanks for the heads up :)

Update create-react-app migration

1c914b9

gregberge closed this Dec 27, 2017

theKashey self-assigned this Apr 1, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs: update create-react-app migration #729

docs: update create-react-app migration #729

Grimones commented Dec 26, 2017

theKashey commented Dec 26, 2017

codecov-io commented Dec 26, 2017

theKashey commented Dec 26, 2017

Grimones commented Dec 26, 2017

theKashey commented Dec 27, 2017

Grimones commented Dec 27, 2017

theKashey commented Dec 27, 2017

gregberge commented Dec 27, 2017

gregberge commented Dec 27, 2017

gregberge commented Dec 27, 2017

Grimones commented Dec 27, 2017

theKashey commented Dec 27, 2017

gregberge commented Dec 27, 2017

theKashey commented May 8, 2018

theKashey commented Jun 4, 2018

Grimones commented Jun 5, 2018

theKashey commented Jun 5, 2018

samuelcastro commented Oct 14, 2018

eytanronen commented Nov 22, 2018

theKashey commented Nov 28, 2018

mateja176 commented Mar 31, 2019 •

edited

Loading

theKashey commented Mar 31, 2019

mateja176 commented Mar 31, 2019

SQReder commented May 6, 2019

mateja176 commented May 6, 2019

docs: update create-react-app migration #729

docs: update create-react-app migration #729

Conversation

Grimones commented Dec 26, 2017

theKashey commented Dec 26, 2017

codecov-io commented Dec 26, 2017

Codecov Report

theKashey commented Dec 26, 2017

Grimones commented Dec 26, 2017

theKashey commented Dec 27, 2017

Grimones commented Dec 27, 2017

theKashey commented Dec 27, 2017

gregberge commented Dec 27, 2017

gregberge commented Dec 27, 2017

gregberge commented Dec 27, 2017

Grimones commented Dec 27, 2017

theKashey commented Dec 27, 2017

gregberge commented Dec 27, 2017

theKashey commented May 8, 2018

theKashey commented Jun 4, 2018

Grimones commented Jun 5, 2018

theKashey commented Jun 5, 2018

samuelcastro commented Oct 14, 2018

eytanronen commented Nov 22, 2018

theKashey commented Nov 28, 2018

mateja176 commented Mar 31, 2019 • edited Loading

theKashey commented Mar 31, 2019

mateja176 commented Mar 31, 2019

SQReder commented May 6, 2019

mateja176 commented May 6, 2019

mateja176 commented Mar 31, 2019 •

edited

Loading