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.

Answer 2

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';