Moment.js Prop Types for React

Common errors

• Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions.

  cause A string passed to a `momentString` prop (or a raw Moment.js constructor call) is in an ambiguous or non-standard format, causing Moment.js to fall back to `new Date()`, which is unreliable.
  fix Ensure that string date inputs are in a clearly defined, standard format (e.g., ISO 8601 'YYYY-MM-DDTHH:mm:ssZ'). For custom formats, consider defining a `moment.createFromInputFallback` function or explicitly specifying the format when creating moment objects.

• TypeError: Cannot read properties of undefined (reading 'momentObj')

  cause The `momentPropTypes` object was not correctly imported or is undefined, often due to incorrect CommonJS `require` or ESM `import` syntax, or the package itself failed to load.
  fix Verify your import statement: `import momentPropTypes from 'react-moment-proptypes';` for ESM or `const momentPropTypes = require('react-moment-proptypes');` for CommonJS. Ensure `react-moment-proptypes` is correctly installed in `node_modules`.

Warnings

• breaking The internal implementation of `moment.createFromInputFallback` was removed in v1.6.0. This prevents conflicts with other packages but means developers must manage `createFromInputFallback` themselves if custom parsing rules are needed.
  Fix: If your application relies on custom `moment.createFromInputFallback` behavior, ensure it is defined globally or within your application logic, outside of `react-moment-proptypes`.
• breaking Version 1.7.0 introduced a minimum Node.js version requirement of 8.x or above. This primarily affects development environments but could impact older build pipelines.
  Fix: Upgrade your Node.js environment to version 8.x or newer to ensure compatibility and receive security updates for development dependencies.
• gotcha Moment.js itself issues deprecation warnings when constructing dates from unrecognized RFC2822 or ISO formats. `react-moment-proptypes` uses Moment.js, so these warnings may appear in your console if `momentString` props contain ambiguous date formats.
  Fix: Refer to the Moment.js documentation on warnings (http://momentjs.com/guides/#/warnings/js-date/) and ensure that strings passed to `momentString` props conform to recognized formats or handle `createFromInputFallback` appropriately.
• gotcha The `package-lock.json` file was intentionally removed from the package in v1.6.0. While this is a common practice for libraries to avoid locking consumer dependencies, it might lead to less reproducible `npm install` behavior in your own projects if you rely on the library's exact dependency tree.
  Fix: Always use `package-lock.json` or `yarn.lock` in your *application* projects to ensure reproducible builds, regardless of whether a library provides its own lock file.

Install

• npm install react-moment-proptypes npm
• yarn add react-moment-proptypes yarn
• pnpm add react-moment-proptypes pnpm

Imports

• momentPropTypes
  wrong:

  const momentPropTypes = require('react-moment-proptypes');

  correct:

  import momentPropTypes from 'react-moment-proptypes';

  While the README shows CommonJS `require`, the package likely exports as a default. For modern ESM environments, use the default import. CommonJS `require` is also fully supported.
• momentObj

  import momentPropTypes from 'react-moment-proptypes'; momentPropTypes.momentObj

  This is accessed as a property of the default export. It validates if a prop is an instance of a Moment.js object.
• momentString

  import momentPropTypes from 'react-moment-proptypes'; momentPropTypes.momentString

  Accessed as a property of the default export. It validates if a prop is a string that Moment.js can successfully parse into a date.

Quickstart

This quickstart demonstrates how to define and use `react-moment-proptypes` within a React component. It showcases `momentObj` for Moment objects, `momentString` for date strings, and `momentDurationObj` for Moment durations, including using `withPredicate` for custom validation.

import React from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
import momentPropTypes from 'react-moment-proptypes';

class TestComponent extends React.Component {
  render() {
    return (
      <div>
        <p>Date Prop: {this.props.dateThing?.format('YYYY-MM-DD')}</p>
        <p>UTC Date Prop: {this.props.dateThingWithPredicate?.format('YYYY-MM-DD HH:mm [UTC]')}</p>
        <p>String Date Prop: {this.props.stringThing}</p>
        <p>Duration Prop: {this.props.durationThing?.humanize()}</p>
      </div>
    );
  }
}

TestComponent.propTypes = {
  dateThing: momentPropTypes.momentObj,
  dateThingWithPredicate: momentPropTypes.momentObj.withPredicate(
    function isUTC(momentObject) {
      return momentObject.isUTC();
    }
  ),
  stringThing: momentPropTypes.momentString,
  durationThing: momentPropTypes.momentDurationObj
};

// Example Usage
const App = () => (
  <TestComponent
    dateThing={moment()}
    dateThingWithPredicate={moment.utc()}
    stringThing={'12-12-2014'}
    durationThing={moment.duration(3, 'hours')}
  />
);

export default App;