2017-08-26 72 views
0

我做的测试与此同构应用: https://github.com/yoonic/nicistore升级同构阵营0.13.3 - > 15.6.1 - 不变违规:_registerComponent(...)

我想更新从0.13版本的反应。 3到当前版本15.6.1。但是,当我做npm run dev,我得到以下错误:

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) 

这里dependenciespackage.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" 
} 

这里devDependenciespackage.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" 
} 

这里我修改server.jshttps://gist.github.com/BiliWeiss/f150c8f3ae1373243a23eb03137a51f4

我读过,因为阵营路由器V1.0的发布,run方法已被删除,我改变了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); 
... 

但现在,我得到:

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 } 

任何人都知道我做错了什么可以帮助我吗?

回答

0

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.

也就是说,根据文件,ReactDom.render()至少需要2个参数:第一个是你想在你的HTML渲染阵营组成,第二个是要注入目标DOM元素您的组件在

例:

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

我不念想,在你的代码的任何东西。

顺便说一下,异步数据调用不应该在ReactDome.render()函数中完成。只有在完成魔术assync调用后,Dom渲染才会发生。它的任务是呈现事物,而不是处理这种东西。

我建议你在呈现之前分开关注问题并进行调用。

也许你应该看看这个参考: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+).

希望这将帮助:)