React.createElement: type is invalid -- expected a string (for built-in components) or a class/function

Question

I'm getting this kryptic error from react when I try to import a component. The error message I'm receiving is below. Not sure how to debug this one, any help is appreciated.

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of App.

--- my index.jsx

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import reducer from './reducers/reducer'

let store = createStore(reducer)

import App from './components/App'

ReactDOM.render(<App store={store}/>, document.getElementById('app'));

-- my app

import React, { Component } from 'react'
import { incrementCount } from '../actions/actionsOne'
import  CountWidgetContainer   from '../containers/CountWidgetContainer'

export default class App extends Component {

  render(){
    return (
      <div>
       <CountWidgetContainer store={this.props.store} />
      </div>
    )
  }
}

-- container component

import React, { Component } from 'react'
import { INCREMENT_COUNTER } from '../actions/actionsOne'
import  CountWidget  from '../Components/CountWidget'

export default class CountWidgetContainer extends Component {

    constructor(props) {
     super(props)
      this.state = {
       count: props.store.getState()
      };
     this.handleChange = this.handleChange.bind(this);
     this.handleClick = this.handleClick.bind(this);
    }

   componentDidMount() {
      this.props.store.subscribe(this.handleChange)
   }

   handleChange() {
      this.setState({
        count: this.props.store.getState()
      })
   }

  handleClick() {
   let action = incrementCount()
    this.props.store.dispatch(action)
    console.log('action: ', action);
  }

  render() {
      return (
        <CountWidget count={this.state.count} handleClick={this.state.handleClick} />
      ) 
  }
}

Possible duplicate of [in reactjs, when should I add brackets when import](https://stackoverflow.com/questions/41337709/in-reactjs-when-should-i-add-brackets-when-import) — Shubham Khatri, Jun 26 '17 at 13:25
As a side note, you can try [MobX](https://youtu.be/_q50BXqkAfI) rather than Redux. You may like it — Megidd, Jun 26 '17 at 13:37
I am thinking about rolling back the edit because you have removed an obvious bug that would make the question a duplicate. Is the error message still the same? — Sulthan, Jul 01 '17 at 07:55

Andrii Starusiev · Answer 1 · 2017-06-26T13:17:48.030

2

import { CountWidgetContainer } from '../containers/CountWidgetContainer'

In this component You use export default so, You don't need to use curly bracers.

Just import CountWidgetContainer from '../containers/CountWidgetContainer';

And check component CountWidget export, if it's default You shouldn't use curly bracers in Container too.

edited Jun 26 '17 at 13:17

answered Jun 26 '17 at 13:14

Andrii Starusiev

7,564
2
28
37

thats what I though as well. When I remove the curly braces it has the same error still – Jimi Jun 26 '17 at 13:17
What about `CountWidget` export and import? – Andrii Starusiev Jun 26 '17 at 13:18
@Jimi you are using `redux`, so you need to use `connect`, you don't need to pass the `store` to each component in the `props`. check this for more details: http://redux.js.org/docs/basics/UsageWithReact.html#implementing-container-components – Mayank Shukla Jun 26 '17 at 13:19
@Andrew, I removed those as well. I still get the same error. Seems really hard to debug. – Jimi Jun 26 '17 at 13:20
@MayankShukla, I'm new to react, open to suggestions. – Jimi Jun 26 '17 at 13:23
@Jimi check the doc, it will explain everything in details how to use connect component with store: http://redux.js.org/ and this also: https://medium.com/@stowball/a-dummys-guide-to-redux-and-thunk-in-react-d8904a7005d3 – Mayank Shukla Jun 26 '17 at 13:25

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function

1 Answers1