2017-08-26 74 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+).

希望這將幫助:)