You might have mixed up default and named imports: Only using default imports

I'm working on a React app using an API. I am trying to get the poster images to display, however I am getting this error: React.createElement: 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.

The error says the issue is likely with my import or export but I don't see how that would cause the issue.

Index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import '../assets/stylesheets/application.scss';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

App.js

import React, { useState } from 'react';
import MovieList from './components/MovieList';

import '../assets/stylesheets/application.scss';

const App = () => {
  const [movies, setMovies] = useState([{
            "Title": "Star Wars: Episode IV - A New Hope",
            "Year": "1977",
            "imdbID": "tt0076759",
            "Type": "movie",
            "Poster": "https://m.media-amazon.com/images/M/MV5BNzVlY2MwMjktM2E4OS00Y2Y3LWE3ZjctYzhkZGM3YzA1ZWM2XkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_SX300.jpg"
        },
        {
            "Title": "Star Wars: Episode V - The Empire Strikes Back",
            "Year": "1980",
            "imdbID": "tt0080684",
            "Type": "movie",
            "Poster": "https://m.media-amazon.com/images/M/MV5BYmU1NDRjNDgtMzhiMi00NjZmLTg5NGItZDNiZjU5NTU4OTE0XkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_SX300.jpg"
        },
        {
            "Title": "Star Wars: Episode VI - Return of the Jedi",
            "Year": "1983",
            "imdbID": "tt0086190",
            "Type": "movie",
            "Poster": "https://m.media-amazon.com/images/M/MV5BOWZlMjFiYzgtMTUzNC00Y2IzLTk1NTMtZmNhMTczNTk0ODk1XkEyXkFqcGdeQXVyNTAyODkwOQ@@._V1_SX300.jpg"
        }]);
  return (
    <div>
      <MovieList movies={movies} />
    </div>
  );
};

export default App;

MovieList.js

import React from 'react';

const MovieList = (props) => {
  return (
    <React.Fragment>
      {props.movies.map((movie, index) => (
      <div>
        <img src={movie.Poster} alt='movie'></img>
      </div>
      ))}
    </React.Fragment>
  );
};

export default MovieList;

I console.logged my MovieList and my function appears in my App.js so it seems to be importing correctly so something may be wrong with my App.js but I don't see any errors. I am only using default imports and exports, do I need to change them to a named variant?



Read more here: https://stackoverflow.com/questions/64941347/you-might-have-mixed-up-default-and-named-imports-only-using-default-imports

Content Attribution

This content was originally published by SJK at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: