Error while importing Named export

Question

I have helperMethods.js file

export default function calculateWinner(squares) {
    const lines = [
        [0, 1, 2],
        [3, 4, 5],
        [6, 7, 8],
        [0, 3, 6],
        [1, 4, 7],
        [2, 5, 8],
        [0, 4, 8],
        [2, 4, 6],
    ];
    for (let i = 0; i < lines.length; i++) {
        const [a, b, c] = lines[i];
        if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
            return squares[a];
        }
    }
    return null;
}

I know that in this case i can export only one method.

I use this method in file where i have imported this like :

import calculateWinner from './helperMethods.js';

and used just like this:

render() {
    const history = this.state.history;
    const current = history[this.state.stepNumber];
    const winner = calculateWinner(current.squares);
    // some more code here
}

And in this case this works.

But if i try to change default export to named export:

function calculateWinner(squares) {
    const lines = [
        [0, 1, 2],
        [3, 4, 5],
        [6, 7, 8],
        [0, 3, 6],
        [1, 4, 7],
        [2, 5, 8],
        [0, 4, 8],
        [2, 4, 6],
    ];
    for (let i = 0; i < lines.length; i++) {
        const [a, b, c] = lines[i];
        if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
            return squares[a];
        }
    }
    return null;
}

export {calculateWinner};

I am receiving error:

game.js:50 Uncaught TypeError: (0 , _helperMethods2.default) is not a function

Agree that this error is pretty straightforward but how should i modify my export/import to make this named export work?

Answer 1

Use named import instead of default import syntax.

import { calculateWinner } from './helperMethods.js';