No exported types in UMD module using WebPack, Babel and ES2015

Question

I have problems with WebPack and exported classes using UMD module library. The problem is that when I try to load packed bundle into browser, then the exported object is empty (there are no properties that would match exported objects).

I created simple testing project for this:

Project structure

~/Playground/webpack-exports-test tree -I node_modules
.
├── build
│   ├── test.html
│   ├── testlib.js
│   └── testlib.js.map
├── bundle.js
├── package.json
├── src
│   ├── a.js
│   └── b.js
└── webpack.config.js

webpack.config.js

let path = require('path');
let libraryName = 'testlib';
let bundleName = libraryName + '.js';

module.exports = {
    context: __dirname,
    entry: './bundle.js',
    output: {
        path: path.join(__dirname, 'build'),
        filename: bundleName,
        library: libraryName,
        libraryTarget: 'umd',
        umdNamedDefine: true
    },
    devtool: 'source-map',
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015']
                }
            }
        ]
    }
};

package.json

{
    "name": "webpack-exports-test",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "babel-core": "^6.18.2",
        "babel-loader": "^6.2.8",
        "babel-preset-es2015": "^6.18.0",
        "webpack": "^1.13.3"
    }

}

src/a.js

export class A {
}

src/b.js

import {A} from './a.js'

export class B extends A {
}

bundle.js

import {A} from './src/a.js'
import {B} from './src/b.js'

When I tried debugging the code generated by WebPack then it seems that class objects are properly created, passed to exports but nothing is returned to global object.

Any help please?

Martin Macak Martin Macak · Accepted Answer · 2016-11-29T13:47:57

I found an answer to that. The problem was that entry bundle.js was not exporting any symbol.

This makes it work

import {A} from './src/a.js'
import {B} from './src/b.js'
export {A as A}
export {B as B}

No exported types in UMD module using WebPack, Babel and ES2015

1 Answers