React.createElement: प्रकार अमान्य है - एक स्ट्रिंग की उम्मीद है, लेकिन मिला: ऑब्जेक्ट

Question

मैंने अभी वेबपैक 2.2 में अपग्रेड किया है और अपने गाइड के माध्यम से पढ़ रहे हैं, जो अभी भी प्रगति पर एक काम है।

मुझे हॉट मॉड्यूल रीलोडिंग के साथ वेबपैक-डीवी-सर्वर का उपयोग करने के लिए अपना एप्लिकेशन सेट करने में कठिनाई हो रही है।

वेबपैक दस्तावेज़ीकरण के माध्यम से मैं जिस मार्गदर्शिका का पालन कर रहा था वह यहां है, लेकिन मुझे इसे विकास/उत्पादन अनुप्रयोग के साथ काम करने के लिए संशोधित करना है।

https://webpack.js.org/guides/hmr-react/

दो त्रुटियों मैं अनुसरण कर रहे हैं मिलता है ...

Uncaught Error: _registerComponent(...): Target container is not a DOM element. 
    at invariant (eval at <anonymous> (index.js:2), <anonymous>:44:15) 
    at Object._renderNewRootComponent (eval at <anonymous> (index.js:64), <anonymous>:311:44) 
    at Object._renderSubtreeIntoContainer (eval at <anonymous> (index.js:64), <anonymous>:401:32) 
    at render (eval at <anonymous> (index.js:64), <anonymous>:422:23) 
    at hotRenderer (eval at <anonymous> (index.js:73), <anonymous>:41:28) 
    at eval (eval at <anonymous> (index.js:73), <anonymous>:47:5) 
    at eval (eval at <anonymous> (index.js:73), <anonymous>:54:5) 
    at Object.<anonymous> (index.js:73) 
    at e (index.js:1) 
    at Object.<anonymous> (index.js:146) 

और

Warning: React.createElement: type is invalid -- expected a string (for built-in components) 
or a class/function (for composite components) but got: object. 
printWarning @ warning.js?8a56:36 
warning @ warning.js?8a56:60 
createElement @ ReactElementValidator.js?a599:171 
hotRenderer @ index.js?2018:30 
(anonymous) @ index.js?2018:35 
(anonymous) @ index.js?2018:25 
(anonymous) @ index.js:73 
e @ index.js:1 
(anonymous) @ index.js:146 
e @ index.js:1 
(anonymous) @ index.js:1 
(anonymous) @ index.js:1 

मेरा मानना ​​है कि समस्या यह है कि मेरे ऐप फ़ाइल निर्यात कर रहा है के साथ झूठ सकता है रेडक्स प्रदाता एक रैक राउटर राउटर लपेटने वाला एक घटक।

index.js

import './lib/styles.css' 
import React from 'react' 
import { render } from 'react-dom' 

import App from './App' 

if (process.env.NODE_ENV === 'development') { 
    const { AppContainer } = require('react-hot-loader') 
    const hotRender = (Component) => { 
    render(
     <AppContainer> 
     <Component/> 
     </AppContainer>, 
     document.getElementById('root') 
    ) 
    } 

    hotRender(App) 

    if (module.hot) { 
    module.hot.accept('./App',() => { 
     const NewApp = require('./App').default 
     hotRender(NewApp) 
    }) 
    } 
} else { 
    render(App, document.getElementById('app')) 
} 

App.js

import React from 'react' 
import { Provider } from 'react-redux' 
import { createStore } from 'redux' 
import store from './redux/store' 

import { Router, hashHistory } from 'react-router' 
import routes from './routes' 

let s = createStore(store, 
    process.env.NODE_ENV === 'development' ? (
    window.__REDUX_DEVTOOLS_EXTENSION__ && 
    window.__REDUX_DEVTOOLS_EXTENSION__() 
) : null 
) 

const App =() => (
    <Provider store={s}> 
    <Router history={hashHistory} routes={routes} /> 
    </Provider> 
) 


export default App 

आप पूरे पीआर परिवर्तन है कि जांच करने के लिए करना चाहते हैं, कि:

यहाँ दो अपराधी फ़ाइलें हैं बहुत ही अच्छा होगा! कोड यहां स्थित है: https://github.com/awitherow/aether/pull/64/files

मैं कुछ सीएसएस परिवर्तनों के लिए क्षमा चाहता हूं जो पीआर में भी फिसल गए हैं, लेकिन सभी वेबपैक 2.2 और बाद में अपग्रेड जो मैंने यहां किया है, संभावित रूप से संबंधित हैं!

संपादित

मुझे लगता है कि कुछ सुधारों, सरल लोगों का प्रयास किया है ... लेकिन वे कुछ भी हल नहीं कर रहे हैं।

1. एक्स, एक div में App रैपिंग इतना है कि यह किसी भी तरह लगता होगा यह एक डोम तत्व था।
2. एक्स अनुप्रयोग एक वर्ग का विस्तार घटक

Answer 1

कौन सा के संस्करण प्रतिक्रिया रूटर प्रयोग कर रहे हैं के रूप में निर्यात? मुझे कंसोल में Warning: React.createElement त्रुटि भी मिल रही थी, लेकिन 3.0.2 से 4.0.0-alpha.6 प्री-रिलीज में स्विच करने से मुझे इससे छुटकारा मिल गया।

Answer 2

कृपया देखें कि घटक कैसे निर्यात किए जाते हैं जिन्हें आप वर्तमान घटक में आयात करने की कोशिश कर रहे हैं (आप वर्तमान घटक को स्टैकट्रैक में देखकर पहचान सकते हैं जो विफलता के अनुमानित स्थान को इंगित करता है)।

मुझे "डिफ़ॉल्ट" कीवर्ड के साथ निर्यात किए गए घटक को आयात करते समय एक ही समस्या का सामना करना पड़ा है। चूंकि एक ही घटक कई अन्य घटकों में आयात किया जा रहा था, प्रतिक्रिया पार्सर यह त्रुटि दे रहा था। इस निर्यात को "निर्यात डिफ़ॉल्ट" से नामित निर्यात में बदलने के बाद (यानी, "डिफ़ॉल्ट" कीवर्ड के बिना), मैंने कभी भी यह त्रुटि कभी नहीं देखी।