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).
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
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();
Related
I don't know how to solve this problem.
When I started project vue3.js , console show me this error.
This import in pinia store.
I tryied change first line with import to
"import Vue from 'vue';" (without curcy braces), but error don't disappear.
import { Vue } from 'vue';
import { defineStore } from 'pinia';
import moment from 'moment';
import _ from 'lodash';
import router from '#/router';
if you are using latest version of vue , vue3
this code
import { Vue } from 'vue';
is no longer global instance
Im totally new in Ts so, i was wondering if I can import all classes i have into one ts file then export it from there, so whenever i want any class i can import it directly from this file
import Login from "./Login/login_page";
import MyAccount from "./AccountSettings/myAccount_page";
import Settings from "./AccountSettings/settings_page";
import DataProvider from "../utils/data-provider/data-provider";
export default { Login, MyAccount,Settings, DataProvider};
Yes, You can do it. But there can be atmost one default export in a file. So, you can have it or not, its optional.
So, for example :
import Login from "./Login/login_page";
import MyAccount from "./AccountSettings/myAccount_page";
import Settings from "./AccountSettings/settings_page";
import DataProvider from "../utils/data-provider/data-provider";
export default DataProvider;
export { MyAccount,Settings, DataProvider} ;
or
import Login from "./Login/login_page";
import MyAccount from "./AccountSettings/myAccount_page";
import Settings from "./AccountSettings/settings_page";
import DataProvider from "../utils/data-provider/data-provider";
export {DataProvider, MyAccount,Settings, DataProvider} ;
There are multiple way to import modules. What is the difference between import {House} and import House?
There are two way to import in ES6 module, based on the export option.
Named Import
//filename - simple.js
export function Simple() {}
import {Simple} from "./simple.js"
Default Import
//filename - simple.js
export default Class Simple {}
import Simple from "./simple.js"
For more, refer https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
UPDATE
You can also export both from a single file and import them. Important caveat here is there can be only one default export in a module.
//filename - simple.js
export function Simple1() {}
export default function Simple2() { }
import Simple2, { Simple1 } from "./simple.js"
The syntax import {House} is used to import specific, named imports like import {foo, bar} from '/modules/my-module.js';
while the syntax import House is used to import default exports like import myDefault from '/modules/my-module.js';
As one can see that we can mix these two. For example, this is also a valid import
import myDefault, {foo, bar} from '/modules/my-module.js';
to read more checkout Mozilla developer guide.
I'm getting stuck at the step that requires me to create a firebase/Context.jsx file, which I have done as follows:
import React from 'react';
const FirebaseContext = React.createContext(null);
export default FirebaseContext;
Then in index.js, I try to import Firebase Context as:
import Firebase, { FirebaseContext } from './components/firebase/Context';
I get an error that says:
Attempted import error: 'FirebaseContext' is not exported from
'./components/firebase/Context
How do I export/import in react?
To get rid of the error you posted, in firebase/Context.jsx change it to :
import React from 'react';
export const FirebaseContext = React.createContext(null);
Then import
import { FirebaseContext } from './components/firebase/Context';
Alternatively, leave firebase/Context.jsx file as it is (exporting a default) and change the import to
import FirebaseContext from './components/firebase/Context';
I am trying to figure out why TypeScript is not picking up the "default export" of react. E.g. in my JavScript files I was using:
import React from 'react';
import ReactDOM from 'react-dom';
But in typescript I have to use (after some googling):
import * as React from "react"
import * as ReactDOM from "react-dom"
I am just starting out with a fresh project after being unable to import my existing project and g et VS2k15 to compile it.
What is the difference, if any? Is there a way to specify a "Module 'react' has no default export".
I can see in the React file there is
declare module "react" {
export = __React;
}
Is that not considered a default export
I also tried
import __React from "react"
but get the same error.
A default export is just giving one of the exports the alias "default". You can do this using the following syntax:
export default function __React {
//do work
}
You can also use the following syntax:
function __React {
//do work
}
export {__React as default};