I'm trying to re-export in index.js the named exports in userActions.js
namely create, update, delete
and the default export in ScreenA.js
and ScreenB.js
.
I have found two useful references, but i'm still not sure which one in these examples is the correct solution to my case.
I would like to ask which of following 4 methods in index.js will work correctly when i import { create, update, delete, screenA, screenB } from './user';
?
1) export * from '.';
2) export * from './userActions.js';
export * from './ScreenA.js';
export * from './ScreenB.js';
3) export * from './userActions.js';
export {ScreenA} from './ScreenA.js';
export {ScreenB} from './Screenb.js';
4) export * from './userActions.js';
export {default as ScreenA} from './ScreenA.js';
export {default as ScreenB} from './Screenb.js';
userActions.js
export const create = () => {}
export const update = () => {}
export const delete = () => {}
ScreenA.js
const ScreenA = () => ()
export default ScreenA;
ScreenB.js
const ScreenB = () => ()
export default ScreenB;
I'm trying to re-export in index.js the named exports in userActions.js
namely create, update, delete
and the default export in ScreenA.js
and ScreenB.js
.
I have found two useful references, but i'm still not sure which one in these examples is the correct solution to my case.
https://developer.mozilla/en-US/docs/web/javascript/reference/statements/export
https://www.digitalocean./munity/tutorials/react-index-js-public-interfaces
I would like to ask which of following 4 methods in index.js will work correctly when i import { create, update, delete, screenA, screenB } from './user';
?
1) export * from '.';
2) export * from './userActions.js';
export * from './ScreenA.js';
export * from './ScreenB.js';
3) export * from './userActions.js';
export {ScreenA} from './ScreenA.js';
export {ScreenB} from './Screenb.js';
4) export * from './userActions.js';
export {default as ScreenA} from './ScreenA.js';
export {default as ScreenB} from './Screenb.js';
userActions.js
export const create = () => {}
export const update = () => {}
export const delete = () => {}
ScreenA.js
const ScreenA = () => ()
export default ScreenA;
ScreenB.js
const ScreenB = () => ()
export default ScreenB;
Share
Improve this question
edited Jul 30, 2020 at 8:06
kaizen
asked Jul 30, 2020 at 8:01
kaizenkaizen
1,6384 gold badges31 silver badges53 bronze badges
2 Answers
Reset to default 5Please take a look at my below code. As I understand, you have file user/index.js
and some files in the same user
folder and you want to export everything in user/index.js
.
// In your "/user/index.js"
import { create, update, delete } from './userActions';
import screenA from './screenA';
import screenB from './screenB';
export {
create,
update,
delete,
screenA,
screenB
};
// In some other module
import { create, update, delete, screenA, screenB } from './user';
A notable thing is, delete
seem to be a reserved keyword in Javascript, you need to use another name. That's all.
Please feel free if I have misunderstanding or so.
4 is the only one that should work as is, other than the minor character casing typos and reserved word usage.
// This exports the named exports from './userActions.js', which
// in your case are `create`, `update`, and `delete`.
export * from './userActions.js';
// You don't have a named export in the following files, so the
// default export is being re-exported as a named export.
export { default as screenA } from './ScreenA.js';
export { default as screenB } from './Screenb.js';
Why I wouldn't go with the others:
// 1)
// I am not positive, but this seems recursive. When importing a directory, the file
// used is `index.js`, so I don't think `from '.'` would work in the index file.
export * from '.';
// 2)
export * from './userActions.js';
// `export *` re-exports named exports and you don't have a named export in either.
export * from './ScreenA.js';
export * from './ScreenB.js';
// 3)
export * from './userActions.js';
// './ScreenA.js' doesn't have an export named `ScreenA`
export {ScreenA} from './ScreenA.js';
// './ScreenB.js` doesn't have an export named `ScreenB`
export {ScreenB} from './Screenb.js';