React-Redux: Attempted import error: './components/Score' does not contain a default export (imported as 'Score')

Question

I know there are a lot of similar posts, but none of them seem to be similar to this one.

Using react redux to use mapStateToProps.

in my App.js I use import Score from './components/Score'; in order to import the component.

The component is in a folder called Score, where it contains index.js and Score.js. Inside Score.js I have:

const Score = ({team_score}) => ( 
    <>  
        <p>{ team_score }</p>
    </>
);

export default Score;

Inside my index.js I have:

import { connect } from "react-redux";
import Score from "./Score";

let mapStateToProps = (state) => {
    return {
        team_score: state.team_score,
    };
};

connect(mapStateToProps)(Score)

But I get the error:

./src/App.js
Attempted import error: './components/Score' does not contain a default export (imported as 'Score').

I have triple checked and the file path is correct. I'm not sure why I'm getting this error.

Answer 1

I think your problem is you have index.js file inside this folder.

import Score from './components/Score'

This line will try to import anything from components/Score/index.js file and you do not export anything from there.

You should do something like below:

import { connect } from "react-redux";
import Score from "./Score";

let mapStateToProps = (state) => {
    return {
        team_score: state.team_score,
    };
};

export default connect(mapStateToProps)(Score)