Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

karma browserify bundle error with babelify #221

Closed
frankkoenigstein opened this issue Apr 10, 2017 · 3 comments
Closed

karma browserify bundle error with babelify #221

frankkoenigstein opened this issue Apr 10, 2017 · 3 comments

Comments

@frankkoenigstein
Copy link

See also:
#220

Now I like to integrate babelify since some node module is not provided in es5.
My karma.conf.ts now looks like:

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

module.exports = (config) => {
    config.set({
        basePath: ".",

        browserify: {
            debug: true,
            plugin: [["tsify", {
                project: "tsconfig-test.json"
            }]],
            transform: [["babelify", {
                extensions: [".js", ".ts"],
                presets: ["es2015"]
            }]],
        },
        files: [
            "node_modules/@ionic-native/**/*.js",
            "test/karma-test-shim.ts",
            "test/**/*.spec.ts"
        ],
        frameworks: ["jasmine", "browserify"],
        mime: {
            "text/x-typescript": ["ts"]
        },
        phantomjsLauncher: {
            exitOnResourceError: true
        },
        port: 9876,
        preprocessors: {
            "node_modules/@ionic-native/**/*.js": ["browserify"],
            "test/**/karma-test-shim.ts": ["browserify"],
            "test/**/*.spec.ts": ["browserify"]
        },
        reporters: ["dots"],
        colors: true,config.LOG_DEBUG
        logLevel: config.LOG_INFO,
        autoWatch: WATCH,
        browsers: [
            "PhantomJS"
            // "Chromium"
        ],
        singleRun: !WATCH
    });
};

and the bundle error is:

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

TSIFY 14237: Detected case sensitive file system
TSIFY 14237: Using tsconfig file at tsconfig-test.json
TSIFY 14237: Files from tsconfig parse:
TSIFY 14237: Files from browserify entry points:
TSIFY 14237:   /home/frank/git/someapp/node_modules/@ionic-native/barcode-scanner/index.js
TSIFY 14237:   /home/frank/git/someapp/node_modules/@ionic-native/core/bootstrap.js
TSIFY 14237:   /home/frank/git/someapp/node_modules/@ionic-native/core/decorators.js
TSIFY 14237:   /home/frank/git/someapp/node_modules/@ionic-native/core/index.js
TSIFY 14237:   /home/frank/git/someapp/node_modules/@ionic-native/core/plugin.js
TSIFY 14237:   /home/frank/git/someapp/node_modules/@ionic-native/core/util.js
TSIFY 14237:   /home/frank/git/someapp/node_modules/@ionic-native/device/index.js
TSIFY 14237:   /home/frank/git/someapp/node_modules/@ionic-native/network/index.js
TSIFY 14237:   /home/frank/git/someapp/test/karma-test-shim.ts
TSIFY 14237:   /home/frank/git/someapp/test/someapp.spec.ts
TSIFY 14237:   /home/frank/git/someapp/test/services/location.service.spec.ts
TSIFY 14237:   /home/frank/git/someapp/test/services/network.service.spec.ts
TSIFY 14237:   /home/frank/git/someapp/test/services/redux/req.appstart.action.spec.ts
TSIFY 14237:   /home/frank/git/someapp/test/services/shuttle/shuttle.service.spec.ts
TSIFY 14237: Resetting (version 1)
TSIFY 14237: Compiling files:
TSIFY 14237:   /home/frank/git/someapp/node_modules/@ionic-native/barcode-scanner/index.js
TSIFY 14237:   /home/frank/git/someapp/node_modules/@ionic-native/core/bootstrap.js
TSIFY 14237:   /home/frank/git/someapp/node_modules/@ionic-native/core/decorators.js
TSIFY 14237:   /home/frank/git/someapp/node_modules/@ionic-native/core/index.js
TSIFY 14237:   /home/frank/git/someapp/node_modules/@ionic-native/core/plugin.js
TSIFY 14237:   /home/frank/git/someapp/node_modules/@ionic-native/core/util.js
TSIFY 14237:   /home/frank/git/someapp/node_modules/@ionic-native/device/index.js
TSIFY 14237:   /home/frank/git/someapp/node_modules/@ionic-native/network/index.js
TSIFY 14237:   /home/frank/git/someapp/test/karma-test-shim.ts
TSIFY 14237:   /home/frank/git/someapp/test/someapp.spec.ts
TSIFY 14237:   /home/frank/git/someapp/test/services/location.service.spec.ts
TSIFY 14237:   /home/frank/git/someapp/test/services/network.service.spec.ts
TSIFY 14237:   /home/frank/git/someapp/test/services/redux/req.appstart.action.spec.ts
TSIFY 14237:   /home/frank/git/someapp/test/services/shuttle/shuttle.service.spec.ts
TSIFY 14237:   + 8 file(s) found in node_modules
TSIFY 14237: 1.1682 sec -- createProgram
TSIFY 14237: 0.0008 sec -- syntax checking
TSIFY 14237: 1.3829 sec -- semantic checking
TSIFY 14237: Cache write /__tsify__/home/frank/git/someapp/test/karma-test-shim.js
TSIFY 14237: Cache write /__tsify__/home/frank/git/someapp/test/someapp.spec.js
TSIFY 14237: Cache write /__tsify__/home/frank/git/someapp/src/services/location.service.js
TSIFY 14237: Cache write /__tsify__/home/frank/git/someapp/test/services/location.service.spec.js
TSIFY 14237: Cache write /__tsify__/home/frank/git/someapp/src/services/common/network.service.js
TSIFY 14237: Cache write /__tsify__/home/frank/git/someapp/src/services/device.service.js
TSIFY 14237: Cache write /__tsify__/home/frank/git/someapp/src/services/packagemanager.service.js
TSIFY 14237: Cache write /__tsify__/home/frank/git/someapp/src/services/configuration.service.js
TSIFY 14237: Cache write /__tsify__/home/frank/git/someapp/src/services/shuttle/shuttle.worker.js
TSIFY 14237: Cache write /__tsify__/home/frank/git/someapp/src/services/redux/action.js
TSIFY 14237: Cache write /__tsify__/home/frank/git/someapp/src/services/redux/dispatcher.js
TSIFY 14237: Cache write /__tsify__/home/frank/git/someapp/src/services/redux/req.action.js
TSIFY 14237: Cache write /__tsify__/home/frank/git/someapp/src/services/redux/req_appstart.action.js
TSIFY 14237: Cache write /__tsify__/home/frank/git/someapp/src/services/redux/redux.module.js
TSIFY 14237: Cache write /__tsify__/home/frank/git/someapp/src/services/redux/index.js
TSIFY 14237: Cache write /__tsify__/home/frank/git/someapp/src/services/shuttle/shuttle.service.js
TSIFY 14237: Cache write /__tsify__/home/frank/git/someapp/src/services/shuttle/shuttle.worker.service.js
TSIFY 14237: Cache write /__tsify__/home/frank/git/someapp/src/services/shuttle/shuttle.module.js
TSIFY 14237: Cache write /__tsify__/home/frank/git/someapp/src/services/shuttle/index.js
TSIFY 14237: Cache write /__tsify__/home/frank/git/someapp/src/services/tour/tour.data.service.js
TSIFY 14237: Cache write /__tsify__/home/frank/git/someapp/src/services/tour/tour.service.js
TSIFY 14237: Cache write /__tsify__/home/frank/git/someapp/src/services/tour/index.js
TSIFY 14237: Cache write /__tsify__/home/frank/git/someapp/src/services/common/ping.service.js
TSIFY 14237: Cache write /__tsify__/home/frank/git/someapp/src/services/common/index.js
TSIFY 14237: Cache write /__tsify__/home/frank/git/someapp/src/services/helper/alert.service.js
TSIFY 14237: Cache write /__tsify__/home/frank/git/someapp/src/services/helper/loader.service.js
TSIFY 14237: Cache write /__tsify__/home/frank/git/someapp/src/services/helper/index.js
TSIFY 14237: Cache write /__tsify__/home/frank/git/someapp/src/services/logfile.service.js
TSIFY 14237: Cache write /__tsify__/home/frank/git/someapp/src/services/login/auth.service.js
TSIFY 14237: Cache write /__tsify__/home/frank/git/someapp/src/services/login/login.service.js
TSIFY 14237: Cache write /__tsify__/home/frank/git/someapp/src/services/login/index.js
TSIFY 14237: Cache write /__tsify__/home/frank/git/someapp/src/services/theme/theme.service.js
TSIFY 14237: Cache write /__tsify__/home/frank/git/someapp/src/services/theme/index.js
TSIFY 14237: Cache write /__tsify__/home/frank/git/someapp/src/services/services.module.js
TSIFY 14237: Cache write /__tsify__/home/frank/git/someapp/src/services/index.js
TSIFY 14237: Cache write /__tsify__/home/frank/git/someapp/test/services/network.service.spec.js
TSIFY 14237: Cache write /__tsify__/home/frank/git/someapp/test/services/redux/req.appstart.action.spec.js
TSIFY 14237: Cache write /__tsify__/home/frank/git/someapp/test/services/shuttle/shuttle.service.spec.js
TSIFY 14237: 0.3001 sec -- emit program
TSIFY 14237: Compilation completed without errors
TSIFY 14237: Cache read /__tsify__/home/frank/git/someapp/test/karma-test-shim.js
TSIFY 14237: Cache read /__tsify__/home/frank/git/someapp/test/someapp.spec.js
TSIFY 14237: Cache read /__tsify__/home/frank/git/someapp/test/services/location.service.spec.js
TSIFY 14237: Cache read /__tsify__/home/frank/git/someapp/test/services/network.service.spec.js
TSIFY 14237: Cache read /__tsify__/home/frank/git/someapp/test/services/redux/req.appstart.action.spec.js
TSIFY 14237: Cache read /__tsify__/home/frank/git/someapp/test/services/shuttle/shuttle.service.spec.js
10 04 2017 16:39:53.316:ERROR [framework.browserify]: bundle error
10 04 2017 16:39:53.317:ERROR [framework.browserify]: 
/home/frank/git/someapp/node_modules/@ionic-native/network/index.js:10
import { Injectable } from '@angular/core';
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
10 04 2017 16:39:53.326:INFO [karma]: Karma v1.6.0 server started at http://0.0.0.0:9876/
10 04 2017 16:39:53.327:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
10 04 2017 16:39:53.333:INFO [launcher]: Starting browser PhantomJS
TSIFY 14237: Cache read /__tsify__/home/frank/git/someapp/src/services/location.service.js
TSIFY 14237: Cache read /__tsify__/home/frank/git/someapp/src/services/index.js
TSIFY 14237: Cache read /__tsify__/home/frank/git/someapp/src/services/configuration.service.js
TSIFY 14237: Cache read /__tsify__/home/frank/git/someapp/src/services/device.service.js
TSIFY 14237: Cache read /__tsify__/home/frank/git/someapp/src/services/logfile.service.js
TSIFY 14237: Cache read /__tsify__/home/frank/git/someapp/src/services/packagemanager.service.js
TSIFY 14237: Cache read /__tsify__/home/frank/git/someapp/src/services/services.module.js
TSIFY 14237: Cache read /__tsify__/home/frank/git/someapp/src/services/theme/theme.service.js
10 04 2017 16:39:54.263:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket DNarmu_UWPSeb3oJAAAA with id 32648053
TSIFY 14237: Cache read /__tsify__/home/frank/git/someapp/src/services/common/index.js
TSIFY 14237: Cache read /__tsify__/home/frank/git/someapp/src/services/helper/index.js
TSIFY 14237: Cache read /__tsify__/home/frank/git/someapp/src/services/login/index.js
TSIFY 14237: Cache read /__tsify__/home/frank/git/someapp/src/services/redux/index.js
TSIFY 14237: Cache read /__tsify__/home/frank/git/someapp/src/services/shuttle/index.js
TSIFY 14237: Cache read /__tsify__/home/frank/git/someapp/src/services/tour/index.js
TSIFY 14237: Cache read /__tsify__/home/frank/git/someapp/src/services/login/login.service.js
TSIFY 14237: Cache read /__tsify__/home/frank/git/someapp/src/services/login/auth.service.js
PhantomJS 2.1.1 (Linux 0.0.0) ERROR
  Error: bundle error (see logs)
  at /tmp/c2f90c36d6d07c7f4e605262d5d2a11e.browserify:1
PhantomJS 2.1.1 (Linux 0.0.0): Executed 0 of 0 ERROR (0.404 secs / 0 secs)
TSIFY 14237: Cache read /__tsify__/home/frank/git/someapp/src/services/theme/index.js
TSIFY 14237: Cache read /__tsify__/home/frank/git/someapp/src/services/common/network.service.js
TSIFY 14237: Cache read /__tsify__/home/frank/git/someapp/src/services/common/ping.service.js
TSIFY 14237: Cache read /__tsify__/home/frank/git/someapp/src/services/helper/alert.service.js
TSIFY 14237: Cache read /__tsify__/home/frank/git/someapp/src/services/helper/loader.service.js
TSIFY 14237: Cache read /__tsify__/home/frank/git/someapp/src/services/redux/dispatcher.js
TSIFY 14237: Cache read /__tsify__/home/frank/git/someapp/src/services/redux/req_appstart.action.js
TSIFY 14237: Cache read /__tsify__/home/frank/git/someapp/src/services/redux/req.action.js
TSIFY 14237: Cache read /__tsify__/home/frank/git/someapp/src/services/redux/redux.module.js
TSIFY 14237: Cache read /__tsify__/home/frank/git/someapp/src/services/shuttle/shuttle.service.js
TSIFY 14237: Cache read /__tsify__/home/frank/git/someapp/src/services/shuttle/shuttle.module.js
TSIFY 14237: Cache read /__tsify__/home/frank/git/someapp/src/services/shuttle/shuttle.worker.service.js
TSIFY 14237: Cache read /__tsify__/home/frank/git/someapp/src/services/tour/tour.service.js
TSIFY 14237: Cache read /__tsify__/home/frank/git/someapp/src/services/tour/tour.data.service.js
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 someapp package,
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 someapp
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls someapp
npm 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-10T14_39_55_705Z-debug.log

How do I correctly setup karma, browserify, tsify and babelify?
@cartant
Copy link
Contributor

cartant commented Apr 11, 2017 •
edited
Loading

At least part of the problem is that, by default, Babelify does not process the contents of node_modules and, as Browserify doesn't understand ES6 modules, it will explode if it receives one. You need to configure Babelify to transform any ES6 content in node_modules. (Note that the package authors should be using the main and module entries in package.json to support different bundlers, but if you are receiving ES6 content, that does not appear to be the case.)

Some time ago, I answered an SO question related to this that might help:

http://stackoverflow.com/a/39349302/6680611

@frankkoenigstein
Copy link
Author

Thanks. It works with:

        browserify: {
            debug: true,
            plugin: [["tsify", {
                project: "tsconfig-test.json"
            }]],
            transform: [["babelify", {
                extensions: [".js", ".ts"],
                global: true,
                only: /node_modules\/\@ionic-native/,
                presets: ["es2015"]
            }]],
        },

globale: true is important. I'll ask ionic-native to support different bundlers.

@cartant
Copy link
Contributor

cartant commented Apr 11, 2017

Good to hear it's solved. The gist of the main/module thing is explained here. At the time of my writing those notes, there was no real standard. Whether there is now is debatable.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@cartant @frankkoenigstein