Skip to main content

How to Resolve "ReferenceError: moment is not defined" Error in JavaScript

The ReferenceError: moment is not defined is a common error that occurs when your JavaScript code tries to use the Moment.js library before it has been properly loaded into the current environment. The solution depends on whether you are working in a Node.js application or in a browser.

This guide will explain the cause of this error in both environments and provide the correct solutions for each, ensuring you can load and use the Moment.js library without issues.

The Core Problem: The moment Variable is Not in Scope​

This error is JavaScript's way of telling you that it doesn't know what moment is. You have called a function or variable named moment, but it has not been declared or made available in the current file or scope.

Example of problem:

// Problem: This line will throw the error if `moment` hasn't been loaded.
const now = moment().format('MMMM Do YYYY');

console.log(now);

Error Output:

Uncaught ReferenceError: moment is not defined
note

To fix this, you must first load the Moment.js library.

Solution for Node.js: Install and Import the Package​

In a server-side Node.js environment, you must manage your dependencies with a package manager like npm or Yarn.

The logic:

  1. Install: Use npm to download the moment package and add it to your project's dependencies in package.json.
  2. Import: Use the import (for ES Modules) or require (for CommonJS) syntax to load the module into your file.

The solution:

Step 1: Install the package Open your terminal in your project's root directory and run:

npm install moment

Step 2: Import the module Add the import statement at the top of your JavaScript file.

For modern ES Modules (import):

import moment from 'moment';

const now = moment().format('MMMM Do YYYY');
console.log(now);

For traditional CommonJS (require):

const moment = require('moment');

const now = moment().format('MMMM Do YYYY');
console.log(now);
note

This makes the moment function available within your file, resolving the error.

Solution for the Browser: Load the Script​

In a browser environment, you do not use npm to manage your runtime dependencies. Instead, you must include the Moment.js library using a <script> tag in your HTML file.

The logic:

  1. Find a CDN (Content Delivery Network) link for the Moment.js library. A popular one is cdnjs.
  2. Add a <script> tag in your index.html file, with the src attribute pointing to the CDN URL.
  3. Crucially, place this <script> tag before your own script tag that uses moment.

The solution:

<!DOCTYPE html>
<html>
<head>
  <title>Moment.js Example</title>
</head>
<body>
  <h1>Date and Time</h1>
  <p id="datetime"></p>

  <!-- 1. Load the Moment.js library from a CDN -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

  <!-- 2. Now, load your own script that uses the library -->
  <script src="index.js"></script>
</body>
</html>

index.js:

// Because the library was loaded first, `moment` is now a global variable.
const now = moment().format('MMMM Do YYYY, h:mm:ss a');

document.getElementById('datetime').textContent = now;
note

By loading the library script first, the moment variable becomes available on the global window object, and your index.js file can access it without an import statement.

This is a TypeScript-specific error, or an error from a bundler like Webpack, that is slightly different from the ReferenceError. It means that the build tool or type checker cannot locate the moment package, even if it might run correctly.

Solution:

  1. Ensure you have run npm install moment.
  2. If using TypeScript, also install the type definitions: npm install @types/moment --save-dev.
  3. Restart your code editor and development server to allow them to recognize the newly installed packages.

Conclusion​

The ReferenceError: moment is not defined error is always caused by a failure to load the Moment.js library before your code attempts to use it.

  • In a Node.js environment, you must npm install moment and then import moment from 'moment' (or require('moment')) at the top of your file.
  • In a browser environment, you must add a <script> tag for the Moment.js library in your HTML file before the <script> tag for your own code.

By ensuring the library is loaded correctly for your specific environment, you will resolve the error and be able to use Moment.js's powerful date and time features.

Table of Contents