React-hot-loader: Problems updating to React 15.4.0

[albertolive]

Hi @gaearon, as you mentioned in this previous post, apps should not rely on internal APIs. I checked into my node_modules folder and I found that this project requires ReactMount. It's in here

What can I do?

Thank you!

[gaearon]

React Hot Loader 1.x has been unsupported for over a year.
Please switch to 3.x!

[albertolive]

Hi @gaearon!

Sorry, I didn't want to change before a stable version. I switched to 3.x and all works fine.

Thank you again!

[gaearon]

3.x is technically more stable than 1.x IMO.
@calesce What's blocking 3.x release?

[th3fallen]

@gaearon on that topic is there a migration guide? the one i see is migrating TO 1.x not from it

[calesce]

@gaearon @albertolive better/more documentation, and #391 and #313, possibly a few more under 3.0 milestone

[calesce]

@th3fallen check out next-docs

[th3fallen]

So after spending about 2 hours trying to get v3 to work (unsuccessfully, it would detect changes but say they couldnt be reloaded i assume because they're wrapped with HOC's for redux?)
I've given up.

Since v3 is still labeled as a beta would it be possbile to make v1 work until it's the new stable? or is that a big ask?

[calesce]

@th3fallen can you open a separate issue with a reproduce project?

Since v3 is still labeled as a beta would it be possbile to make v1 work until it's the new stable? or is that a big ask?

I don't think so, the focus has been on 3.0 and it has an improved architecture, but still a few bugs. I recommend checking out Dan's blog post.

[omichelsen]

As I understand it, you can't just switch to v3 without also adding the bootstrap <AppContainer /> to your app root?

If there is anyway we could just upgrade and leave that for later, I would appreciate any instructions, because we have a lot of entry points, and this would be a major refactor for us.

[renaudl]

so what is the solution there. roll back react version?

[gaearon]

It doesn't seem very wise to me to roll back a version of a project that is actively being developed (React) in order to keep compatibility with a tool version that was abandoned a long time ago (RHL 1.x).

[gaearon]

If the current approach taken in 3.x doesn't work for you I could see a way to make it work more like 1.x did. But it needs someone to actually work on it. I've been working on hot reloading for a long time and I'd appreciate somebody else taking initiative this time.

[calesce]

As I understand it, you can't just switch to v3 without also adding the bootstrap to your app root?

You can use plain Webpack HMR, where you'd still need to add module.hot.accept calls in each entry point, for starters. You could also probably migrate one entry point at a time if you're concerned about scale of refactoring.

[renaudl]

@gaearon in the long run, I agree but when you have a set of stuck developer you have to pay... Will try to move to 3.X in parallel.

[gaearon]

You can fork and change react/lib/ReactMount to react-dom/lib/ReactMount if you're stuck. But this will too break someday.

[renaudl]

Thanks for advise

[jtangelder]

Adding alias: { 'react/lib/ReactMount': 'react-dom/lib/ReactMount' } to your webpack config fixes this for now. Meanwhile I'm looking forward to see 3 go final! 😉

[ghost]

Thanks for advise @jtangelder

[DimitryDushkin]

After upgrade to React 15.4 I have error

SCRIPT5022: Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `RedBoxError`.

in IE11.

RHL uses RedBox. I've create issue in RedBox for this https://github.com/commissure/redbox-react/issues/82, but I'm no really sure it's RedBox issue. Trying to figure it out.

[gaearon]

Appears related: https://github.com/facebook/react/issues/8379.
Can you share a reproducing example?

[DimitryDushkin]

I'll try Den. Currently I've figured out that only dev build with RHL included is affected. Production build with React 15.4 is okay.

[hyy1115]

@jtangelder good idea

[calesce]

Fixed in 1.3.1 by #430.

This will be the last 1.X release, and ReactMount will continue to be changed on minor versions, so please move to 3.0 as soon as you can.

[DimitryDushkin]

By the way I've found out what was the problem with IE11: problem was within code in node_modules which is excluded in babel loader in webpack (for performance reasons):

var REACT_ELEMENT_TYPE = typeof Symbol === 'function' && Symbol['for'] && Symbol['for']('react.element') || 0xeac7;

At first react requires it when there is no Symbol polyfill and then some code require it where there is Symbol polyfill, so (as far as I understand) on phase "Building VDOM" REACT_ELEMENT_TYPE equals to number and on "validation" phase REACT_ELEMENT_TYPE equals instance of Symbol object.

Still do not understand why it happened, but adding babel-polyfill helped.

UP: even simpler solution https://github.com/thejameskyle/babel-react-optimize/issues/16#issuecomment-263519239

[gaearon]

As for IE11 problem, also see this: https://github.com/facebook/react/issues/8379#issuecomment-264858787.

[codingwesley]

what should i do ？update version to 3

@gaearon i have some question, thx your code.

npm install --save-dev react-hot-loader@next

[bytor99999]

Updating to 3 did not fix the problem. I still get ERROR in ./js/components/inputs/maskedInput.jsx
Module not found: Error: Can't resolve 'react/lib/ReactInputSelection'

going to try the alias suggestion.

[rodoabad]

Upgrading to 3.x now causes a new error.

records.chunkModuleIds[chunk.id] = chunk.mapModules(m => m.id);

chunk.sortModules is not a function

[theKashey]

@rodoabad - it sounds like webpack, not RHL.