即使在 React 中正确导入后也不包含默认导出 [英] does not contain a default export even after being correctly imported in React

问题描述

我有一个从另一个文件导入 getAccesToken 常量的简单文件.但即使一切都完美定义，我仍然收到此错误.我真的不知道为什么会发生这种情况.我在 SO 上看过类似的问题，但大多数在导入时都有大括号.

PS 这个问题是 这个问题.

这是我导入常量的文件:

import React, {Component} from 'react';从'reactstrap'导入{Card, CardBody, CardHeader, Col, Row, Table};import getAccessToken from '../helpers/api'//这里是导入从reactjs-localstorage"导入{reactLocalStorage}；从../data/storage"导入{API_TOKENS}；从../helpers/notifications"导入{errorGettingUserInfoNotification, signINAgainNotification}；类 all_orders 扩展组件 {状态 = {待办事项:[]};异步 componentDidMount() {尝试 {const res = await fetch('http://127.0.0.1:8000/api/allorders/',{标题:{//您的标头作为键值对，匹配您的 API 期望，例如:详细信息":getAccessToken()}});//在页面加载之前从 api 获取数据const todos = await res.json();控制台日志(待办事项)；this.setState({待办事项});}赶上(e){控制台日志(e)；}}使成为() {//const userList = usersData.filter((user) => user.id <10)返回 (<div className=动画淡入"><行><Col xl={12}><卡片><卡片头><i className="fa fa-align-justify"></i>所有订单<小className="text-muted"></small></卡片头><卡片体><ul className="nav nav-tabs"><li className="nav-item"><a className="nav-link active";href=base/all-orders#/base/hold-orders">Active</a>
<a className="nav-item";href=base/all-orders#/base/hold-orders">链接
<li className="nav-item"><a className="nav-item";href=base/all-orders#/base/hold-orders">链接<li className="nav-item"><a className="nav-link disabled";href=base/all-orders#/base/hold-orders">禁用</a><表格响应悬停><头><tr><th scope="col">Name</th><th scope=col">SKU ID</th><th范围=col">数量</th><th范围=col">维度</th><th范围=col">权重</th><th scope=col">Volume</th><th scope=col">Origin</th><th范围=col">目的地</th><th范围=col">日期</th></tr></thead>{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></表></CardBody></卡片></Col></行>

)}}导出默认all_orders；

这是我导出的文件:

/*包含所有 URL 和 ApiFunctions*/从axios"导入 axios；从reactjs-localstorage"导入{reactLocalStorage}；从../data/storage"导入{API_TOKENS}；从./notifications"导入{errorGettingUserInfoNotification, signINAgainNotification}；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 = '/登录/';const CREATE_ACCOUNT = '/注册/';const USERNAME_AVAILABLE = '/用户名/可用/';const REFRESH_ACCESS_TOKEN = '/refresh/';const USER_DETAILS = "/user/meta/";export const getAccessToken = () =>{返回新的承诺(异步(解决，拒绝)=> {const data = reactLocalStorage.getObject(API_TOKENS);如果(！数据)return resolve('没有找到用户');让 access_token = '';const expires = new Date(data.expires * 1000);const currentTime = new Date();if (expires > currentTime) {access_token = data.tokens.access;} 别的 {尝试 {const new_token = 等待 loadOpenUrl(REFRESH_ACCESS_TOKEN, {方法:'发布'，数据: {刷新:data.tokens.refresh，}});access_token = new_token.access;const expires = new_token.expires;reactLocalStorage.setObject(API_TOKENS, {令牌:{...data.tokens，访问:access_token},过期:过期});}赶上(e){尝试 {if (e.data.code === "token_not_valid")登录再通知()；别的errorGettingUserInfoNotification();}赶上(e){//经过}return reject('刷新令牌出错', e);}}返回解析(access_token)；});};export const loadOpenUrl = async (url, config = {}) =>{返回新的承诺((解决，拒绝)=> {axios(网址，配置).then((res) => resolve(res.data)).catch(err =>reject(err.response))});};导出 const loadSecureUrl = (url, config) =>{返回新的承诺(异步(解决，拒绝)=> {尝试 {const 数据 = 等待 loadOpenUrl(url, {...配置，标题:{'授权':`Bearer ${await getAccessToken()}`}});返回解析(数据)}赶上(e){退货拒绝(e)}})};export const getAPITokens = async (username, password) =>{返回 loadOpenUrl(GET_TOKEN_PAIR, {数据: {用户名:用户名，密码:密码},方法:发布"})};export const getUserDetails = () =>{//TODO: 显示加载屏幕const 数据 = loadSecureUrl(USER_DETAILS);//TODO: 隐藏加载屏幕返回数据；};export const isUsernameAvailable = async (username) =>{尝试 {返回等待 loadOpenUrl(USERNAME_AVAILABLE, {参数:{用户名:用户名}})}赶上(e){控制台日志(e)；返回假}};export const signUpUser = async (data) =>{返回 loadOpenUrl(CREATE_ACCOUNT, {方法:'发布'，数据:数据})};export const allorders = async (data) =>{返回 loadOpenUrl(CREATE_ACCOUNT, {方法:'发布'，数据:数据})};

我遇到的错误:

<块引用>

编译失败./src/screens/all_orders.js

尝试导入错误:'../helpers/api' 不包含默认导出 >(导入为 'getAccessToken').

解决方案

问题是您正在尝试导入 default 模块(使用 export default 导出))，但您没有在文件中导出任何默认值.

因此，由于您的模块不是默认导出的，因此您必须使用如下方括号:

import { getAccessToken } from '../helpers/api'//这里是import

或默认导出模块

export default const getAccessToken = () =>{

那么你就可以像现在一样使用它了.

检查文档:import

这里有一些非常有用的东西，可以快速了解导入/导出:[es6] 导入、导出、默认备忘单

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').

解决方案

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

这篇关于即使在 React 中正确导入后也不包含默认导出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！