does not contain a default export even after being correctly imported in React

Question

I have this simple file which imports getAccesToken constant from another file. But I keep getting this error even when everything is defined perfectly. I really have no clue why would this happen. I looked similar questions on SO, but most had curly brackets when importing or something.

PS This question is a sequel to this question.

This is my file importing the constant:

import React, {Component} from 'react';
import {Card, CardBody, CardHeader, Col, Row, Table} from 'reactstrap';
import getAccessToken from '../helpers/api'   //Here is the import
import {reactLocalStorage} from "reactjs-localstorage";
import {API_TOKENS} from "../data/storage";
import {errorGettingUserInfoNotification, signINAgainNotification} from "../helpers/notifications";




class all_orders extends Component {
    state = {
        todos: []
    };


    async componentDidMount() {
        try {
            const res = await fetch('http://127.0.0.1:8000/api/allorders/',

                {
                    headers: {
                        // your headers there as pair key-value, matching what your API is expecting, for example:
                        'details': getAccessToken()
                    }
                });
            // fetching the data from api, before the page loaded
            const todos = await res.json();
            console.log(todos);
            this.setState({
                todos
            });
        } catch (e) {
            console.log(e);
        }
    }


    render() {

        // const userList = usersData.filter((user) => user.id < 10)

        return (
            <div className="animated fadeIn">
                <Row>
                    <Col xl={12}>
                        <Card>
                            <CardHeader>
                                <i className="fa fa-align-justify"></i> All Orders <small
                                className="text-muted"></small>
                            </CardHeader>
                            <CardBody>
                                <ul className="nav nav-tabs">
                                    <li className="nav-item">
                                        <a className="nav-link active"
                                           href="base/all-orders#/base/hold-orders">Active</a>
                                    </li>
                                    <li className="nav-item">
                                        <a className="nav-item" href="base/all-orders#/base/hold-orders">Link</a>
                                    </li>
                                    <li className="nav-item">
                                        <a className="nav-item" href="base/all-orders#/base/hold-orders">Link</a>
                                    </li>
                                    <li className="nav-item">
                                        <a className="nav-link disabled"
                                           href="base/all-orders#/base/hold-orders">Disabled</a>
                                    </li>
                                </ul>
                                <Table responsive hover>
                                    <thead>
                                    <tr>
                                        <th scope="col">Name</th>
                                        <th scope="col">SKU ID</th>
                                        <th scope="col">Quantity</th>
                                        <th scope="col">Dimensions</th>
                                        <th scope="col">Weight</th>
                                        <th scope="col">Volume</th>
                                        <th scope="col">Origin</th>
                                        <th scope="col">Destination</th>
                                        <th scope="col">Date</th>
                                    </tr>
                                    </thead>
                                    <tbody>


                                    {this.state.todos.map(item => (
                                        <tr>
                                            <td>{item.name}</td>
                                            <td>{item.pid}</td>
                                            <td>{item.quantity}</td>
                                            <td>{item.length} X {item.width} X {item.height}</td>
                                            <td>{item.weight}</td>
                                            <td>{item.volume}</td>
                                            <td>{item.origin}</td>
                                            <td>{item.destination}</td>
                                            <td>{item.time}</td>
                                        </tr>
                                    ))}


                                    </tbody>
                                </Table>
                            </CardBody>
                        </Card>
                    </Col>
                </Row>
            </div>
        )
    }
}

export default all_orders;

Here is the file from where I am exporting:

/*
    Contains all URLs and ApiFunctions
 */
import axios from "axios";
import {reactLocalStorage} from "reactjs-localstorage";

import {API_TOKENS} from "../data/storage";
import {errorGettingUserInfoNotification, signINAgainNotification} from "./notifications";


const BASE_URL = "http://127.0.0.1:8000";
axios.defaults.baseURL = BASE_URL;
axios.defaults.headers.get['Content-Type'] = 'application/x-www-urlencoded';


const GET_TOKEN_PAIR = '/sign-in/';
const CREATE_ACCOUNT = '/sign-up/';
const USERNAME_AVAILABLE = '/username/available/';
const REFRESH_ACCESS_TOKEN = '/refresh/';
const USER_DETAILS = "/user/meta/";


export const getAccessToken = () => {
    return new Promise(async (resolve, reject) => {
        const data = reactLocalStorage.getObject(API_TOKENS);

        if (!data)
            return resolve('No User found');

        let access_token = '';
        const expires = new Date(data.expires * 1000);
        const currentTime = new Date();

        if (expires > currentTime) {
            access_token = data.tokens.access;
        } else {
            try {
                const new_token = await loadOpenUrl(REFRESH_ACCESS_TOKEN, {
                    method: 'post',
                    data: {
                        refresh: data.tokens.refresh,
                    }
                });
                access_token = new_token.access;
                const expires = new_token.expires;

                reactLocalStorage.setObject(API_TOKENS, {
                    tokens: {
                        ...data.tokens,
                        access: access_token
                    },
                    expires: expires
                });

            } catch (e) {
                try {
                    if (e.data.code === "token_not_valid")
                        signINAgainNotification();
                    else
                        errorGettingUserInfoNotification();
                } catch (e) {
                    // pass
                }

                return reject('Error refreshing token', e);
            }
        }

        return resolve(access_token);
    });
};

export const loadOpenUrl = async (url, config = {}) => {
    return new Promise((resolve, reject) => {
        axios(url, config)
            .then((res) => resolve(res.data))
            .catch(err => reject(err.response))
    });
};

export const loadSecureUrl = (url, config) => {
    return new Promise(async (resolve, reject) => {
        try {
            const data = await loadOpenUrl(url, {
                ...config,
                headers: {
                    'Authorization': `Bearer ${await getAccessToken()}`
                }
            });
            return resolve(data)
        } catch (e) {
            return reject(e)
        }
    })
};

export const getAPITokens = async (username, password) => {
    return loadOpenUrl(GET_TOKEN_PAIR, {
        data: {
            username: username,
            password: password
        },
        method: "post"
    })
};

export const getUserDetails = () => {

    //TODO: Show loading screen
    const data = loadSecureUrl(USER_DETAILS);

    //TODO: hide loading screen
    return data;
};


export const isUsernameAvailable = async (username) => {
    try {
        return await loadOpenUrl(USERNAME_AVAILABLE, {
            params: {
                username: username
            }
        })
    } catch (e) {
        console.log(e);
        return false
    }

};

export const signUpUser = async (data) => {
    return loadOpenUrl(CREATE_ACCOUNT, {
        method: 'post',
        data: data
    })
};

export const allorders = async (data) => {
    return loadOpenUrl(CREATE_ACCOUNT, {
        method: 'post',
        data: data
    })
};

Error I am getting :

Failed to compile ./src/screens/all_orders.js

Attempted import error: '../helpers/api' does not contain a default export >(imported as 'getAccessToken').

Answer 1

The problem is that you are trying to import a default module (which was exported using export default), but you didn't export any default in your file.

So, because your module is not default exported you have to use brackets like this:

import { getAccessToken } from '../helpers/api'   //Here is the import

or export the module as default

export default const getAccessToken = () => {

then you can use it as you do now.

Check the doc: import

And here is something very useful to understand quick about import/exports: [es6] import, export, default cheatsheet

Answer 2

This import is for default export,

import getAccessToken from '../helpers/api' 

You have exported as named export, you should import like this,

import {getAccessToken} from '../helpers/api' 

Named Export vs Default Export in ES6