How to use “import” in a polymer element

I’m trying something like the following:

<dom-module id="my-app">
    <template> <div>{{}}</div> </template>

        import data from 'data';

        class MyApp {
            constructor() { ... }
            beforeRegister() {
       = 'my-app';
       = {
                    data: {
                        type: Object,
                        value: function () {
                            return data;

            ready() {}

So, I have here ES6 too, so I constructed the following gulp task:

  • Uglify source map not working in Chrome (but works in IE11 and Firefox)
  • Making jQuery, Backbone, etc global variables in Browserify
  • Why do I have to use vinyl-source-stream with gulp?
  • Browserify, Babel 6, Gulp - Unexpected token on spread operator
  • ReferencerError: Define is not defined - Browserify
  • Chain Gulp glob to browserify transform
  • gulp.task('js', function () {
        return gulp.src(['app/**/*.{js,html}'])
            .pipe($.if('*.html', $.crisper())) // Extract JS from .html files
            .pipe($.if('*.js', $.babel()))

    This works as long as I don’t have the import data from 'data' line. Now I get the following error in the browser:

    require is not defined

    So, I decided to add browserify to the process just below babel

     .pipe($.if('*.js', $.browserify({ debug: true, extensions: ['.js', '.html'] })))

    Now I get a transpile error

    ParseError: 'import' and 'export' may appear only with 'sourceType: module'

    I think I’m close, but I’m now stuck here unfortunately. To reproduce this I’ve created a github repo here

    You can check it out and do:

    $> cd polymer-es6
    $> npm install
    $> bower install
    $> gulp js

    A bonus question: Why is the constructor not called ? It seems that ready is called instead.

  • lazy loading of components in angular with browserify
  • How does alias in grunt-browserify really work?
  • Packaging-up Browser/Server CommonJS modules with dependancies
  • Use angular template cache with browserify
  • Gulp Typescript + Browserify; Bundled sourcemap points to transpiled JS rather than source TS
  • How to save a stream into multiple destinations with Gulp.js?