Trying to upgrade React 0.13.3 -> 15.6.1 - Invariant Violation: _registerComponent(…)

[condebiel]

I am trying to update React from version 0.13.3 to the current version 15.6.1. But when I make npm run dev, I get the following error:

Unhandled Server Error (Oops!) +4ms TypeError: Cannot read property 'run' of undefined
at callee$1$0$ (/Users/biel/workspace/sonder/client/src/server.js:141:9)
at tryCatch (/Users/biel/workspace/sonder/client/node_modules/regenerator/runtime.js:61:40)
at GeneratorFunctionPrototype.invoke [as _invoke] (/Users/biel/workspace/sonder/client/node_modules/regenerator/runtime.js:328:22)
at GeneratorFunctionPrototype.prototype.(anonymous function) [as next] (/Users/biel/workspace/sonder/client/node_modules/regenerator/runtime.js:94:21)
at GeneratorFunctionPrototype.invoke (/Users/biel/workspace/sonder/client/node_modules/regenerator/runtime.js:136:37)

Here dependencies of my package.json:

"dependencies": {
"async": "1.5.2",
"babel": "5.8.38",
"css-loader": "0.18.0",
"debug": "2.2.0",
"expose-loader": "0.7.0",
"express": "4.13.3",
"file-loader": "0.8.4",
"flux": "^3.1.3",
"fluxible": "^1.4.0",
"fluxible-addons-react": "^0.2.13",
"intl": "1.1.0",
"intl-locales-supported": "1.0.0",
"marked": "^0.3.5",
"moment": "^2.13.0",
"node-sass": "4.5.3",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-ga": "^2.2.0",
"react-intl": "1.2.2",
"react-router": "4.2.0",
"react-view-pager": "^0.5.1",
"react-with-addons": "0.0.1",
"sass-loader": "2.0.1",
"serialize-javascript": "1.2.0",
"style-loader": "0.12.4",
"superagent": "1.8.3"
}

Here devDependencies of my package.json:

"devDependencies": {
"autoprefixer-loader": "3.1.0",
"babel-core": "5.8.38",
"babel-loader": "5.4.0",
"babel-runtime": "5.8.38",
"extract-text-webpack-plugin": "1.0.1",
"livereload-js": "^2.2.2",
"strip-loader": "0.1.2",
"webpack": "1.12.15",
"webpack-dev-server": "1.10.1",
"webpack-livereload-plugin": "^0.11.0",
"webpack-stats-plugin": "0.1.1"
}

Here my modified server.js:
https://gist.github.com/BiliWeiss/f150c8f3ae1373243a23eb03137a51f4

I've read that since the release of React Router v1.0, the run method has been removed and I changed for ReactDOM.render:

...
ReactDOM.render(app.getComponent(), req.originalUrl, async function (Handler, state) {

        // Trigger fetching and wait for the data required by the components of the given route
        await fetchData(context, state);
...

But now, I get:

Unhandled Server Error (Oops!) +11ms { Invariant Violation: _registerComponent(...): Target container is not a DOM element.
at invariant (/Users/biel/workspace/sonder/client/node_modules/fbjs/lib/invariant.js:44:15)
at Object._renderNewRootComponent (/Users/biel/workspace/sonder/client/node_modules/react-dom/lib/ReactMount.js:310:76)
at Object._renderSubtreeIntoContainer (/Users/biel/workspace/sonder/client/node_modules/react-dom/lib/ReactMount.js:401:32)
at Object.render (/Users/biel/workspace/sonder/client/node_modules/react-dom/lib/ReactMount.js:422:23)
at callee$1$0$ (/Users/biel/workspace/sonder/client/src/server.js:141:18)
at tryCatch (/Users/biel/workspace/sonder/client/node_modules/regenerator/runtime.js:61:40)
at GeneratorFunctionPrototype.invoke [as _invoke] (/Users/biel/workspace/sonder/client/node_modules/regenerator/runtime.js:328:22)
at GeneratorFunctionPrototype.prototype.(anonymous function) [as next] (/Users/biel/workspace/sonder/client/node_modules/regenerator/runtime.js:94:21)
at GeneratorFunctionPrototype.invoke (/Users/biel/workspace/sonder/client/node_modules/regenerator/runtime.js:136:37) name: 'Invariant Violation', framesToPop: 1 }

Anyone know what I'm doing wrong can help me?

[mateomorrison]

We can do this together. I will update every package inside Nicistore, add PayPal/Stripe and Webpack.

Do you have any other Backend to run the Nicistore against that's not Atlas (GitHub.com/yoonic/atlas)?

Cc: @andreftavares

[estebanmuruzabal]

hey guys @BiliWeiss @mateomorrison . I am in the same situation! Did you made any progress? Add me on facebook : /estebanmuruzabal

[condebiel]

Hi @mateomorrison, @estebanmuruzabal!

I havn't made any progress on this goal. Maybe @mateomorrison can bring some idea.

[eriknyk]

ReactDOM.render() comes from react package
and Router.run() comes from react-router package, so you can't replace simply Router.run() by ReactDOM.render() at least func parameters will never be the same

and in your dependencies you're using "react-router": 4.2.0, you should to use 1.0.x and use Router.run() as it is actually, just because v4 of react-router is completely different than ver v1

Regards.

[israr-shaikh]

Hi @bielconde,

Have you made any progress to Router.run() with ReactDOM.render()?
If Yes so kindly give some idea for this.

Thanks in Advance.

[petroved]

Hi @israr-shaikh if you want you could take a look on my fork of nicistore with updated react-intl, react, react-router and webpack libraries https://github.com/petroved/simple-store fell free to use it

[israr-shaikh]

Hi, @petroved.
Thank You so much for this help. you have done such a nice work for the nicistore.

[jay-aplan]

Hi @israr-shaikh if you want you could take a look on my fork of nicistore with updated react-intl, react, react-router and webpack libraries https://github.com/petroved/simple-store fell free to use it

Hey @petroved , thanks for your efforts. I tried building and running but i am getting some errors. Is your repo working fine or you made some changes afterwords as well? Getting warnings like this while building.

ModuleConcatenation bailout: Cannot concat with ./node_modules/prop-types/index.js (<- Module is not an ECMAScript module

If i ignore and run them i get

TypeError: Cannot read property 'pathparse' of undefined

[petroved]

@jay-aplan not sure why you get warnings, but you could try to update node and npm. With node v.10.15.1 and npm v.6.4.1 it's working fine

[jay-aplan]

@jay-aplan not sure why you get warnings, but you could try to update node and npm. With node v.10.15.1 and npm v.6.4.1 it's working fine

@petroved Thanks for replying :). I got it running under dev more npm run dev, had to make few changes but when i run for prod more i get following. have you seen this before?

[petroved]

@jay-aplan seems that handling errors is not done correctly for all responses from the server.
please note that npm run prod run babel in the runtime, I had many crashes on real prod, before I fixed it and create build also for server there. I done it my private repo, but if you're interesting I'll try to update this repo when I'll have some free time for it.

[jay-aplan]

@jay-aplan seems that handling errors is not done correctly for all responses from the server.
please note that npm run prod run babel in the runtime, I had many crashes on real prod, before I fixed it and create build also for server there. I done it my private repo, but if you're interesting I'll try to update this repo when I'll have some free time for it.

@petroved Thanks a lot Denis :) i am new to react so just trying to figure this out, want to get a small store live. It will be really helpful if you can do that. much appreciated.

[petroved]

Hey @jay-aplan I updated dependencies and create build for server there. Also I reproduced bug with property 'status' of null, but didn't fix it yet. I'll look on it later

[jay-aplan]

@petroved Thanks a lot buddy. You are a star :) I will try running this and hopefully you can get time to look at the error. thanks again for your help.