System.import returns empty object

Question

I have a simple module to play with SystemJS and dynamic module loading in javascript:

export default function test() {
    alert('test');
}

That file is processed with my webpack configuration to the following (am I right that is what is called "module"?):

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};

/******/    // The require function
/******/    function __webpack_require__(moduleId) {

/******/        // Check if module is in cache
/******/        if(installedModules[moduleId])
/******/            return installedModules[moduleId].exports;

/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            i: moduleId,
/******/            l: false,
/******/            exports: {}
/******/        };

/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/        // Flag the module as loaded
/******/        module.l = true;

/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }


/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;

/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;

/******/    // identity function for calling harmony imports with the correct context
/******/    __webpack_require__.i = function(value) { return value; };

/******/    // define getter function for harmony exports
/******/    __webpack_require__.d = function(exports, name, getter) {
/******/        if(!__webpack_require__.o(exports, name)) {
/******/            Object.defineProperty(exports, name, {
/******/                configurable: false,
/******/                enumerable: true,
/******/                get: getter
/******/            });
/******/        }
/******/    };

/******/    // getDefaultExport function for compatibility with non-harmony modules
/******/    __webpack_require__.n = function(module) {
/******/        var getter = module && module.__esModule ?
/******/            function getDefault() { return module['default']; } :
/******/            function getModuleExports() { return module; };
/******/        __webpack_require__.d(getter, 'a', getter);
/******/        return getter;
/******/    };

/******/    // Object.prototype.hasOwnProperty.call
/******/    __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };

/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";

/******/    // Load entry module and return exports
/******/    return __webpack_require__(__webpack_require__.s = 445);
/******/ })
/************************************************************************/
/******/ ({

/***/ 445:
/***/ function(module, exports) {

"use strict";
'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.default = test;
function test() {
    alert('test');
}

/***/ }

/******/ });

I have made that file accessible from my web application:

Request URL:http://localhost:8080/test
Request Method:GET
Status Code:200 
Remote Address:[::1]:8080
Response Headers
view source
Cache-Control:no-cache, no-store, max-age=0, must-revalidate
Content-Length:2672
Date:Sun, 01 Jan 2017 16:34:54 GMT
Expires:0
Pragma:no-cache
X-Content-Type-Options:nosniff
X-Frame-Options:DENY
X-XSS-Protection:1; mode=block
Request Headers
view source
Accept:application/x-es-module, */*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:ru-RU,ru;q=0.8,en-US;q=0.6,en;q=0.4
Connection:keep-alive
Cookie:XSRF-TOKEN=ac781d41-fdd4-4bae-9290-e54e960dfa8d; JSESSIONID=57B0C1DDA88DE1D6D4031CC8BCBCCBC9
Host:localhost:8080
Referer:http://localhost:8080/
User-Agent:Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36

Then I added <script src="js/system.js" type="text/javascript"></script> inside a page <head> tag, and write in console:

SystemJS.import('./test').then(m => console.log(m))

which downloads file(I see it through browser dev tools) but outputs empty object into console. Neither m.default or m.test returs anything except undefined.

I expect to be able to call test after importing, what I do wrong?

Answer 1

webpack uses System.import rather than SystemJS.import . Additionally if you are using the latest webpack RC, we are now recommending you use the native spec import() instead.

Here's an example from our github repo on how to use it. https://github.com/webpack/webpack/blob/master/examples/code-splitting-harmony/README.md