Lets say I have a JavaScript file(lib.js) which exports some classes, functions, etc etc.

export class Employment {
    id = "";
    startDate = "";
    endDate = "";
    panyEmailAddress = "";
};


export function HolidayPopupContainer() {
    return (<div id="#HolidayPopupContainer" />);
}

export default withStyles(styles)(Button);

export default class DayView extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            readOnly: false
        }


    };
export const Status = [
    "Select Status",
    "Pending",
    "Approved",
    "Rejected",
    "All"
]

Now this file is saved as lib.js in one of the folder. As this file has exports, those exported can be imported by other JavaScript files.

Is there a way where we can programmatically find the full list of exports from a JavaScript file.

The expected output should be a list/array/json etc. The output for the above mentioned js file would be

Employment
HolidayPopupContainer
withStyles
DayView 
Status 

Can Object.keys be of any help here?

Lets say I have a JavaScript file(lib.js) which exports some classes, functions, etc etc.

export class Employment {
    id = "";
    startDate = "";
    endDate = "";
    panyEmailAddress = "";
};


export function HolidayPopupContainer() {
    return (<div id="#HolidayPopupContainer" />);
}

export default withStyles(styles)(Button);

export default class DayView extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            readOnly: false
        }


    };
export const Status = [
    "Select Status",
    "Pending",
    "Approved",
    "Rejected",
    "All"
]

Now this file is saved as lib.js in one of the folder. As this file has exports, those exported can be imported by other JavaScript files.

Is there a way where we can programmatically find the full list of exports from a JavaScript file.

The expected output should be a list/array/json etc. The output for the above mentioned js file would be

Employment
HolidayPopupContainer
withStyles
DayView 
Status 

Can Object.keys be of any help here?

• javascript
• object
• module.exports

• import * as name from "module-name"; ... now name.Employment, name.HolidayPopupContainer etc is how you'd access he exports (name can be anything you want) - it's all documented here – Jaromanda X Commented Dec 4, 2019 at 11:46
• I haven't tried it so correct me if I'm wrong, but I think you should be able to do import * as Lib from './lib' then Object.keys(Lib). You should remove the default keyword from some of your exports, though, because default will bee a property on lib. – Kobe Commented Dec 4, 2019 at 11:47
• You can use Object.keys if the objects attributes are what you're looking for, attributes in this case being your exported items ? – Pogrindis Commented Dec 4, 2019 at 11:47
• 1 @Kobe ... import defaultExport, * as name from "module-name";? – Jaromanda X Commented Dec 4, 2019 at 11:48
• @JaromandaX I guess that would work, nice one. – Kobe Commented Dec 4, 2019 at 11:49

3 Answers 3

To start with, there should only be one default export in a module. If you fix that, and remove one of the default exports - say, you change DayView to a named export, then with

import * as LibNamespace from './lib.js'

you will have a (namespace) object whose properties are the named exports, plus the default property for the default export. For your code, the keys of this object will be

console.log(Object.keys(LibNamespace))
// ['Employment', 'HolidayPopupContainer', 'default', 'DayView', 'Status']

If you want withStyles to be "named", and included in the above instead of default, you'll need to change it to be a named export instead:

const exportedVar = withStyles(styles)(Button);
export { exportedVar as withStyles };

But that's kind of confusing, because it looks like you already have a variable named withStyles in scope there. Maybe call the exported variable something else:

export const buttonResult = withStyles(styles)(Button);

(or whatever you prefer)

As per documentation - https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Statements/export, there can only be one default export per module.

Apart from above solutions, you can also use dynamic import to get exported names.

// some.js

export const name = "someName";

export class Employment {
    id = "";
    startDate = "";
    endDate = "";
    panyEmailAddress = "";
};

export function HolidayPopupContainer() {
    return "HolidayPopupContainer";
}

export default class DayView  {
    constructor() {

    }
}

export const Status = [
    "Select Status",
    "Pending",
    "Approved",
    "Rejected",
    "All"
]

// index.js

const exportedVar = [];

import('./some.js')
    .then(module => {
        const {default: defaultExport, ...rest} = module;
        exportedVar.push(defaultExport.name, ...Object.keys(rest));
        console.log(exportedVar);
    });

See - https://stackblitz./edit/js-yndmc6

Try unplugin-export-collector. It depends on Node.js.

import { expCollector } from 'unplugin-export-collector/core'

const val = await expCollector('./yourExample.jss') // base on root as default.

console.log(val)

It will log:

[
  'Employment'
  'HolidayPopupContainer'
  'withStyles'
  'DayView'
  'Status' 
]