React Moment Component

Common errors

• Module not found: Can't resolve 'moment' in 'node_modules/react-moment/dist'

  cause The `moment` package, a peer dependency of `react-moment`, is not installed in your project.
  fix Install `moment` by running: `npm install --save moment react-moment`.

• TypeError: Cannot read properties of undefined (reading 'tz') or moment(...).tz is not a function

  cause Attempting to use `moment-timezone` features (like the `timezone` prop) without installing the `moment-timezone` package or importing it into your application.
  fix Install `moment-timezone`: `npm install --save moment-timezone`, and then add `import 'moment-timezone';` to your application's main entry file or the relevant component.

• Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

  cause Incorrectly importing `Moment` as a named export instead of a default export.
  fix Change your import statement from `import { Moment } from 'react-moment';` to `import Moment from 'react-moment';`.

• Warning: Failed prop type: The prop `date` is marked as required in `Moment`, but its value is `undefined`.

  cause The `Moment` component was rendered without providing a date value, either via the `date` prop or as a child.
  fix Ensure the `Moment` component receives a valid date value: `<Moment date={myDateVar} />` or `<Moment>{myDateVar}</Moment>`.

Warnings

• breaking The underlying `moment.js` library is officially deprecated and its maintainers recommend migrating to modern alternatives like Luxon, date-fns, or Day.js for new projects. `react-moment` builds directly on this legacy library.
  Fix: For new development, consider adopting a modern date library and its corresponding React component (e.g., `react-day-picker`, `react-date-fns`). If maintaining an existing project with `react-moment`, be aware of `moment.js`'s maintenance-only status and potential implications for long-term support and bundle size.
• gotcha The `moment-timezone` package is required for timezone-specific operations (e.g., the `timezone` prop) and must be installed and imported separately.
  Fix: Install `moment-timezone` via `npm install --save moment-timezone` and then include `import 'moment-timezone';` in your application's entry point or the component where timezone functionality is utilized.
• gotcha The `interval` prop, which controls how often the component re-renders for relative time displays (like `fromNow`), defaults to 60000 milliseconds (60 seconds).
  Fix: To update more frequently (e.g., every second for a live clock), explicitly set a lower `interval` value, such as `interval={1000}`. Set `interval={0}` to disable automatic updates entirely.
• gotcha The `moment` library, a peer dependency, significantly increases bundle size and does not work well with modern tree-shaking algorithms, especially when including internationalization or timezone support.
  Fix: If bundle size is a critical concern, re-evaluate the need for `moment.js` and consider migrating to lighter alternatives. If `moment.js` is essential, ensure you are only importing necessary locales or specific timezone data if not using the full `moment-timezone` package.
• gotcha Missing `prop-types` as a peer dependency can lead to console warnings in development mode, particularly with older React versions or specific build configurations.
  Fix: Ensure `prop-types` is installed in your project: `npm install prop-types`.

Install

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

Imports

• Moment
  wrong:

  import { Moment } from 'react-moment';

  correct:

  import Moment from 'react-moment';

  The primary React component for displaying and formatting dates. It is a default export.
• MomentProps

  import type { MomentProps } from 'react-moment';

  TypeScript type definition for the props accepted by the Moment component.
• startPooledTimer
  wrong:

  import { startPooledTimer } from 'react-moment';

  correct:

  import Moment from 'react-moment'; Moment.startPooledTimer();

  The `startPooledTimer` function is a static method on the default `Moment` export, used to initialize a global timer for interval updates. It's not a named export.

Quickstart

Demonstrates basic usage of the `Moment` component for various date and time displays, including custom formatting, relative time with live updates, and calendar views.

import React from 'react';
import Moment from 'react-moment';
import type { FC } from 'react';

const App: FC = () => {
  const dateToFormat = '1976-04-19T12:59-0500';
  // Use a dynamic date for 'fromNow' to show updates.
  // Example: 1 hour from now
  const futureDate = new Date(Date.now() + 60 * 60 * 1000);

  return (
    <div>
      <h1>React Moment Examples</h1>
      <p>Original date: <code>{dateToFormat}</code></p>
      <p>Standard format: <Moment date={dateToFormat} /></p>
      <p>Custom format: <Moment date={futureDate} format="MMMM Do YYYY, h:mm:ss a" /></p>
      {/* fromNow updates automatically by default every 60s, explicitly setting interval */}
      <p>Relative time (from now, updates every 30s): <Moment fromNow interval={30000}>{futureDate}</Moment></p>
      <p>Calendar time (e.g., Today at 3:00 PM): <Moment calendar>{new Date()}</Moment></p>
      <p>Just the current time: <Moment date={new Date()} format="HH:mm:ss" interval={1000} /></p>
      <p>Date passed as child: <Moment>{dateToFormat}</Moment></p>
    </div>
  );
};

export default App;