Grunt + Browserify + Babelify require/import not respecting single named export, imports entire module instead

I have an init.js file that does some logic and HTML Import appends either form.html or app.html to the main file. This is to save on performance time and load only chunks of code that are needed at the time. I can post the code to illustrate this if needed.

Depending on which HTML import is loaded by init.js, I load a companion script. So for example, if form.html is loaded then I also load form.js.

I am using Browserify + Babelify to transform my scripts from ES6 into ES5 and to create at least 3 bundles: init.js, form.js, and app.js.

Here is my current Gruntfile.js where I configure Browserify to use the Babelify transform and set up src-dest mappings:

module.exports = function(grunt) {



        browserify: {
            init: {
                src: 'src/scripts/init.js',
                dest: 'dist/scripts/init.js'
            form: {
                src: 'src/scripts/form.js',
                dest: 'dist/scripts/form.js'
            options: {
                transform: [
                    ['babelify', {
                        "global": true,
                        presets: [
            browserifyOptions: {
                debug: true,
                    sourceType: 'unambiguous'


    grunt.registerTask('default', ['browserify']);

My init script uses ES6 Imports/Exports and exports a userData to be used in form.js:

'use strict';

export let userData = null;

(function() {

    // do some stuff and assign value to userData


When form.html is imported, form.js loads and imports userData from init.js:

// form.js

import {userData} from './init';

The problem is that instead of importing just userData, form.js imports the entire init.js is imported and bundled so I end up inadvertently importing the entire script when I just need one named variable.

I have tried toggling the global: true option in the gruntfile's task options and experimented with various import/export syntax.

For accuracy, I also use some polyfills in the head of my main file, index.html, to get Web Components, HTML Imports, and Browserify's require syntax to get the code to work in browsers besides Chrome.

    <script type="text/javascript" src="src/scripts/helper/webcomponents-loader.js"></script>
    <script type="text/javascript" src="src/scripts/helper/html-imports.min.js"></script>
    <script src="node_modules/requirejs/require.js"></script>
   <script src="dist/scripts/init.js"></script>

I am new to using Babelify, Browserify and the ES6 modules syntax but perhaps there is an option configuration that I'm failing to implement.

It's also likely I'm missing a fundamental piece of information or doing something wrong at a core level.

I just can't understand or fix why when I try to import a single named module I end up importing the whole script.

Am I missing something?