All geek questions in one place

React.createElement: type is invalid - a string is expected, but received: object

I just upgraded to Webpack 2.2 today and read their manuals, which are still in the process, it seems.

I am having difficulty configuring my application to use the webpack-dev server with a hot reload of the module.

Below is the manual that I read through the webpack documentation, but I need to change it to work with the 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 may be that my application file is exporting a component consisting of a Redux provider that includes 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 want to learn the whole PR that has changes, that would be awesome! The code is here: https://github.com/awitherow/aether/pull/64/files

I apologize for some of the CSS changes that also hit PR, but all the Webpack 2.2 updates and later that I made here are potentially related!

EDIT

I tried to make some corrections simple in this ... but they do not solve anything.

  • X Wrap the application in a div, so it somehow thinks that it is a DOM element.
  • X exporting the application as an extension class
+6
source share
2 answers

What version of React Router are you using? I also received the Warning: React.createElement in the console, but the transition from version 3.0.2 to the preliminary release 4.0.0-alpha.6 got rid of it for me.

+7
source

See how the components that you are trying to import into the current component are exported (you can determine the current component by looking at the stack that indicates the approximate location where the failure occurs).

I encountered the same problem when importing a component that was exported with the keyword "default". since the same component was imported into many other components, the parser reaction gave this error. after changing this component from "export default" to named export (i'e, without the keyword "default"), I never saw this error again.

0
source

Source: https://habr.com/ru/post/1014200/

More articles:


All Articles