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.

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

How to use es6 library #87

Closed
Necroskillz opened this issue Feb 6, 2017 · 13 comments

Comments

Projects
None yet
6 participants
@Necroskillz
Copy link

commented Feb 6, 2017

Hi,

I wanted to use lodash-es in my angular 2 project, but (understandably as it is es6 only package), it fails with Error: Invalid syntax in bundle: 'import' and 'export' may only appear at the top level. This package works well with typescript, rollup and webpack, so it would be nice to be able to use it.

Is there any way to use such libraries with karma-typescript?

@fchiumeo

This comment has been minimized.

Copy link
Contributor

commented Feb 6, 2017

How are you configured karma and tsconfig ?

@Necroskillz

This comment has been minimized.

Copy link
Author

commented Feb 6, 2017

no special settings for this.

Here is how you can reproduce (in example-project@angular2 for example):

  • npm i -D lodash-es @types/lodash-es
  • (src/app/hello.ts) import forEach from 'lodash-es/forEach';
  • npm test
@erikbarke

This comment has been minimized.

Copy link
Collaborator

commented Feb 6, 2017

Hey @Necroskillz, to make this work you would need to run lodash-es through, for instance, Babel which will be possible with some new features I'm currently working on, see #69, #72, #66.

@kevindqc

This comment has been minimized.

Copy link

commented Feb 9, 2017

I have the same problem with @ngrx/effects.

The part that triggers the problem:
I'm having a similar problem:
09 02 2017 17:25:55.529:ERROR [karma]: Error: Invalid syntax in bundle: 'import' and 'export' may only appear at the top level (104970:196) in C:\Users\KDoyon\AppData\Local\Temp\karma-typescript-bundle-22760MK8oQfzjJJPT.js

Looking at line 104970 in the bundle, it is:

global.wrappers['node_modules/@ngrx/effects/testing/index.js']=[function(require,module,exports,__dirname,__filename){ export * from './runner';
export * from './testing.module';

},'node_modules/@ngrx/effects/testing/index.js',{}];
@erikbarke

This comment has been minimized.

Copy link
Collaborator

commented Feb 10, 2017

@kevindqc, check my answer in #69!

@erikbarke erikbarke added this to the 2.1.8 milestone Feb 12, 2017

@Safiyya

This comment has been minimized.

Copy link

commented Feb 14, 2017

Glad to see someone with the same issue @Necroskillz ! I was pulling my hair out with d3-ng2-service (from https://github.com/tomwanzek/d3-ng2-service).

These steps

  • npm install d3-ng2-service
  • import { D3Service } from 'd3-ng2-service'; in src/app/hello.ts
  • npm test

give me Error: Invalid syntax in bundle: 'import' and 'export' may only appear at the top level

@erikbarke

This comment has been minimized.

Copy link
Collaborator

commented Feb 15, 2017

@Safiyya, thanks for your input, I'll add that as a test case when I develop this new feature!

erikbarke added a commit that referenced this issue Feb 21, 2017

erikbarke added a commit that referenced this issue Feb 26, 2017

@erikbarke

This comment has been minimized.

Copy link
Collaborator

commented Feb 28, 2017

Hey guys, karma-typescript now have a plugin API for transforming source code in the bundling step and one of the first plugins is karma-typescript-es6-transform. The configuration is dead simple:

$ npm install --save-dev karma-typescript-es6-transform
karmaTypescriptConfig: {
    bundlerOptions: {
        transforms: [
            require("karma-typescript-es6-transform")()
        ]
    }
}

I've added an integration test using the npm packages reported in this thread that passes on Travis and Appveyor 😃

@Safiyya

This comment has been minimized.

Copy link

commented Feb 28, 2017

Sounds great, will try it this week and come back to you. Thanks !

@Safiyya

This comment has been minimized.

Copy link

commented Mar 1, 2017

Works like a charm, problem solved with npm install --save-dev https://github.com/monounity/karma-typescript.git#2.1.8. Cheers :)

@erikbarke

This comment has been minimized.

Copy link
Collaborator

commented Mar 1, 2017

@Safiyya, awesome!!

@erikbarke

This comment has been minimized.

Copy link
Collaborator

commented Mar 5, 2017

3.0.0-beta.1 is on npm now with support for ES6:

npm install karma-typescript@beta
npm install karma-typescript-es6-transform@latest

(2.1.8 ended up having so much new functionality + breaking changes it was renamed to 3.0.0)

@erikbarke erikbarke closed this Mar 11, 2017

@StevenLiekens

This comment has been minimized.

Copy link

commented May 31, 2018

@erikbarke Excuse me if this is a dumb question but why would you use Babel with TypeScript? The TypeScript compiler already has the ability to lower ES6 imports/exports to something else.

https://www.typescriptlang.org/docs/handbook/modules.html#code-generation-for-modules

Anyway this is something that should just work with a default install of karma-typescript, without additional plugins or config. It's 2018 and ES modules ain't going nowhere.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.