How to Re-Export Multiple Named Export and Multiple Default Export in index.js?

Question

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.org/en-US/docs/web/javascript/reference/statements/export

• https://www.digitalocean.com/community/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;

Answer 1

Please 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.