尝试导入错误：“ApiRequests”未从“./ApiRequests”导出

Question

I am new in js and react,so:

i try to export js function:

App.js:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { render } from 'react-dom';
import { LazyLog } from 'react-lazylog';    
import 'bootstrap/dist/css/bootstrap.min.css';
import { Dropdown  } from 'react-bootstrap';
import {ApiRequests} from './ApiRequests'


var textConst="";
var lines=ApiRequests.GetMockLogLines();
textConst=lines;

And ApiRequests.js:

export function GetMockLogLines()
{
 let logs=[""]
 return logs;
}

So, when i compile js (o, my God) it breaks me:

Attempted import error: 'ApiRequests' is not exported from './ApiRequests'.

When i change it to:

 import ApiRequests from './ApiRequests'

->

 Attempted import error: './ApiRequests' does not contain a default export (imported as 'ApiRequests').  

So, i just want to get function from another file. What i do wrong?

And what difference between {} and without it? (you can send me a link start to read,pls).

Answer 1

There is no function named Apirequests in your file. The function you are exporting is GetMockLogLines()

So your import should be

import {GetMockLogLines} from './ApiRequests'

As for the importing difference betweent {} and without the curly braces is how you are exporting your stuff from your file. There are two types of exports - Default export and named exports. One can have only one default export per file and it has to be imported without the curly braces.

You can read more here - https://medium.com/@etherealm/named-export-vs-default-export-in-es6-affb483a0910

Answer 2

you need to import GetMockLogLines directly as it is a named import. change your code to the following.

 import { GetMockLogLines } from './ApiRequests' var lines=GetMockLogLines();