Attempted import error: ‘getMoviesList&#8217…

I’m trying to import a function ‘getMoviesList’ written in action/index.js but getting an error even though my code and paths are correct Please have a look on my App.js ( where I’m trying to import that function ) and ./action/index.js ( where I have defined that function )

App.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { getMoviesList } from './actions';

class App extends Component {

  componentDidMount() {
    this.props.dispatch(getMoviesList());
  }

  render() {
    
      return (
        <div className="App">
        <h1>HELLO MOVIES_LIST</h1>
          {
            this.props.movies ?
            this.props.movies.map((object) => {
              return (
                <div key={object.id}>
                  <h3>{ object.name }</h3>  
                </div>      
              )
            })
            : null
          }
          
      </div>
    );
  }
}

function mapStateToProps (state) {
  return {
    movies: state.movies
  }
}

export default connect(mapStateToProps)(App);

action/index.js

export default function getMoviesList () {
    // Go to the database and get data 
    return {
        type: 'MOVIES_LIST',
        payload: [
            {
                id: 1,
                name: 'dark'
            },
            {
                id: 2,
                name: 'scam 1992'
            },
            {
                id: 3,
                name: 'peaky blinders'
            }
        ]
    }
}

Answer

change import { getMoviesList } from './actions'; to import getMoviesList from './actions'; as getMoviesList function is exported as default. As a result, it should be imported without using curly braces.

Attempted import error: ‘getMoviesList’ is not exported from ‘./actions’; error in react redux

Advertisement

Answer