I was looking at this code where a class instance is exported in a little bit weird way.
Providing a snipped. It is exported as follows:
class RegisterStore {
#observable success = false
#observable failure = false
#observable errors = {}
...
}
export default new RegisterStore()
export { RegisterStore }
And it is imported as follows in index.js:
import registerStore from './stores/RegisterStore'
...
const stores = {
registerStore
...
}
Why are there two exports at the end of the first code? Is
export default new RegisterStore() AND
const NewRegisterStore = new RegisterStore(); export default NewRegisterStore are equivalent?
No export default new RegisterStore() and export { RegisterStore } are not equal. In export { RegisterStore } you are exporting the class as a part of an export object while in export default new RegisterStore() you are exporting instance of class.
Further. export default new RegisterStore() should be enough to work fine. Exporting again line is useless until you dont want to import multiple variables from the same file. In that case it would be like:
export new RegisterStore();
export const anotherVariable = "TESTTEST";
and import like:
import {RegisterStore, anotherVariable} from './stores/RegisterStore';
Further to your last query:
NO
export default new RegisterStore() AND
export default const RegisterStore = new RegisterStore() are equivalent?
are not equivalent too.
Firstly export default const RegisterStore = new RegisterStore() throws error because RegisterStore is already declared as class and you are again declaring it with const.
Secondly:
export default const NewRegisterStore = new RegisterStore()
is also wrong because default exports have to be either exported as anonymous or the variables have to be declared first before exporting.
For your example it should be like:
let NewRegisterStore; export default NewRegisterStore = new RegisterStore();
So:
export default new RegisterStore() AND
let NewRegisterStore; export default NewRegisterStore = new RegisterStore(); are equivalent
Please read more about "named export" and "export default" here
Related
I have reducer keys
const foo = {
ADD: 1,
REDO: 2,
UNDO: 3,
}
And I want to export it but when importing, I should be able to do
import MyComponent, { ADD, REDO } from '../bar'
The only problem is that I already another thing to export
Here is what my code looks like
export default Component
export { Bar, ...foo} // can't do this, gives me syntax error
export { Bar, ...foo} // can't do this, gives me syntax error
Yes, that is a syntax error. Exports need names so you must do something like the following:
export Bar;
export foo;
But this requires you to import foo:
import { foo } from '../bar'
If you want to import ADD, REDO etc they must be their own named objects:
export const ADD = 1;
export const REDO = 2;
export const UNDO = 3;
I have the following code:
const API1 = new API({
...
})
const API2 = new API({
...
})
export default { API1, API2 }
I need to import like this:
import API1 from '/lib/api'
API1.get()...
But it doesn't work.
I don't want to do this:
import blah from '/lib/api'
blah.API1.get()...
How can I solve this ?
Thanks.
If you need to export multiple items, and don't want to have to create two variables in the consuming module (one for the default import - the object, and another for the API1 property), your only other option is to change the default export to a named export, allowing you to import just one particular named property:
const API1 = new API({
...
})
const API2 = new API({
...
})
export { API1, API2 }
and
import { API1 } from '/lib/api'
API1.get()...
The export { syntax indicates that the export is named, rather than default, and the import { syntax indicates that you're importing a named import, rather than a default import.
(It looks a lot like destructuring, and it's a little bit similar, but it's not the same)
Since you're default exporting an object you need to access individual property to access there methods, Instead you can use named exports
// exporting values
export const API1 = new API({
...
})
export const API2 = new API({
...
})
// Importing values
import { API1 } from '/lib/api'
API1.get()...
I am getting a "Property 'searchStaff' does not exist on type 'typeof UserService'." error in my editor when I try to use this api service class. PS. I am new to typescript.
import axios from "axios";
import { Observable } from "rxjs";
class UserService {
public searchStaff(): Observable<any> {
return Observable.fromPromise(axios.get("./staffs/search"));
}
}
export default new UserService();
I am trying to get data from this class.
const result = UserService.searchStaff();
You can directly put export or export default in your declaration. So you can do:
export class UserService {
}
or
export default class UserService {
}
You can find the different methods of using modules for typescript here.
Also, looking at this line of code, const result = UserService.searchStaff(); are you instantiating UserService? If not, then you have to declare searchStaff as static.
I want to export all methods of a file from another file.
currently I am doing this, and it works. How can I merge below two into 1 export expression
import * as db from './web/query';
export default db;
I tried below written 1 line exports but all failed
export * from './web/query'; //==error
export * as default from './web/query'; //==error
export * as {default} from './web/query'; //==error
export from from './web/query'; //== error
export default from './web/query'; //== error
Error means
import db from '../db/index';
db is undefined here. However the the first methods works
Inside of file './web/query' looks like
export function foo(){}
export function baar(){}
You cannot in ES2016. To create a module namespace object, you need to give it an identifier (like db) in your current module scope, and then re-export that. There's no way around it.
There is however a stage 1 proposal to add the export * as default from … syntax you were trying.
How can I merge below two into 1 export expression
You cannot.
ES2015 (and ES2016) does not provide a syntax that would allow you to import all the named exports from a file and export the object (with those as its properties) as default in a single statement.
You can export the named exports of another file with export * from '<FILE>';.
// a.js
export const one = '1';
export const two = '2';
// b.js
export * from './a.js';
// c.js
import { one, two } from './b.js';
you can do something like this:
a.js:
const fakeName = "Blabla";
const fakeAge = 33;
module.exports = {fakeName, fakeAge}
b.js:
const name = "Someone";
let age = 22;
module.exports = { name, age}
c.mjs:
export * from './a.js';
export * from './b.js';
index.mjs:
import * as AllClass from './c.mjs'
export default AllClass
use it in e.g server.mjs:
import AllClass from './index.mjs'
console.log("fakeName:", AllClass.fakeName);
console.log("NAME:",AllClass.name);
It's just hard not to get confused with ESModule imports/exports and CommonJS imports and exports...
I am currently using ES6 in an React app via webpack/babel.
I am using index files to gather all components of a module and export them. Unfortunately, that looks like this:
import Comp1_ from './Comp1.jsx';
import Comp2_ from './Comp2.jsx';
import Comp3_ from './Comp3.jsx';
export const Comp1 = Comp1_;
export const Comp2 = Comp2_;
export const Comp3 = Comp3_;
So I can nicely import it from other places like this:
import { Comp1, Comp2, Comp3 } from './components';
Obviously that isn't a very nice solution, so I was wondering, if there was any other way. I don't seem to able to export the imported component directly.
You can easily re-export the default import:
export {default as Comp1} from './Comp1.jsx';
export {default as Comp2} from './Comp2.jsx';
export {default as Comp3} from './Comp3.jsx';
There also is a proposal for ES7 ES8 that will let you write export Comp1 from '…';.
Also, bear in mind that if you need to export multiple functions at once, like actions you can use
export * from './XThingActions';
Too late but I want to share the way that I resolve it.
Having model file which has two named export:
export { Schema, Model };
and having controller file which has the default export:
export default Controller;
I exposed in the index file in this way:
import { Schema, Model } from './model';
import Controller from './controller';
export { Schema, Model, Controller };
and assuming that I want import all of them:
import { Schema, Model, Controller } from '../../path/';
default export
// Default export (recommended)
export {default} from './module'
// Default export with alias
export {default as d1} from './module'
all export
// In >ES7, it could be
export * from './module'
// In >ES7, with alias
export * as d1 from './module'
function name export
// export by function names
export { funcName1, funcName2, …} from './module'
// export by aliases
export { funcName1 as f1, funcName2 as f2, …} from './module'
destructured object export
// export destructured object
export const { myVar, myFunction } = myObjectWithEverything
// export destructured object, with renaming
export const { v1: myVar, f1: myFunction } = myBigObject
with array
// it works with array as well
export const [ funcName1, funcName2 ] = myBigArray
More infos: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
Folder structure:
components|
|_ Nave.js
|_Another.js
|_index.js
Nav.js comp inside components folder
export {Nav}
index.js in component folder
export {Nav} from './Nav';
export {Another} from './Another';
import anywhere
import {Nav, Another} from './components'
I've been searching for years how to export modules as both, named exports, and default exports in modular JavaScript. After tons of experimenting, the solution I found is quite simple and efficient.
// index.js
export { default as Client } from "./client/Client.js";
export { default as Events } from "./utils/Events.js";
// Or export named exports
export { Client } from "./client/Client.js";
export { Events } from "./utils/Events.js";
export * as default from "./index.js";
This would allow each exported module to be imported in two ways:
// script.js
import { Client } from "index.js";
new Client();
import module from "index.js";
new module.Client();
// You could also do this if you prefer to do so:
const { Client } = module;
You can mess around with this to have it suit your needs, but it works for me. Hope it helps!
What worked for me was adding the type keyword:
export type { Comp1, Comp2 } from './somewhere';
Install #babel/plugin-proposal-export-default-from via:
yarn add -D #babel/plugin-proposal-export-default-from
In your .babelrc.json or any of the Configuration File Types
module.exports = {
//...
plugins: [
'#babel/plugin-proposal-export-default-from'
]
//...
}
Now you can export directly from a file-path:
export Foo from './components/Foo'
export Bar from './components/Bar'
Good Luck...