published npm package es6 import does not work

Question

I have trouble in creating a npm module that I can use via es6 imports inside other modules.

I have a folder "1" where I bundle up a simple js class file with the help of gulp:

/1/script.js

export default class npmtest1
{
    static capitalize(string)
    {
        return string.charAt(0).toUpperCase() + string.slice(1);
    }
}

/1/package.json

{
  "name": "npmtest1",
  "version": "1.0.0",
  "main": "script.min.js",
  "license": "MIT",
  "dependencies": {},
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2017": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "babelify": "^8.0.0",
    "browserify": "^16.1.1",
    "gulp": "^3.9.1",
    "gulp-connect": "^5.0.0",
    "gulp-uglify": "^3.0.0",
    "uglify": "^0.1.5",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^2.0.0"
  }
}

/1/gulpfile.js

var gulp = require('gulp'),
    babelify = require('babelify'),
    buffer = require('vinyl-buffer'),
    browserify = require('browserify'),
    source = require('vinyl-source-stream'),
    uglify = require('gulp-uglify');        
gulp.task('js', function()
{
    return browserify({
            entries: ['./script.js']
        })
        .transform(babelify.configure({
            presets : ['es2015', 'es2017'],
            plugins : ['transform-runtime']
        }))
        .bundle()
        .on('error', function(err) { console.log(err.toString()); this.emit('end'); })
        .pipe(source('script.min.js'))
        .pipe(buffer())
        .pipe(uglify())
        .pipe(gulp.dest('.'));
});    
gulp.task('default', ['js']);

Then I publish this module via "npm publish".

In another folder "2" I have a quite similiar setup:

/2/script.js

import npmtest1 from 'npmtest1';
alert(npmtest1.capitalize('foo'));

/2/package.json

{
  "dependencies": {
    "npmtest1": "^1.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2017": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "babelify": "^8.0.0",
    "browserify": "^16.1.1",
    "gulp": "^3.9.1",
    "gulp-connect": "^5.0.0",
    "gulp-uglify": "^3.0.0",
    "uglify": "^0.1.5",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^2.0.0"
  }
}

/2/gulpfile.js

var gulp = require('gulp'),
    babelify = require('babelify'),
    buffer = require('vinyl-buffer'),
    browserify = require('browserify'),
    source = require('vinyl-source-stream'),
    uglify = require('gulp-uglify');

gulp.task('js', function()
{
    return browserify({
            entries: ['./script.js']
        })
        .transform(babelify.configure({
            presets : ['es2015', 'es2017'],
            plugins : ['transform-runtime']
        }))
        .bundle()
        .on('error', function(err) { console.log(err.toString()); this.emit('end'); })
        .pipe(source('script.min.js'))
        .pipe(buffer())
        .pipe(uglify())
        .pipe(gulp.dest('.'));
});

gulp.task('default', ['js']);

When I embed script.min.js inside a html file, I get the following error:

Uncaught TypeError: i.default.capitalize is not a function

Am I missing something? This is a very basic task.

Answer 1

Ok, bad mistake: I tried to import a module bundled with browserify/babelify.

Instead I had to use gulp-babel to convert all js files to es2015.