Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined in reactjs

Question

I've been trying to create a search app that searches for movies from an api and shows the result in the table. I want it to be sortable so I looked through react-bootstrap-table but the table is not being displayed but rather this big 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, or you might have mixed up default and named imports. 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, or you might have mixed up default and named imports. all the imports and exports looks fine to me. what can I do to solve this issue and show the table in the app?

table component where the error is shown

import React from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { Table } from "react-bootstrap";
import { deleteMovie } from "../action/movieActions";
import { BootstrapTable, TableHeaderColumn } from "react-bootstrap-table-next";
import "react-bootstrap-table-next/dist/react-bootstrap-table2.min.css";

const MovieTable = ({ data, deleteMovie }) => {
  console.log(data);
  return (
    <div className="col m4">
      <BootstrapTable data={data} striped hover search pagination>
        <TableHeaderColumn dataField="name" isKey dataAlign="center" hidden>
          Name
        </TableHeaderColumn>
        <TableHeaderColumn dataField="year" dataSort>
          Year
        </TableHeaderColumn>
        <TableHeaderColumn dataField="id" dataSort>
          Id
        </TableHeaderColumn>
        <TableHeaderColumn dataField="delete" valueField="id">
          <span onClick={deleteMovie(data.movieId)}>Delete Movie</span>
        </TableHeaderColumn>
      </BootstrapTable>
    </div>
  );
};

MovieTable.propTypes = {
  deleteMovie: PropTypes.func.isRequired
};

export default connect(
  null,
  { deleteMovie }
)(MovieTable);

App.js

import React, { Component } from "react";
import { connect } from "react-redux";
import { fetchMovie } from "./action/movieActions";

import Input from "./components/Input";
import MovieTable from "./components/MovieTable";

class App extends Component {
  state = {
    searchInput: "The Rain"
  };

  componentDidMount() {
    this.props.getMovieList(this.state.searchInput);
  }

  getMovie = () => {
    this.props.getMovieList(this.state.searchInput);
  };

  onChangeHandler = e => {
    this.setState({
      searchInput: e.target.value
    });
    console.log(this.state.searchInput);
  };
  render() {
    const { data, loading } = this.props.movies;

    return (
      <div className="center">
        <div>
          <h2 className="center white-text">Movie Search</h2>
        </div>

        <div className="container">
          <Input
            value={this.state.searchInput}
            onChange={this.onChangeHandler}
            onClick={this.getMovie}
          />
          <div className="row">
            {loading ? (
              <p>Loading</p>
            ) : (
              <MovieTable
                data={data.map(d => ({
                  year: d.Year,
                  name: d.Title,
                  movieId: d.imdbID
                }))}
              />
            )}
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    movies: state.movies
  };
};

const mapDispatchToProps = dispatch => {
  return {
    getMovieList: name => dispatch(fetchMovie(name))
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

Answer 1

import BootstrapTable from "react-bootstrap-table-next";

have a look at https://codesandbox.io/s/jlol04qrxv?file=/src/index.js:61-117