6

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
Austin Witherow
  • 456
  • 2
  • 4
  • 19
  • Apparently this is a pretty common issue with React-Hot-Loader, there is a lot of discussion here: https://github.com/gaearon/react-hot-loader/issues/249 – Austin Witherow Jan 19 '17 at 13:33

2 Answers2

7

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.

Anarosa PM
  • 141
  • 1
  • 4
  • Honestly I got rid of React Router, as all I was using it for was authentication to show either a Login portal or the application. But I have read elsewhere that the solution you have posted also fixed things for a lot of people, so you get the check :) – Austin Witherow Jan 21 '17 at 14:07
0

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.

manjum2050
  • 45
  • 2
  • 6