React.createElement: type is invalid — expected a string, but got: object

Question

I've just upgraded to Webpack 2.2 today and have been reading through their guides, which are still a work in progress it seems.

I am having difficulties setting up my application to use webpack-dev-server with hot module reloading.

The guide I was following via the webpack documentation is here, but I am having to modify it to work with a development/production application.

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

The two errors I get are the following...

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)

AND

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

I believe the problem might lie with the fact that my app file is exporting a Component composed of a Redux Provider wrapping a React Router Router.

Here are the two culprit files:

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

If you would like to examine the entire PR that has the changes, that would be awesome! The code is located here: https://github.com/awitherow/aether/pull/64/files

I apologise for some of the CSS changes that slipped into the PR as well, but all of the Webpack 2.2 and later upgrades that I have done in here are related potentially!

EDIT

I have attempted some fixes, simple ones at that... but they are not solving anything.

1. X Wrapping the App in a div, so that it would somehow think it was a DOM element.
2. X exporting App as a class extending Component

Answer 1

Which version of React Router are you using? I was also getting the Warning: React.createElement error in the console, but switching from version 3.0.2 to the 4.0.0-alpha.6 pre-release got rid of it for me.

Answer 2

Please have a look at how the components are exported which you are trying to import in the current component(you can identify the current component by looking into the stacktrace that indicates an approximate location of where the failure occurs).

i have faced a same issue while importing a component which was exported with "default" keyword. since the same component was being imported in many other components, react parser was giving this error. after changing this component from "export default" to named export(i'e, without "default" keyword), i never saw this error again.