David Gomes David Gomes - 1 year ago 188
Javascript Question

Exporting a class with Webpack and Babel not working

I have a very simple setup with Webpack and Babel for a small library.

Before, I had the following architecture to generate a ES5 version of the library:

module.exports.lib = (function () {
/* private part of library here */

return {
... /* public part of library here */

Everything is working fine this way, and I even had some ES6 features such as arrow functions inside my library and everything worked. However, I decided to change my approach to a ES6 class, this way:

export default class Library {


And now, when I try to do:

var library = new Library();

I get that Library was not defined. Even just evaluating
returns undefined.

So what I did was turn the file that uses the library into an ES6 file that does
import Library from 'libraryfile.js'
and it worked again.

However, I'd really like my output library to still be usable from regular ES5 with a
tag just like before. Is this possible?

Here's my webpack config file:

module.exports = {
entry: {
pentagine: "./lib/pentagine.js",
demos: ["./demos/helicopter_game/PlayState.js"]

output: {
path: __dirname,
filename: "./build/[name].js",
libraryTarget: 'umd'

module: {
loaders: [
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']

Answer Source

Default exports are stored in the default property of the module. If you want to make your library accessible without users having to know that, you can change your webpack entry file to

module.exports = require('./libraryfile').default;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download