es6-module default export importing as undefined

Question

I'm not sure what I'm missing here. I'm working on a project using jspm and es6-module-loader. I've got an module defined as follows:

import hooks from './hooks';
import api from './api';
import tools from './tools';

const StencilUtils = {
    hooks: hooks,
    api: api,
    tools: tools,
};

export {hooks, api, tools};
export default StencilUtils;

/* global define */
(function(root) {
    if (typeof define === 'function' && define.amd) {
        define(function() {
            return (root.stencilUtils = StencilUtils);
        });
    } else if (typeof module === 'object' && module.exports) {
        module.exports = StencilUtils;
    } else {
        window.stencilUtils = StencilUtils;
    }
}(this));

I'm importing this module in another file, and using it like so:

import utils from 'bigcommerce/stencil-utils';

utils.hooks.on('cart-item-add', (event, form) => {
    // do stuff
});

When the files load, I get an error that utils is undefined. If I change the file to this:

import {hooks} from 'bigcommerce/stencil-utils';

hooks.on('cart-item-add', (event, form) => {
    // do stuff
});

It works correctly. So, it appears something is not working correctly with the default export statement. Is there something obviously wrong here with the import or export statements that would cause this issue?

Answer 1

I think there are two things around this issue:

1. When you have named exports your access them through either importing as library or with object destruction.

Method 1

xyz.js

export const a = 1;

abc.js

import {a} from "xyz";

Method 2

xyz.js

export const a = 1;

abc.js

import {* as myModule} from "xyz";
console.log(myModule.a);

So in your case

export {hooks, api, tools};

it can be either

import * as utils from 'bigcommerce/stencil-utils';

or

import {hooks} from 'bigcommerce/stencil-utils';

2. Default export statement is not proper

It can either be

export default {
    hooks: hooks,
    api: api,
    tools: tools,
};

Or

const StencilUtils = {
   hooks: hooks,
   api: api,
   tools: tools,
};
export { StencilUtils as default };

Hope this will help you. For more details see this