Upgrading Isomorphic React 0.13.3 -> 15.6.1 - Invariant Violation: _registerComponent(...)

Question

I'm doing tests with this isomorphic app: https://github.com/yoonic/nicistore

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?

Answer 1

First of all, the gist you gave doesn't seem relevant in my own opinion. If this answer doesn't resolve your issue, I'd suggest giving some more material to look at.

That said, according to the documentation, ReactDom.render() takes at least 2 arguments : the first one is the React component you want to render in your html, the second one is the targeted dom element you want to inject your component in.

Example :

ReactDOM.render(
  <MyComponent />,
  document.getElementById('dom-target-id')
)

I don't read anything like that in your code.

By the way, async data call sould not be done in the ReactDome.render() function. Dom rendering must happen only after you've done your magic assync calls. It's task is to render things, not handeling this kind of stuff.

I'd suggest you to seperate concerns and make your calls way before rendering.

Maybe you should have a look at this reference : https://facebook.github.io/react/docs/react-dom.html#reference

Last but not least, if you want to make some tests and experiences, create react app is very good command line interface to scaffold react applications and test things safely. It uses latest dependencies (meaning react 15+ and reactdom 15+).

Hope that'll help :)