0

I have the following error with the below code, however I cannot identify what is wrong with my component. Any help is appreciated!

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of App.

index.js

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import YTSearch from 'youtube-api-search'; // Used to interact with Youtube API
import SearchBar from './components/search_bar'; // custom search bar component
import VideoList from './components/video_list'; // custom youtube video list component

const API_KEY = "key not shown here for privacy purposes";

class App extends Component {
    constructor(props){
        super(props);

        this.state = {videos: []};

        YTSearch({key: API_KEY, term: 'sufboards'}, (videos) => { 
            this.setState({videos});
        });
    }
    render(){
        return (
            <div>
                <SearchBar />
                <VideoList videos={this.state.videos} />
            </div>
        );
    }
}
ReactDOM.render(<App />, document.querySelector(".container"));

webpack.config.js

As requested by JordanHendrix.

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel'
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

video_detail.js

As requested by bhargavponnapalli

import React from 'react';

const VideoList = (props) => {
    return (
        <ul className="col-md-4 list-group">
            {props.videos.length}
        </ul>
    );
};

export default VideoList;

search_bar.js

As requested by bhargavponnapalli

import React, {Component} from 'react';

class SearchBar extends Component {
    constructor(props){
        super(props);
        this.state = {term: ""};
    }

    render(){
        return (
            <input
                onChange={
                    event => this.setState({
                        term: event.target.value
                    })
                }
                value = {this.state.term} 
            />
        );
    }
}

export default SearchBar;

Any extra code needed from my other components will be added here upon request.

AGE
  • 3,752
  • 3
  • 38
  • 60
  • @JordanHendrix I have added the `webpack.config.js` as an edit to my question, does that help? – AGE Apr 28 '16 at 02:58
  • Are Search and VideoList render functions returning proper JSX? – Bhargav Ponnapalli Apr 28 '16 at 03:02
  • @bhargavponnapalli yes they are, I will add them as an edit to my question for you to verify right now. – AGE Apr 28 '16 at 03:03
  • ^^ that was a bit premature of me, are you using webpack? can we see the the other components? – omarjmh Apr 28 '16 at 03:04
  • can you put `babel-loader` in the webpack flle in modules instead of just `babel` – omarjmh Apr 28 '16 at 03:06
  • @JordanHendrix I have webpack as part of my node_modules so yes I am. I know that the problem occurred in my App, when I transformed it from a functional component to a class component. – AGE Apr 28 '16 at 03:06
  • @JordanHendrix I added `babel-loader` as suggested, however there is no change. If you must know I also have 3 other warnings and an uncaught type error regarding `props` being undefined. – AGE Apr 28 '16 at 03:08
  • http://stackoverflow.com/questions/34130539/uncaught-error-invariant-violation-element-type-is-invalid-expected-a-string – omarjmh Apr 28 '16 at 03:10
  • @JordanHendrix I tried looking at that question but none of the suggestions solved my problem. Is it possible that this is a syntax error with my `App` component? – AGE Apr 28 '16 at 03:13

1 Answers1

1

Simple fix:

import VideoList from './components/video_list';

The file was empty, my code was in video_detail.js so I had to move it to the correct file, video_list.js

AGE
  • 3,752
  • 3
  • 38
  • 60