it-swarm.com.de

React.createElement: type ist ungültig - erwartet eine Zeichenfolge, aber got: object

Ich habe gerade ein Upgrade auf Webpack 2.2 durchgeführt und habe die Handbücher durchgelesen, die anscheinend noch in Arbeit sind.

Ich habe Probleme beim Einrichten meiner Anwendung für die Verwendung des Webpack-Dev-Servers mit Hot Module Reloading.

Der Leitfaden, den ich über die Webpack-Dokumentation verfolgt habe, ist hier, aber ich muss ihn ändern, um mit einer Entwicklungs-/Produktionsanwendung zu arbeiten.

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

Die zwei Fehler die ich bekomme sind folgende ...

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)

UND 

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

Ich glaube, das Problem liegt möglicherweise in der Tatsache, dass meine App-Datei eine Komponente exportiert, die aus einem Redux-Provider besteht, der einen React Router Router umgibt.

Hier sind die zwei Täter-Dateien:

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

Wenn Sie die gesamte PR mit den Änderungen untersuchen möchten, wäre das großartig! Der Code befindet sich hier: https://github.com/awitherow/aether/pull/64/files

Ich entschuldige mich für einige der CSS-Änderungen, die auch in die PR eingedrungen sind, aber alle Upgrades von Webpack 2.2 und späteren Versionen, die ich hier vorgenommen habe, sind möglicherweise verwandt!

EDIT

Ich habe ein paar Korrekturen ausprobiert, einfache ... aber sie lösen nichts.

  1. XUmhüllen der App in ein div, sodass sie irgendwie denken würde, dass es sich um ein DOM-Element handelt.
  2. XExport von App als klassenerweiterende Komponente
6
Austin Witherow

Welche Version von React Router verwenden Sie? Ich erhielt auch den Warning: React.createElement-Fehler in der Konsole, aber das Umschalten von Version 3.0.2 auf die 4.0.0-alpha.6-Vorabversion löste es für mich.

7
Anarosa PM

Sehen Sie sich an, wie die Komponenten exportiert werden, die Sie in die aktuelle Komponente importieren möchten (Sie können die aktuelle Komponente anhand des Stacktraces identifizieren, der eine ungefähre Position angibt, an der der Fehler auftritt).

ich hatte ein Problem, als ich eine Komponente importierte, die mit dem Schlüsselwort "default" exportiert wurde. Da die gleiche Komponente in viele andere Komponenten importiert wurde, reagierte der Parser mit diesem Fehler. Nachdem ich diese Komponente von "export default" in "named export" geändert hatte (dh ohne "default" - Schlüsselwort), habe ich diesen Fehler nie wieder gesehen.

0
manjum2050