compatibility with React v16

[ali1k]

I want to upgrade to react 16, however I get some errors when I try to run the fluxible. It seems to be related to the rehydration/dehydration part.

react-dom.development.js:13921 Warning: render(): Calling ReactDOM.render() to hydrate server-rendered markup will stop working in React v17. Replace the ReactDOM.render() call with ReactDOM.hydrate() if you want React to attach to the server HTML.
printWarning @ react-dom.development.js:13921
lowPriorityWarning$1 @ react-dom.development.js:13940
renderSubtreeIntoContainer @ react-dom.development.js:17098
render @ react-dom.development.js:17129
(anonymous) @ client.js:41
(anonymous) @ promiseCallback.js:21
Promise resolved (async)
promiseCallback @ promiseCallback.js:20
rehydrate @ Fluxible.js:215
(anonymous) @ client.js:33
(anonymous) @ main.js:11183
__webpack_require__ @ main.js:678
fn @ main.js:88
(anonymous) @ client:3
(anonymous) @ main.js:10850
__webpack_require__ @ main.js:678
(anonymous) @ main.js:724
(anonymous) @ main.js:727

invariant.js:42 Uncaught Error: Element ref was specified as a string (wrappedElement) but no owner was set. You may have multiple copies of React loaded. (details: https://fb.me/react-refs-must-have-owner).
    at invariant (invariant.js:42)
    at coerceRef (react-dom.development.js:8579)
    at reconcileSingleElement (react-dom.development.js:9379)
    at reconcileChildFibers (react-dom.development.js:9477)
    at reconcileChildrenAtPriority (react-dom.development.js:10127)
    at reconcileChildren (react-dom.development.js:10118)
    at finishClassComponent (react-dom.development.js:10254)
    at updateClassComponent (react-dom.development.js:10226)
    at beginWork (react-dom.development.js:10605)
    at performUnitOfWork (react-dom.development.js:12573)
invariant @ invariant.js:42
coerceRef @ react-dom.development.js:8579
reconcileSingleElement @ react-dom.development.js:9379
reconcileChildFibers @ react-dom.development.js:9477
reconcileChildrenAtPriority @ react-dom.development.js:10127
reconcileChildren @ react-dom.development.js:10118
finishClassComponent @ react-dom.development.js:10254
updateClassComponent @ react-dom.development.js:10226
beginWork @ react-dom.development.js:10605
performUnitOfWork @ react-dom.development.js:12573
workLoop @ react-dom.development.js:12682
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
performWork @ react-dom.development.js:12800
scheduleUpdateImpl @ react-dom.development.js:13185
scheduleUpdate @ react-dom.development.js:13124
scheduleTopLevelUpdate @ react-dom.development.js:13395
updateContainer @ react-dom.development.js:13425
(anonymous) @ react-dom.development.js:17105
unbatchedUpdates @ react-dom.development.js:13256
renderSubtreeIntoContainer @ react-dom.development.js:17104
render @ react-dom.development.js:17129
(anonymous) @ client.js:41
(anonymous) @ promiseCallback.js:21
Promise resolved (async)
promiseCallback @ promiseCallback.js:20
rehydrate @ Fluxible.js:215
(anonymous) @ client.js:33
(anonymous) @ main.js:11183
__webpack_require__ @ main.js:678
fn @ main.js:88
(anonymous) @ client:3
(anonymous) @ main.js:10850
__webpack_require__ @ main.js:678
(anonymous) @ main.js:724
(anonymous) @ main.js:727

react-dom.development.js:8305 The above error occurred in the <contextProvider(storeConnector(RouteHandler))> component:
    in contextProvider(storeConnector(RouteHandler))

Consider adding an error boundary to your tree to customize error handling behavior.
You can learn more about error boundaries at https://fb.me/react-error-boundaries.
logCapturedError$1 @ react-dom.development.js:8305
captureError @ react-dom.development.js:12993
performWork @ react-dom.development.js:12825
scheduleUpdateImpl @ react-dom.development.js:13185
scheduleUpdate @ react-dom.development.js:13124
scheduleTopLevelUpdate @ react-dom.development.js:13395
updateContainer @ react-dom.development.js:13425
(anonymous) @ react-dom.development.js:17105
unbatchedUpdates @ react-dom.development.js:13256
renderSubtreeIntoContainer @ react-dom.development.js:17104
render @ react-dom.development.js:17129
(anonymous) @ client.js:41
(anonymous) @ promiseCallback.js:21
Promise resolved (async)
promiseCallback @ promiseCallback.js:20
rehydrate @ Fluxible.js:215
(anonymous) @ client.js:33
(anonymous) @ main.js:11183
__webpack_require__ @ main.js:678
fn @ main.js:88
(anonymous) @ client:3
(anonymous) @ main.js:10850
__webpack_require__ @ main.js:678
(anonymous) @ main.js:724
(anonymous) @ main.js:727
warning.js:33 Warning: Did not expect server HTML to contain a <div> in <div>.
printWarning @ warning.js:33
warning @ warning.js:57
warnForDeletedHydratableElement @ react-dom.development.js:6620
didNotHydrateInstance @ react-dom.development.js:17036
deleteHydratableInstance @ react-dom.development.js:11755
popHydrationState @ react-dom.development.js:11918
completeWork @ react-dom.development.js:10860
completeUnitOfWork @ react-dom.development.js:12481
performFailedUnitOfWork @ react-dom.development.js:12609
performWorkCatchBlock @ react-dom.development.js:12779
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
performWork @ react-dom.development.js:12837
scheduleUpdateImpl @ react-dom.development.js:13185
scheduleUpdate @ react-dom.development.js:13124
scheduleTopLevelUpdate @ react-dom.development.js:13395
updateContainer @ react-dom.development.js:13425
(anonymous) @ react-dom.development.js:17105
unbatchedUpdates @ react-dom.development.js:13256
renderSubtreeIntoContainer @ react-dom.development.js:17104
render @ react-dom.development.js:17129
(anonymous) @ client.js:41
(anonymous) @ promiseCallback.js:21
Promise resolved (async)
promiseCallback @ promiseCallback.js:20
rehydrate @ Fluxible.js:215
(anonymous) @ client.js:33
(anonymous) @ main.js:11183
__webpack_require__ @ main.js:678
fn @ main.js:88
(anonymous) @ client:3
(anonymous) @ main.js:10850
__webpack_require__ @ main.js:678
(anonymous) @ main.js:724
(anonymous) @ main.js:727
promiseCallback.js:27 Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more information.
    at Object.invokeGuardedCallbackDev (react-dom.development.js:1345)
    at invokeGuardedCallback (react-dom.development.js:1195)
    at performWork (react-dom.development.js:12800)
    at scheduleUpdateImpl (react-dom.development.js:13185)
    at scheduleUpdate (react-dom.development.js:13124)
    at scheduleTopLevelUpdate (react-dom.development.js:13395)
    at Object.updateContainer (react-dom.development.js:13425)
    at eval (react-dom.development.js:17105)
    at Object.unbatchedUpdates (react-dom.development.js:13256)
    at renderSubtreeIntoContainer (react-dom.development.js:17104)

Do you have any ideas how to resolve the above issues?

[lingyan]

Your error stack suggests there are multiple versions of React installed:

invariant.js:42 Uncaught Error: Element ref was specified as a string (wrappedElement) but no owner was set. You may have multiple copies of React loaded. (details: https://fb.me/react-refs-must-have-owner).

Make sure there is only 1 react installed.

[redonkulus]

Besides that one, the first one is just a warning to use the new API.

[ali1k]

@lingyan @redonkulus thanks for your comments. I resolved the issue by putting an alias in my web pack config in order to unify all my react versions:

resolve: {
    alias: {
      react: path.resolve('./node_modules/react'),
    }
}

[redonkulus]

Ok glad you were able to figure it out.