How do I instantiate an object with transpiled ES6 code in Express?

Question

I am sure I'm missing something very simple, but I can't create objects using my node code. I am using webpack & Babel 6 to transpile for me. Trying to learn by following these instructions: http://blog.jeffdouglas.com/2015/05/06/start-writing-es6-javascript-in-your-node-js-apps-today/

Here is my ES6 class:

export default class ProcessData {
    constructor() {
        let output = "Module: 'Process Data' created.";
        console.log(output);
    }
}

Here is my route where I am trying to use it:

var express = require('express');
var router = express.Router();
var ProcessData = require('../public/node/bundle.node.js').default;

var processor = new ProcessData();

router.get('/', function (req, res, next) {
    res.render('index', {});
});

router.post('/results', function (req, res) {
    res.render('results', req.body);
});

module.exports = router;

Here is the transpiled file:

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};

/******/    // The require function
/******/    function __webpack_require__(moduleId) {

/******/        // Check if module is in cache
/******/        if(installedModules[moduleId])
/******/            return installedModules[moduleId].exports;

/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            exports: {},
/******/            id: moduleId,
/******/            loaded: false
/******/        };

/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/        // Flag the module as loaded
/******/        module.loaded = true;

/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }


/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;

/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;

/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";

/******/    // Load entry module and return exports
/******/    return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports) {

    "use strict";

    var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

    Object.defineProperty(exports, "__esModule", {
        value: true
    });

    function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

    var ProcessData = (function () {
        function ProcessData() {
            _classCallCheck(this, ProcessData);

            var output = "Module: 'Process Data' created.";
            console.log(output);
        }

        return ProcessData;
    })();

    exports.default = ProcessData;

/***/ }
/******/ ]);

Here is the error I keep getting (There is a caret under the 'n' in new):

var processor = new ProcessData();

TypeError: ProcessData is not a function

Can you post the contents of `bundle.node.js`? If that has all the ES6 modules *bundled*, as its name suggests, you probably have to import it differently. — Bergi, Dec 15 '15 at 13:28
It doesn't look as if the bundle would export anything. I'd recommend a) not to use webpack for server code b) use ES6 modules everywhere, including your router module — Bergi, Dec 15 '15 at 13:53
@Bergi Thanks! Do you have any good resources I can use to learn from? — BackPacker777, Dec 15 '15 at 14:42
Please read tag descriptions! [tag:babel] is for questions about a Python library with that name. — Felix Kling, Dec 15 '15 at 14:43

Swaraj Giri · Accepted Answer · 2015-12-15T13:40:18.630

1

You don't need default or babel really.

var ProcessData = require('path/to/es6-class.js');

When you are not sure what you are getting from require, put a console.log around it.

Note - You probably need to take a deeper dive into es6 classes and you can skip the whole babel step if you are doing stuff server side using the latest node js lts.

If you still think you need babel, you need to use https://www.npmjs.com/package/babel-plugin-add-module-exports to get the expected behavior of export

edited Dec 15 '15 at 13:40

answered Dec 15 '15 at 13:28

Swaraj Giri

4,007
2
27
44

Thanks for the response. I did the .default because of these two SO articles: http://stackoverflow.com/questions/33727189/express-routing-with-es6-classes & http://stackoverflow.com/questions/33505992/babel-6-changes-how-it-exports-default – BackPacker777 Dec 15 '15 at 13:36
This is the correct answer, FYI to future question visitors: I have not been able to get 'export default class ClassName' class signatures to work. I have to use class ClassName as the signature & add the following line to the end of my classes: module.exports = ClassName – BackPacker777 Dec 15 '15 at 15:58

How do I instantiate an object with transpiled ES6 code in Express?

1 Answers1