karma browserify bundle error

[frankkoenigstein]

With the following karma.conf and specs I face some bundle error:

const WATCH = process.argv.indexOf("--watch") > -1;

module.exports = (config) => {
    config.set({
        basePath: ".",
        browserify: {
            debug: true,
            extensions: [".js", ".ts"],
            plugin: ["tsify"]
        },
        files: [
            "test/karma-test-shim.ts",
            "test/**/*.spec.ts"
        ],
        frameworks: ["jasmine", "browserify"],
        mime: {
            "text/x-typescript": ["ts"]
        },
        phantomjsLauncher: {
            exitOnResourceError: true
        },
        port: 9876,
        preprocessors: {
            "test/**/karma-test-shim.ts": ["browserify"],
            "test/**/*.spec.ts": ["browserify"]
        },
        reporters: ["dots"],
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: WATCH,
        browsers: ["PhantomJS"],
        singleRun: !WATCH
    });
};

karma-test-shim.ts:

import { TestBed } from "@angular/core/testing";
import {
    BrowserDynamicTestingModule,
    platformBrowserDynamicTesting
} from "@angular/platform-browser-dynamic/testing";

TestBed.initTestEnvironment(
    BrowserDynamicTestingModule,
    platformBrowserDynamicTesting()
);

test/some.spec.ts

describe("some", () => {
    it ("should run tests", () => {
        expect(true).toBe(true);
    });
});

31 03 2017 10:22:02.342:INFO [framework.browserify]: registering rebuild (autoWatch=true)
31 03 2017 10:22:06.313:ERROR [framework.browserify]: bundle error
31 03 2017 10:22:06.314:ERROR [framework.browserify]: 
/home/frank/git/someapp/test/karma-test-shim.ts:1
import { TestBed } from "@angular/core/testing";
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
31 03 2017 10:22:06.316:WARN [karma]: No captured browser, open http://localhost:9876/
31 03 2017 10:22:06.322:INFO [karma]: Karma v1.5.0 server started at http://0.0.0.0:9876/
31 03 2017 10:22:06.322:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
31 03 2017 10:22:06.333:INFO [launcher]: Starting browser PhantomJS
31 03 2017 10:22:06.618:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket DwjInIT4GuskAXmdAAAA with id 50553237
PhantomJS 2.1.1 (Linux 0.0.0) ERROR
  Error: bundle error (see logs)
  at /tmp/8b9319764ff28d70be26c7f82b6f08ed.browserify:1
PhantomJS 2.1.1 (Linux 0.0.0): Executed 0 of 0 ERROR (0.073 secs / 0 secs)

Without karma-test-shim.ts => no import some.spec.ts is running. With karma-test-shim.ts browserify does not work.

My package versions are:

  "dependencies": {
    "@angular/common": "2.4.8",
    "@angular/compiler": "2.4.8",
    "@angular/compiler-cli": "2.4.8",
    "@angular/core": "2.4.8",
    "@angular/flex-layout": "^2.0.0-rc.1",
    "@angular/forms": "2.4.8",
    "@angular/http": "2.4.8",
    "@angular/platform-browser": "2.4.8",
    "@angular/platform-browser-dynamic": "2.4.8",
    "@angular/platform-server": "2.4.8",
    "@ionic/storage": "2.0.0",
    "angular2-uuid": "^1.1.1",
    "ionic-angular": "2.2.0",
    "ionic-native": "2.4.1",
    "ionicons": "3.0.0",
    "mdi": "^1.7.22",
    "ng2-translate": "^5.0.0",
    "rxjs": "5.0.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "0.7.2"
  },
  "devDependencies": {
    "@angular/language-service": "^2.4.10",
    "@ionic/app-scripts": "1.1.4",
    "@types/jasmine": "^2.5.41",
    "@types/node": "^7.0.10",
    "browserify": "^14.1.0",
    "connect": "^3.6.0",
    "jasmine": "^2.5.3",
    "jasmine-core": "^2.5.2",
    "jasmine-spec-reporter": "^3.2.0",
    "karma": "^1.5.0",
    "karma-browserify": "^5.1.1",
    "karma-chrome-launcher": "^2.0.0",
    "karma-jasmine": "^1.1.0",
    "karma-phantomjs-launcher": "^1.0.4",
    "ts-node": "^3.0.2",
    "tsify": "^3.0.1",
    "typescript": "^2.2.1",
    "watchify": "^3.9.0"
  },

How can I get more detailed info from browserify andh ow can I fix that?

[cartant]

Thanks for creating a separate issue. I'll have a look into this over the weekend. I have projects that use Angular 2, Tsify and Karma, so what you are doing is something that ought to be possible.

Regarding more information, Tsify uses the NODE_DEBUG environment variable to switch on extra logging. It's detailed here. If you could enable it and include the logged output in this issue, it will likely be helpful.

[cartant]

Your karma.conf.js is very similar to mine. One possible difference is that you have specified extensions: [".js", ".ts"] in your browserify configuration options. I would suggest removing that altogether.

Beyond that, I'd need to see the output that's logged when NODE_DEBUG=tsify is specified to offer further suggestions.

[frankkoenigstein]

Now i changed browserify in karma.conf to:

        browserify: {
            debug: true,
            plugin: [["tsify", {
                project: "tsconfig-test.json"
            }]]
        },

And created tsconfig-test.json:

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "declaration": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [
            "dom",
            "es2015"
        ],
        "module": "es2015",
        "moduleResolution": "node",
        "sourceMap": true,
        "target": "es5"
    },
    "files": []
}

Otherwise all *.ts files from my whole project are read.
With export NODE_DEBUG=tsify,browserify,framework.browserify I got the following output:

> someapp@0.0.1 test /home/frank/git/someapp> karma start

TSIFY 15104: Detected case sensitive file system
TSIFY 15104: Using tsconfig file at tsconfig-test.json
TSIFY 15104: Files from tsconfig parse:
TSIFY 15104: Files from browserify entry points:
TSIFY 15104:   /home/frank/git/someapp/test/karma-test-shim.ts
TSIFY 15104:   /home/frank/git/someapp/test/someapp.ts
TSIFY 15104: Resetting (version 1)
TSIFY 15104: Compiling files:
TSIFY 15104:   /home/frank/git/someapp/test/karma-test-shim.ts
TSIFY 15104:   /home/frank/git/someapp/test/someapp.ts
TSIFY 15104:   + 0 file(s) found in node_modules
TSIFY 15104: 0.3932 sec -- createProgram
TSIFY 15104: 0.0002 sec -- syntax checking
TSIFY 15104: 0.7842 sec -- semantic checking
TSIFY 15104: Cache write /__tsify__/home/frank/git/someapp/test/karma-test-shim.js
TSIFY 15104: Cache write /__tsify__/home/frank/git/someapp/test/someapp.js
TSIFY 15104: 0.018 sec -- emit program
TSIFY 15104: Compilation completed without errors
TSIFY 15104: Cache read /__tsify__/home/frank/git/someapp/test/karma-test-shim.js
TSIFY 15104: Cache read /__tsify__/home/frank/git/someapp/test/someapp.js
03 04 2017 12:27:07.799:ERROR [framework.browserify]: bundle error
03 04 2017 12:27:07.800:ERROR [framework.browserify]: 
/home/frank/git/someapp/test/karma-test-shim.ts:1
import { TestBed } from "@angular/core/testing";
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
03 04 2017 12:27:07.819:INFO [karma]: Karma v1.5.0 server started at http://0.0.0.0:9876/
03 04 2017 12:27:07.819:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
03 04 2017 12:27:07.825:INFO [launcher]: Starting browser PhantomJS
03 04 2017 12:27:08.092:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket yT3a35yiif2NDrVAAAAA with id 67449809
PhantomJS 2.1.1 (Linux 0.0.0) ERROR
  Error: bundle error (see logs)
  at /tmp/4cfcbc160b3f2dd26e4bf6191b6141ef.browserify:1
PhantomJS 2.1.1 (Linux 0.0.0): Executed 0 of 0 ERROR (0.107 secs / 0 secs)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! someapp@0.0.1 test: `karma start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the someapp@0.0.1 test script 'karma start'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the someapppackage,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     karma start
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs someappnpm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls someappnpm ERR! There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/frank/.npm/_logs/2017-04-03T10_27_08_238Z-debug.log

Looks like tsify is fine but browserify isn't. How can I debug browserify and where can I find cached files:

• TSIFY 15898: Cache write /__tsify__/home/frank/git/avLight.App/test/karma-test-shim.js
• TSIFY 15898: Cache write /__tsify__/home/frank/git/avLight.App/test/avlight.spec.js

[frankkoenigstein]

It works fine with tsconfig-test.json:

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "declaration": false,
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "lib": [
            "dom",
            "es2015"
        ],
        "sourceMap": true
    },
    "files": []
}
``

[cartant]

Yep. It will have been the "module": "es2015" that was responsible for the error. Browserify needs "CommonJS" modules.

Also, those files are cached in memory; the /__tsify__/... paths are imaginary.