I have a problem with momentjs and I have no idea why. I wrote this code a couple of days ago and it worked fine then, but today I got this error: Unhandled Rejection (TypeError): Cannot read property 'moment' of undefined.

import React, { Component } from 'react'

import moment from 'moment'
import Datetime from 'react-datetime'
import './react-datetime.css'

let parseDate = str => {
  if (moment(str).isValid()) {
    return moment(str).toISOString()
  } else {
    return moment(str).toISOString()
  }
}

export default class DateInput extends Component {
  render() {
    const yesterday = Datetime.moment().subtract(1, 'day') //Error occur on this line.
    const valid = current => {
      return current.isAfter(yesterday)
    }

    const Datetime = (
      <div>
        <Datetime
          isValidDate={valid}
          timeFormat="HHmm"
          dateFormat="YYYY-MM-DD"
          onChange={e => {
            this.props.onChange(parseDate(e._d))
          }}
        />
      </div>
    )
    if (this.props.value) {
      return { Datetime }
    } else {
      return <p>Inget datum angivet</p>
    }
  }
}

I bet the problem is really basic, but I have no idea why this is happening.

Thanks for reading and I hope we can solve it!

I have a problem with momentjs and I have no idea why. I wrote this code a couple of days ago and it worked fine then, but today I got this error: Unhandled Rejection (TypeError): Cannot read property 'moment' of undefined.

import React, { Component } from 'react'

import moment from 'moment'
import Datetime from 'react-datetime'
import './react-datetime.css'

let parseDate = str => {
  if (moment(str).isValid()) {
    return moment(str).toISOString()
  } else {
    return moment(str).toISOString()
  }
}

export default class DateInput extends Component {
  render() {
    const yesterday = Datetime.moment().subtract(1, 'day') //Error occur on this line.
    const valid = current => {
      return current.isAfter(yesterday)
    }

    const Datetime = (
      <div>
        <Datetime
          isValidDate={valid}
          timeFormat="HHmm"
          dateFormat="YYYY-MM-DD"
          onChange={e => {
            this.props.onChange(parseDate(e._d))
          }}
        />
      </div>
    )
    if (this.props.value) {
      return { Datetime }
    } else {
      return <p>Inget datum angivet</p>
    }
  }
}

I bet the problem is really basic, but I have no idea why this is happening.

Thanks for reading and I hope we can solve it!

• javascript
• reactjs
• momentjs

• 1 Why do you over-write the Datetime object? – XCS Commented Jul 16, 2017 at 21:30
• What do you mean @Cristy? – Martin Nordström Commented Jul 16, 2017 at 21:36

2 Answers 2

import Datetime from 'react-datetime' makes Datetime available for use in the scope of your script. However you set it again inside render

const Datetime = (
  <div>
    <Datetime
      isValidDate={valid}
      timeFormat="HHmm"
      dateFormat="YYYY-MM-DD"
      onChange={e => {
        this.props.onChange(parseDate(e._d))
      }}
    />
  </div>
)

In javascript, function's scope takes precedence over the global/script scope (where your function is declared). And since you used Datetime in a statement before the declaration you're referencing to an undefined variable/constant

P.S. In ECMAScript 2015, let (const) will not hoist the variable to the top of the block. However, referencing the variable in the block before the variable declaration results in a ReferenceError. The variable is in a "temporal dead zone" from the start of the block until the declaration is processed.

Moment takes the argument inside itself, its a global function.
I suppose Datetime has no such function like 'moment'.

maybe

moment(Datetime)

?

const yesterday = moment(Datetime).subtract(1, 'day')

and i don't know what is Datetime in your code... take a look at Moment.js: Parsing