How to export a ES6 class with Webpack and Babel to AMD

Question

I'm trying to write a class in ES6 and transpile it into a library as an AMD module with Babel (and bundle with jQuery in the same file) so people can use it like this:

<script src="Foo.js"></script>
<script>
    var dummy = new Foo();
</script>

I followed the solution here and arrange my folder like this:

-dist
-js
  |--Foo.js
  |--main.js
-lib
  |--jquery.js
-node_modules
-webpack.config.js
-.babelrc
-.eslintrc
-package.json

and Foo.js:

import $ from '../lib.jquery.js';

export default class Foo {
    constructor(){
        /* jQuery stuff */
    }
}

and main.js:

module.exports = require('./Foo.js').default;

and webpack.config.js:

require('babel-polyfill');
const path = require('path');
const webpack = require('webpack');

module.exports = {
    name: "bundle-js",
    entry: {
        Foo: [
            // configuration for babel6
            'babel-polyfill',
            './js/main.js'
        ]
    },
    output: {
        path: path.resolve(__dirname, 'dist'),  // ./build
        filename: '[name].bundle.js',
        library: 'Foo',
        libraryTarget: 'umd'
    },
    module: {
        rules: [{
            test: /\.js$/,
            loader: ['babel-loader', 'eslint-loader'],
            exclude: /node_modules/,
        }]
    },
    stats: {
        colors: true
    },
    devtool: 'source-map'
};

and .babelrc:

{
    "plugins": ["transform-es2015-modules-amd"],
    "presets": ["react", "es2015","stage-0"]
}

And I kept getting this error:

js/main.js: Property object of MemberExpression expected node to be of a type ["Expression"] but instead got null

Can somebody please help me and tell me what went wrong so I can fix it? AMD is more of my preference, so if someone has a solution that uses CommonJS and does the same thing, I'm open to it.

Edit: To avoid distraction, this problem has nothing to do with Webpack, as I used the command babel --presets es2015 --plugins transform-es2015-modules-amd js/main.js -o dist/Foo.bundle.js and still have the same error.

Maybe I'm missing something here, but why are you using webpack with AMD? Webpack is a *bundler*, and AMD is for async script loading... seems to me with your `.babelrc` that you could just skip webpack? — Jared Smith, Feb 08 '17 at 13:20
Since `Class` is ES6 syntax, so I want to transpile it to ES5 with babel so most browser can still support it. I tried transpiling without using Webpacj but with the command `babel --presets es2015 --plugins transform-es2015-modules-amd js/main.js -o dist/Foo.bundle.js` but it still gives me the same error. — kevguy, Feb 08 '17 at 13:25
Throwing random build tools at errors you don't understand won't fix them. So lets start at the beginning: are you including `require.js` in a script tag on your page? What does your load order look like? Side note: if you have a `.babelrc` why are you manually passing CLI parameters? Last but not least, if you are intent on releasing this as a *library* you should arguably use UMD for maximum ease of use. — Jared Smith, Feb 08 '17 at 13:28
@JaredSmith The error happens when I try to run `npm run webpack`. `RequireJS` is also already installed. — kevguy, Feb 08 '17 at 13:47
Again, **why are you using webpack!?!?** Nothing about any of this makes any sense at all. You say its a library but your bundling jquery instead of listing it as a dep in `package.json`, trying to bundle the whole thing with webpack, presenting it as an AMD even though CJS is far more popular (and you can support both with UMD), etc. etc. May I respectfully suggest that if you ever expect this to get used you need to take a long hard look at how popular existing libraries actually handle these things. — Jared Smith, Feb 08 '17 at 13:55
@JaredSmith Thank you for your comment. I'm already considering alternative options other than webpack. I only used it because I was sorta of hyped about Webpack 2.0, but writing the cofig is still very painful for me. I'm already using Babel to test my code now. Like I said, I got the same error even using an `babel`command, so the problem should have something to do with `babel` instead of Webpack. I only included jQuery as an example, I actually wrote something else into the lib folder, I thought replacing it with jQuery in the question avoids distraction. — kevguy, Feb 08 '17 at 14:02
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/135184/discussion-between-kevlai22-and-jared-smith). — kevguy, Feb 08 '17 at 14:06

score 0 · Answer 1 · answered Feb 08 '17 at 14:12

0

This is a problem with the AMD transformer plugin, something you are trying to include uses require which it can't handle. See this github issue for details. Try the UMD plugin instead, especially since you say you want to release this as a library.

answered Feb 08 '17 at 14:12

Jared Smith

19,721
5
45
83

score -1 · Answer 2 · answered Feb 08 '17 at 12:55

-1

I don't know what is wrong in yours but my way is below:

install jquery via npm

npm i jquery;

then configure webpack.conf

resolve: {
    alias: {
        $: "jquery",
        jQuery: "jquery",
    },
...
// for jquery plugins
new webpack.ProvidePlugin({
   'jQuery': 'jquery',
   'window.jQuery': 'jquery',
   'window.$': 'jquery',
}),

...

and import jquery

import $ from 'jquery';

answered Feb 08 '17 at 12:55

Cenk Çetinkaya

139
6

I don't think it has anything to do with jQuery, I tried doing the same thing without the `import $ from '../lib.jquery.js';` statement and I still have the same error. – kevguy Feb 08 '17 at 12:59

How to export a ES6 class with Webpack and Babel to AMD

2 Answers2