react-date-range: TypeError: (0 , _addYears.default) is not a function in React Date Range while using in Next Js

Subject of the issue

While using a React Date Range in Next Js getting an issue, “TypeError: (0 , _addYears.default) is not a function”.

Code for using a calender from react date range. /app/page.tsx

"use client";

import { Calendar } from "react-date-range";

export default function Home() {
  function handleSelect(date: Date) {
    console.log(date); // native Date object
  }
  return <Calendar date={new Date()} onChange={handleSelect} />;
}

The Error that I am getting on my browser is:

Installed Dependencies are: { “name”: “date-range-picker”, “version”: “0.1.0”, “private”: true, “scripts”: { “dev”: “next dev”, “build”: “next build”, “start”: “next start”, “lint”: “next lint” }, “dependencies”: { “date-fns”: “^3.0.4”, “next”: “14.0.4”, “react”: “^18.2.0”, “react-date-range”: “^1.4.0”, “react-dom”: “^18” }, “devDependencies”: { “@types/node”: “^20”, “@types/react”: “^18”, “@types/react-date-range”: “^1.4.9”, “@types/react-dom”: “^18”, “eslint”: “^8”, “eslint-config-next”: “14.0.4”, “typescript”: “^5” } }

[BUG] Bug Reproduce Steps

Just create a Next Js project and install the react date range, And use in Next Js Application to produce an error. Reference Repository contains code with given error: https://github.com/muhammadfaizan027915/react-date-range-bug.git

/app/page.tsx

"use client";

import { Calendar } from "react-date-range";

export default function Home() {
  function handleSelect(date: Date) {
    console.log(date); // native Date object
  }
  return <Calendar date={new Date()} onChange={handleSelect} />;
}

[BUG] Expected behaviour

Expected behaviour is that Calender must be rendered in a next js project and can be used.

Environment

Package Version: “^1.4.0” React version: 18.2.0 Node version: 20.9.0 Browser: Chrome, Safari, Edge, Firefox