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 'bigmerce/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 'bigmerce/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?

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 'bigmerce/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 'bigmerce/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?

• javascript
• bigmerce
• jspm
• es6-module-loader

• 1 Nothing obvious, no. – Bergi Commented Mar 30, 2016 at 3:36
• 5 You don't happen to have a circular dependency somewhere, do you? – Bergi Commented Mar 30, 2016 at 3:37
• @Bergi not that I can see. I put a breakpoint immediately after the import utils line and the variable is undefined. I am really confused why that is happening. – flyingL123 Commented Mar 30, 2016 at 20:04
• Yes, that sounds a lot like a circular dependency. Can you cut down on your modules to create a plete, reproducible example? – Bergi Commented Mar 30, 2016 at 20:08
• 1 What, no upvotes for the circular dependency suggestion by @Bergi 's in one year?! That was totally it for me when I imported something that was undefined. Thanks. Upvoted ment. – Christiaan Westerbeek Commented Aug 3, 2018 at 14:52

1 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 'bigmerce/stencil-utils';

or

import {hooks} from 'bigmerce/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