Library isn't bundled by react native packager

Fitzpasd commented 7 years ago

I'm sure this is something I'm doing wrong, but I can't figure it out and I'm hoping someone here might have some experience with this.

For some reason, when I require this library and bundle my source code with the react native packager, the source of this library doesn't get bundled and therefore I get exceptions when calling the functions. I'm using typescript and have tried all the known ways of importing, and also have tried changing the .js source that is compiled.

What I have:

Module is included in package.json and appears in my node_modules
I'm using typescript, and the compiled js file has the require('countdown') line.
If I inspect the output bundle, or log the var countdown = require('countdown'), I can see that the source for countdown.js isn't included in the bundle.
If I use webpack to create a web bundle, it works as expected.

Here's the compiled js code which is having issues:

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
var RX = require("reactxp");
var countdown = require("countdown");
var styles = {
    outerContainer: RX.Styles.createViewStyle({
        flexDirection: "row"
    }),
    innerContainer: RX.Styles.createViewStyle({
        flexDirection: "column",
        alignItems: "center",
        paddingHorizontal: 5
    })
};
var CountdownTimer = (function (_super) {
    __extends(CountdownTimer, _super);
    function CountdownTimer() {
        var _this = _super.call(this) || this;
        _this._setStateToNow = function () {
            _this.setState({ currentDate: new Date(Date.now()) });
        };
        _this.state = { currentDate: new Date() };
        return _this;
    }
    CountdownTimer.prototype.componentDidMount = function () {
        this.timerId = setInterval(this._setStateToNow, 1000);
    };
    CountdownTimer.prototype.componentWillUnmount = function () {
        clearInterval(this.timerId);
    };
    CountdownTimer.prototype.render = function () {
        // THIS LINE FAILS SINCE 'countdown' is {}
        var diff = countdown(this.state.currentDate, this.props.untilDate, CountdownTimer.DIFF_ARGS);

        ....

    };
    CountdownTimer.DIFF_ARGS = countdown.DAYS |
        countdown.HOURS |
        countdown.MINUTES |
        countdown.SECONDS;
    return CountdownTimer;
}(RX.Component));
exports.CountdownTimer = CountdownTimer;

I have this library setup and imported the exact same way as others (e.g. lodash, reactxp), and this is the only one that doesn't get bundled.

I'm running the packager the standard way, and have tried clearing node_modules and all the caches.

Here's an SO question I also opened to try get some help:

I have even tried adding a require call to my root index.js, which also doesn't work

matheusmatos commented 7 years ago

Hi, I went through something similar, using react native too.

Probably it's caused by the way of the module is exported.

I've solved changing the source code. Take a look:

...

/**
 * @public
 * @type {Object|null}
 */
// just comment this line, it'll fix the NodeJS package
// but will crash the use in the browser :\ 
// var module;

/**
 * API entry
 * @public
 * @param {function(Object)|Date|number} start the starting date
 * @param {function(Object)|Date|number} end the ending date
 * @param {number} units the units to populate
 * @return {Object|number}
 */
var countdown = (
    ...
)(module);

I'll submit a PR suggesting this.

matheusmatos commented 7 years ago

The problem is the way of the module is exported.

You guys can change it to be compatible with the browser and as a Node JS module?

I can submit the new code in few weeks, if you do not have time for this.