[RESOLVED] Strange app.browserify error using moment (t.format is not a function)

react
1

UPDATE: (This post is only relevant if you’re using the react-datepicker npm package)
It turns out that it was the props to a totally different package react-datepicker that was causing this issue.
By changing my input to the following, it works.

Project = React.createClass({
    getInitialState: function () {
        return {
            submissionDate:moment() //<-- removed the .format()
        }
    },
  render() {
  <DatePicker selected={this.state.submissionDate} />  
  }

Original
I must be losing my mind…

With the following code

Project = React.createClass({
    getInitialState: function () {
        return {
            submissionDate:moment().format(), //<--- this is the culprit
        }
    },

I get Uncaught: TypeError: t.format is not a function (how do I tell Meteor to not minify app.browserify.js?):

1262×231 111 KB

This is fine, no errors

Project = React.createClass({
    getInitialState: function () {
        var now = moment().format();
        console.log("Now: " + now);
        return {
            submissionDate: "I'm happy"
        }
    }

But the moment I try to set the state, I get the t.format error in app.browserify:

Project = React.createClass({
    getInitialState: function () {
        var now = moment().format();
        console.log("Now: " + now);
        return {
            submissionDate: now
        }
    },
    componentDidMount() {
        this.setState({submissionDate: moment().format()})
    }

Relevant files:

// client/lib/app.browserfiy.js
DatePicker = require("react-datepicker");
Video = require('react-video');
Vimeo = require('react-vimeo');
Youtube = require('react-youtube');
moment = require('moment');

// packages.json
{
  "react-datepicker":"0.12.0",
  "react-video":"1.5.3",
  "react-vimeo":"0.0.3",
  "externalify":"0.1.0",
  "react-youtube":"4.1.0",
  "moment":"2.10.6"
}
2

Try loading moment through the Meteor packages. https://atmospherejs.com/momentjs/moment

I’ve had a lot of issues with Browserify (i’ve ditched it all together and am using Webpack now but you prob. don’t want to do that).

Also there is a new browserify coming for the 1.2 release that’s in beta.

3

Forgot to mention that I tried that first.

I beautified the code and am tracking it back to the datepicker package where when certain props are set, it causes the error.

// realised it had nothing to do with moment when this code still triggered the error
getInitialState() {
  return {
    submissionDate: '2015-09-11T13:26:04+10:00'
  }
}

// it was because the plugin was trying to format it
<DatePicker selected={this.state.submissionDate} />

This isn’t what I want to hear, please elaborate. :smiley:

4

Mostly just speed issues, it was taking me over 30 seconds to do a re-load. One person had issues with it taking 20mins for the initial build (this took 45 seconds in webpack). I also had an issue deploying class-names to production… once it got onto modulus it wouldn’t build from an NPM dep error.

I switched to Meteor-Webpack recently and haven’t looked back. It’s a bit of extra configuration but it’s fast and lets you use ES6 modules. The hot-patching is really nice and allows for sub second reloads without losing state in the app.

It’s also the standard build tool in the react community so that’s kind of nice too. However as anything with more configurability… it’s a bit more complex than the meteor build tool.

Also worth mentioning the new browserify beta uses the new Meteor 1.2-RC 's build tool so it should be faster when that comes out.