How to use “import” in a polymer element

I’m trying something like the following:

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

    <script>
        import data from 'data';

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

            ready() {}
            ...
        }  
    </script>
</dom-module>

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($.sourcemaps.init())
            .pipe($.if('*.html', $.crisper())) // Extract JS from .html files
            .pipe($.if('*.js', $.babel()))
            .pipe($.sourcemaps.write('.'))
            .pipe(gulp.dest('.tmp/'))
            .pipe(gulp.dest('dist/'));
        });
    });
    

    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?