Module interpreted as global module format, but called System.register

[alexcastillo]

Hi,

Thanks for the great work with karma-jspm

After much trial and error setting up jspm and karma-jspm, I've hit a wall with the following error:

This is may karma config file:

'use strict';

module.exports = function (config) {
    config.set({

        basePath: '../..',
        browsers: ['Chrome'],

        frameworks: ['jspm', 'jasmine'],

        plugins: [
            'karma-jspm',
            'karma-jasmine',
            'karma-junit-reporter',
            'karma-babel-preprocessor',
            'karma-coverage',
            'karma-phantomjs-launcher',
            'karma-chrome-launcher'
        ],

        // list of files / patterns to load in the browser
        jspm: {
            config: 'src/system.config.js',
            loadFiles: [
                'src/js/**/*.js',
                'src/app.js',
                'tests/unit/**/*.js'
            ],
            paths: {
                'src/*': 'base/src/*',
                'tests/*': 'base/tests/*',
                'github:*': 'base/src/jspm_packages/github/*',
                'npm:*': 'base/src/jspm_packages/npm/*',
            }
        },

        // transpile with babel since the coverage reporter throws error on ES6 syntax
        babelPreprocessor: {
            options: {
                modules: 'system'
            }
        },

        proxies:  {
            '/src/': '/base/src/',
            '/tests/': '/base/tests/',
            '/jspm_packages/': '/base/jspm_packages/'
        },

        reporters: ['dots', 'coverage'],

        preprocessors: {
            'tests/unit/**/*.js': ['babel', 'coverage'],
            'src/app.js': ['babel', 'coverage'],
            'src/js/**!(templates)/*.js': ['babel', 'coverage']
        },

        coverageReporter: {
            type : 'html',
            dir : 'coverage/'
        },

        port: 8089,

        runnerPort: 9109,

        // enable / disable colors in the output (reporters and logs)
        colors: true,

        // enable / disable watching file and executing tests whenever any file changes
        autoWatch: false,

        // polling interval in ms (ignored on OS that support inotify)
        autoWatchInterval: 0,

        // Continuous Integration mode
        // if true, it capture browsers, run tests and exit
        singleRun: true

    });
};

My tree structure:

/node_modules
/src
  /jspm_packages
  /js (all scripts)
  app.js (main angular module, imports jspm dependencies and the rest of the modules from /js)
  system.config.js (jspm config)
/tests/
  /config
    /unit.js (karma config)
  /unit (all tests)
package.json

Tagging relevant people: @computmaxer @guybedford

Thanks in advanced!

[larrifax]

I'm experiencing the same problem using pre-transpiled Typescript files (to ES5). I suspected the paths declaration in karma config was the culprit, but after some testing I get the same error without a paths declaration.

I also have nothing too fancy going on in my systemjs config if that's any help:

System.config({
  defaultJSExtensions: true,
  transpiler: "none",
  paths: {
    "github:*": "jspm_packages/github/*",
    "npm:*": "jspm_packages/npm/*"
  },

  packages: {
    "app": {
      "main": "bootstrap"
    }
  },

  map: {
     ...
  }
});

[alexcastillo]

Hi @larrifax

Good to know I'm not the only one. Can you please share your karma config file?

Thanks!

[larrifax]

Sure, my karma.conf.js looks like this:

// Karma configuration
// Generated on Fri Oct 09 2015 13:16:11 GMT+0200 (W. Europe Daylight Time)

module.exports = function (config) {
    config.set({

        // base path that will be used to resolve all patterns (eg. files, exclude)
        basePath: "",

        // frameworks to use
        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
        frameworks: ["jspm", "jasmine"],

        // list of files / patterns to load in the browser
        files: [
        ],

        jspm: {
            loadFiles: ["build/**/*.spec.js"],
            serveFiles: ["wwwroot/app/**/*.js"],
            stripExtension: false,
            paths: {
                "app/*": "wwwroot/app/*",
                "build/*": "build/*"
            }
        },

        // list of files to exclude
        exclude: [
        ],

        // preprocess matching files before serving them to the browser
        // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
        preprocessors: {
            "build/**/*.spec.js": ["sourcemap"],
            "wwwroot/app/**/*.js": ["sourcemap", "coverage"]
        },

        // test results reporter to use
        // possible values: 'dots', 'progress'
        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
        reporters: ["progress", "notify", "coverage"],

        // web server port
        port: 9876,

        // enable / disable colors in the output (reporters and logs)
        colors: true,

        // level of logging
        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
        logLevel: config.LOG_WARN,

        // enable / disable watching file and executing tests whenever any file changes
        autoWatch: true,

        // start these browsers
        // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
        browsers: ["Chrome"],

        // Continuous Integration mode
        // if true, Karma captures browsers, runs the tests and exits
        singleRun: false,

        coverageReporter: {
            type: "html",
            dir: "build/coverage/"
        }
    });
}

[alexcastillo]

@larrifax Thanks.

I just tried without coverage reporter and now I'm getting 404 errors instead. Can you try without coverage?

[larrifax]

Removing coverage produces 404 errors instead. I'm getting 404's for files in jspm_packages, which it tries to get from /base/jspm_packages/... instead of the correct /base/wwwroot/jspm_packages/.... The weird thing is that system.src.js (in which the 404's happen) is correctly loaded from /base/wwwroot/jspm_packages/

[larrifax]

I got rid of the 404's from loading jspm_packages by using karma proxies as shown in #24. All my 404 errors are now gone.

Re-adding coverage still gives the original error though. Seems like karma-coverage (or istanbul) is the culprit.

[larrifax]

I think the instrumenter code from karma-coverage/istanbul is causing systemjs to guess the incorrect module format. See https://github.com/systemjs/systemjs/issues/831.

Adding the following to https://github.com/Workiva/karma-jspm/blob/master/src/adapter.js#L35 makes coverage work again:

meta: {
    'app/*': { format: 'register' }
}

@alexandercastillo can you verify that this fixes your problem?

EDIT: Changed format: 'system' to format: 'register'

[alexcastillo]

No luck @larrifax

Are you still getting errors or were you able to run your tests?

[larrifax]

I'm able to run a very simple test that imports another file yes. Will try with some more advanced tests tomorrow.

[alexcastillo]

@larrifax Your suggestion worked. Thank you!

I'm going to submit a PR to support meta in the karma-jspm config. I wasn't able to make it work without it.

[HNeukermans]

experienced the same problem. Found a solution by setting the module property of tsconfig.json to module : 'commonjs' instead of module : 'system'. Apparently settings module to "system", transpiles your . js files with system.register(...)

[playground]

@larrifax I tried your suggestion but still getting the same error.

meta: { 'app/*': { format: 'register' } }

I'm using in my karam.config frameworks: ['systemjs', 'jspm', 'jasmine'], plugins:[ "karma-jspm", 'karma-jasmine', 'karma-chrome-launcher', "karma-systemjs", "karma-coverage" ],

[larrifax]

@playground You shouldn't need to use both the karma-jspm and the karma-systemjs plugin. Maybe the systemjs plugin is interfering with the jspm plugin?

[playground]

@larrifax I got it working with using both jspm and systemjs. Thanks.

[bardius]

@playground could you please explain how you managed to get the coverage working with both karma-jspm and karma-systemjs?

[playground]

@bardius here is my karma.config.js that works for me.

var wuSrc = 'src'; module.exports = function(config) { config.set({ basePath: '', frameworks: ['systemjs', 'jspm', 'jasmine'], plugins:[ "karma-jspm", 'karma-jasmine', 'karma-chrome-launcher', "karma-systemjs" ], autoWatchBatchDelay: 1000, systemjs: { configFile: "config.js", serveFiles: [ 'src//_.html' ], includeFiles: [ 'jspm_packages/npm/reflect-metadata@0.1.3/Reflect.js', '../custom/angularmods/assets/jquery/1.8/jquery.js', '../../themes/custom/omnibus/js/foundation/6.2.0/foundation.js' ], config: { baseURL: '/', paths: { 'systemjs': 'jspm_packages/system.js', 'system-polyfills': 'jspm_packages/system-polyfills.js', 'typescript': 'node_modules/typescript/lib/typescript.js', 'es6-module-loader': 'nodemodules/es6-module-loader/dist/es6-module-loader.js' }, packages: { "src": { //"defaultExtension": false } }, testFileSuffix: '.spec.js' } }, files: [ 'karma-ng2-bootstrap.js', wuSrc + '/testing/boot.js', wuSrc + '/testing/mocks/endpoints/.js', wuSrc + '//_.spec.js' ], jspm: { //packages: 'jspm_packages/', loadFiles: [wuSrc + '//.spec.js'], serveFiles: [ wuSrc + '/*/.js', wuSrc + '/**/.map', wuSrc + '//_.ts', wuSrc + '/*/.css', wuSrc + '/*/.{scss,sass}', ] }, // TODO: work on relative path to sourcemap for karma proxies : { // avoid Karma's ./base virtual directory '/src/': '/base/' + wuSrc }, preprocessors: { }, reporters: ['dots'], port: 9876, // enable / disable colors in the output (reporters and logs) colors: true, // level of logging // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG logLevel: config.LOG_ERROR, singleRun: false, browsers: ['Chrome'] }) }