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?
I think there are two things around this issue:
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';
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