web-dev-qa-db-fra.com

React.createElement: le type n'est pas valide - une chaîne attendue, mais got: object

Je viens de passer à Webpack 2.2 aujourd'hui et j'ai lu leurs guides, qui sont toujours en cours de développement, semble-t-il.

J'ai des difficultés à configurer mon application pour utiliser webpack-dev-server avec le rechargement à chaud du module.

Le guide que je suivais via la documentation webpack est ici, mais je dois le modifier pour fonctionner avec une application de développement/production.

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

Les deux erreurs que je reçois sont les suivantes ...

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)

ET 

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

Je pense que le problème pourrait venir du fait que mon fichier d'application exporte un composant composé d'un fournisseur Redux encapsulant un routeur de routeur React.

Voici les deux fichiers coupables:

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

Si vous souhaitez examiner l'ensemble des relations publiques contenant les modifications, ce serait génial! Le code se trouve ici: https://github.com/awitherow/aether/pull/64/files

Je m'excuse pour certains des changements CSS qui ont également été intégrés au PR, mais toutes les mises à niveau Webpack 2.2 et ultérieures que j'ai effectuées ici sont potentiellement liées!

MODIFIER

J'ai essayé quelques corrections, des solutions simples à cela ... mais ils ne résolvent rien.

  1. X Enveloppant l'application dans une div, de sorte qu'elle pense en quelque sorte qu'il s'agit d'un élément DOM.
  2. X exportation de l'application en tant que composant d'extension de classe
reactjswebpackreduxreact-routerwebpack-dev-server
6
Austin Witherow

Quelle version de React Router utilisez-vous? J'obtenais également l'erreur Warning: React.createElement dans la console, mais le passage de la version 3.0.2 à la version préliminaire 4.0.0-alpha.6 m'en a supprimé.

7
Anarosa PM

Veuillez regarder comment les composants que vous essayez d'importer dans le composant actuel sont exportés (vous pouvez identifier le composant actuel en regardant dans le stacktrace qui indique l'emplacement approximatif de l'emplacement de la panne).

j'ai rencontré le même problème lors de l'importation d'un composant qui a été exporté avec le mot clé "default". comme le même composant était importé dans de nombreux autres composants, l’analyseur de réaction donnait cette erreur. Après avoir changé ce composant de "export par défaut" en exportation nommée (c'est-à-dire sans le mot clé "par défaut"), je n'ai plus jamais vu cette erreur.

0
manjum2050