search

hypeserver / react-date-range

A React component for choosing dates and date ranges.
MIT License
2.57k stars 658 forks source link

TypeError: (0 , _addYears.default) is not a function in React Date Range while using in Next Js #630

Closed muhammadfaizan027915 closed 6 months ago

muhammadfaizan027915 commented 6 months ago

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: Screenshot_1

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

alaacoffeeit commented 6 months ago

:(

muhammadfaizan027915 commented 6 months ago

:(

I'm facing this issue, is there any way to resolve this issue ?

tkanemoto commented 6 months ago

_addYears is imported from date-fns. date-fns 3.0.0. has been released recently. You can work around this by installing date-fns@<3.0.0

muhammadfaizan027915 commented 6 months ago

_addYears is imported from date-fns. date-fns 3.0.0. has been released recently. You can work around this by installing date-fns@<3.0.0

I had installed date-fns@3.0.0 as a dependency for react date range, but it had not worked.

gabscar commented 6 months ago

_addYears is imported from date-fns. date-fns 3.0.0. has been released recently. You can work around this by installing date-fns@<3.0.0

I had installed date-fns@3.0.0 as a dependency for react date range, but it had not worked.

try with 2.30.0, it worked here

rmosias2 commented 6 months ago

same here Uncaught TypeError: (0 , _addYears.default) is not a function at ../../node_modules/.pnpm/react-date-range@1.4.0_date-fns@3.0.0_react@18.2.0/node_modules/react-date-range/dist/components/Calendar/index.js

muhammadfaizan027915 commented 6 months ago

_addYears is imported from date-fns. date-fns 3.0.0. has been released recently. You can work around this by installing date-fns@<3.0.0

I had installed date-fns@3.0.0 as a dependency for react date range, but it had not worked.

try with 2.30.0, it worked here

I had tried lower versions till 2.0.0 but hadn't worked.

Aakashgupta2001 commented 6 months ago

_addYears is imported from date-fns. date-fns 3.0.0. has been released recently. You can work around this by installing date-fns@<3.0.0

I had installed date-fns@3.0.0 as a dependency for react date range, but it had not worked.

try with 2.30.0, it worked here

I had tried lower versions till 2.0.0 but hadn't worked.

install version 2.30.0, then delete your node modules, install it again and it is working for me.

tkanemoto commented 6 months ago

I said date-fns@<3.0.0 not date-fns@3.0.0.

umakantp commented 6 months ago

Okay, I wanted to use the latest date-fns and this package was not compatible. I forked this repo and changed it to work with the latest date-fns. In case you want to use it: https://www.npmjs.com/package/@umakantp/react-date-range

behroozaone commented 6 months ago

Okay, I wanted to use the latest date-fns and this package was not compatible. I forked this repo and changed it to work with the latest date-fns. In case you want to use it: https://www.npmjs.com/package/@umakantp/react-date-range

try this way it worked for me

tutusjr commented 6 months ago

installing version date-fns@2.30.0 worked for me

keremciu commented 6 months ago

I prepare a new version with a compability of date-fns@3.x.x

keremciu commented 6 months ago

@muhammadfaizan027915 @tutusjr @behroozaone @umakantp @tkanemoto @Aakashgupta2001 @gabscar @rmosias2 @alaacoffeeit

can you please try latest version? https://www.npmjs.com/package/react-date-range/v/2.0.0-alpha.3 that should be working with date-fns@3

muhammadfaizan027915 commented 6 months ago

@muhammadfaizan027915 @tutusjr @behroozaone @umakantp @tkanemoto @Aakashgupta2001 @gabscar @rmosias2 @alaacoffeeit

can you please try latest version? https://www.npmjs.com/package/react-date-range/v/2.0.0-alpha.3 that should be working with date-fns@3

Thanks for creating a newer version of date range picker compatible with date-fns@3.0.0. It has solved all the issues that I was facing, thanks once again.

behroozaone commented 6 months ago

@umakantp/react-date-range": "^2.1.0",

On Mon, Jan 1, 2024 at 9:52 AM Muhammad Faizan @.***> wrote:

Closed #630 https://github.com/hypeserver/react-date-range/issues/630 as completed.

— Reply to this email directly, view it on GitHub https://github.com/hypeserver/react-date-range/issues/630#event-11364088173, or unsubscribe https://github.com/notifications/unsubscribe-auth/A672J6HTD25LU4MB4DYEKRLYMJI2NAVCNFSM6AAAAABA72CFVGVHI2DSMVQWIX3LMV45UABCJFZXG5LFIV3GK3TUJZXXI2LGNFRWC5DJN5XDWMJRGM3DIMBYHAYTOMY . You are receiving this because you were mentioned.Message ID: @.***>

behroozaone commented 6 months ago

"date-fns": "^3.0.6",

On Mon, Jan 1, 2024 at 4:23 PM behrooz khalaj @.***> wrote:

@umakantp/react-date-range": "^2.1.0",

On Mon, Jan 1, 2024 at 9:52 AM Muhammad Faizan @.***> wrote:

Closed #630 https://github.com/hypeserver/react-date-range/issues/630 as completed.

— Reply to this email directly, view it on GitHub https://github.com/hypeserver/react-date-range/issues/630#event-11364088173, or unsubscribe https://github.com/notifications/unsubscribe-auth/A672J6HTD25LU4MB4DYEKRLYMJI2NAVCNFSM6AAAAABA72CFVGVHI2DSMVQWIX3LMV45UABCJFZXG5LFIV3GK3TUJZXXI2LGNFRWC5DJN5XDWMJRGM3DIMBYHAYTOMY . You are receiving this because you were mentioned.Message ID: @.*** com>

rcrafael commented 5 months ago

_addYears is imported from date-fns. date-fns 3.0.0. has been released recently. You can work around this by installing date-fns@<3.0.0

I had installed date-fns@3.0.0 as a dependency for react date range, but it had not worked.

try with 2.30.0, it worked here

this really works for me. react-date-range@1.4.0 date-fns@2.30.0

thanks!

jibon0070 commented 4 months ago

_addYears is imported from date-fns. date-fns 3.0.0. has been released recently. You can work around this by installing date-fns@<3.0.0

I had installed date-fns@3.0.0 as a dependency for react date range, but it had not worked.

try with 2.30.0, it worked here

this really works for me. react-date-range@1.4.0 date-fns@2.30.0

thanks!

thanks this helped

emmanuelokorie1 commented 4 months ago

_addYears is imported from date-fns. date-fns 3.0.0. has been released recently. You can work around this by installing date-fns@<3.0.0

I had installed date-fns@3.0.0 as a dependency for react date range, but it had not worked.

try with 2.30.0, it worked here

this really works for me. react-date-range@1.4.0 date-fns@2.30.0

thanks!

thanks this worked