Why is `moment` undefined here?

Question

I'm following this guide on using react-dates. But when I try to use the DayPickerRangeController, I get this error message:

./src/App.js
  Line 27:38:  'moment' is not defined  no-undef

My App.js looks like this:

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-dates/initialize';
import 'react-dates/lib/css/_datepicker.css';
import { DayPickerRangeController } from 'react-dates';
// import logo from './logo.svg';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date: null,
      focused: null
    }
  }

  render() {
    return (
      <div className="App">
        <DayPickerRangeController
          startDate={this.state.startDate} // momentPropTypes.momentObj or null,
          endDate={this.state.endDate} // momentPropTypes.momentObj or null,
          onDatesChange={({ startDate, endDate }) => this.setState({ startDate, endDate })} // PropTypes.func.isRequired,
          focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null,
          onFocusChange={focusedInput => this.setState({ focusedInput })} // PropTypes.func.isRequired,
          initialVisibleMonth={() => moment().add(2, "M")} // PropTypes.func or null,
        />
      </div>
    );
  }
}

export default App;

NOTE: I was also following a video guide for reference, and they didn't install the dependencies (not sure why, but it seemed like they didn't need to for the SingleDatePicker). Could this be why I'm getting this error message? Or did I miss a step somewhere?

Answer 1

Turned out I just needed to import moment from 'moment';!

Answer 2

NodeJS: You should npm install the moment.js into you project.

or

HTML: you should import the moment.js before antd.js.

For Example:

    <script src="/assets/moment-2.24.0/monent.min.js"></script>
    <script src="/assets/moment-2.24.0/moment-with-locales.min.js"></script>
    <script src="/assets/vue-2.6.10/vue.min.js"></script>