react-datepicker TypeError: Cannot read properties of undefined (reading 'holidays')

I use react v18.2.0 and react-datepicker v4.18.0 and i dont use the holidays property an i get this errors

react-dom.production.min.js:4756 TypeError: Cannot read properties of undefined (reading 'holidays') at a.calcInitialState (react-datepicker.min.js:3068:1) at new a (react-datepicker.min.js:3555:8) at Ri (react-dom.production.min.js:3602:1) at ys (react-dom.production.min.js:4950:1) at dl (react-dom.production.min.js:7901:1) at oc (react-dom.production.min.js:7488:1) at rc (react-dom.production.min.js:7477:1) at nc (react-dom.production.min.js:7459:1) at Ul (react-dom.production.min.js:7120:1) at Zl (react-dom.production.min.js:7186:1) as @ react-dom.production.min.js:4756 a.callback @ react-dom.production.min.js:4776 Ti @ react-dom.production.min.js:3540 ll @ react-dom.production.min.js:6741 e @ react-dom.production.min.js:6699 sl @ react-dom.production.min.js:6668 (anonymous) @ react-dom.production.min.js:7585 lc @ react-dom.production.min.js:7540 Zl @ react-dom.production.min.js:7193 Dr @ react-dom.production.min.js:3018 (anonymous) @ react-dom.production.min.js:6980

react-datepicker.min.js:3068 Uncaught TypeError: Cannot read properties of undefined (reading 'holidays') at a.calcInitialState (react-datepicker.min.js:3068:1) at new a (react-datepicker.min.js:3555:8) at Ri (react-dom.production.min.js:3602:1) at ys (react-dom.production.min.js:4950:1) at dl (react-dom.production.min.js:7901:1) at oc (react-dom.production.min.js:7488:1) at rc (react-dom.production.min.js:7477:1) at nc (react-dom.production.min.js:7459:1) at Ul (react-dom.production.min.js:7120:1) at Zl (react-dom.production.min.js:7186:1)

My code import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css";

const [date, setDate] = useState(new Date());

<DatePicker selected={date} onChange={(date) => setDate(date)} />

what am i doing wrong?

Sep 27 '23 11:09 KobiEzrieh

Do you have a JSFiddle?

Oct 05 '23 11:10 1Jesper1

@KobiEzrieh I can't reproduce with these versions, see CodeSandBox

Oct 09 '23 13:10 1Jesper1

@KobiEzrieh You are getting this error after the minification right?

Oct 12 '23 06:10 sathish869

@sathish869 @KobiEzrieh What version of react-dom is used?

Oct 13 '23 11:10 1Jesper1

@sathish869 @KobiEzrieh What version of react-dom is used?

"react": "^16.14.0", "react-datepicker": "^4.16.0", "react-dom": "^16.14.0",

Oct 16 '23 04:10 sathish869

@KobiEzrieh I have resolved this issue by upgrading my react script version to "react-scripts": "^5.0.1",

Oct 16 '23 05:10 sathish869

@KobiEzrieh I have resolved this issue by upgrading my react script version to "react-scripts": "^5.0.1",

Hello everyone. I am also getting this error after the minification. Build process works fine. Local works fine as well But in hosted app when trying to render a modal which contains the react-datepicker component, the app breaks with this error:

react-datepicker.min.js:2807 Uncaught TypeError: Cannot read properties of undefined (reading 'holidays')
    at r.calcInitialState (react-datepicker.min.js:2807:1)
    at new r (react-datepicker.min.js:3274:10)
    at Sn (react-dom.production.min.js:2608:1)
    at Go (react-dom.production.min.js:3552:1)
    at Ss (react-dom.production.min.js:5480:1)
    at Su (react-dom.production.min.js:5035:1)
    at fu (react-dom.production.min.js:5029:21)
    at cu (react-dom.production.min.js:4815:1)
    at react-dom.production.min.js:2331:1
    at t.unstable_runWithPriority (scheduler.production.min.js:252:1)

The component is controlled by react-hook-form as follows:

 <Controller
          control={control}
          name="startDate"
          render={({ field: { value, ...fieldProps } }) => {
            return (
              <span style={{ display: 'inline-block' }}>
                <ReactDatePicker
                  {...fieldProps}
                  placeholderText="Select date"
                  selected={value}
                  className="form-control"
                  showIcon
                  popperPlacement="right"
                  popperModifiers={[
                    {
                      name: 'preventOverflow',
                      options: {
                        rootBoundary: 'viewport',
                        tether: false,
                        altAxis: true,
                      },
                    },
                  ]}
                />
              </span>
            );
          }}
        />

My project dependencies versions involved are:

  "react": "^16.8.6",
  "react-dom": "^16.8.6",
  "react-datepicker": "^4.18.0",
  "react-hook-form": "^7.47.0",

@sathish869 the thing is I don't have react-scripts dependency in my package.json. any thoughts? Thanks

Oct 19 '23 19:10 cuplex

@cuplex Could you share the line of code where it breaks? Use Chrome pretty print in src file. Maybe this PR has something to do with it? https://github.com/Hacker0x01/react-datepicker/pull/4203/files#diff-ba0a2548ba8e373159fbf38d080f9db8c4738205898b7357963178048223dc70

Oct 20 '23 06:10 1Jesper1

@cuplex Could you share the line of code where it breaks? Use Chrome pretty print in src file. Maybe this PR has something to do with it? https://github.com/Hacker0x01/react-datepicker/pull/4203/files#diff-ba0a2548ba8e373159fbf38d080f9db8c4738205898b7357963178048223dc70 Thanks for responding this fast. I set breakpoint on exception and this seems to be where it breaks. r = null === (e = a.props.holidays) || void 0 === e ? void 0 : e.reduce(function (e, t) {

And here's a screenshot for more context:

Thanks

Oct 20 '23 10:10 cuplex

@cuplex Thanks for the info! Can you set a breakpoint there on when using local and check if its undefined? a.props?

Oct 20 '23 11:10 1Jesper1

@tanmayIntelli Maybe you know what this causes?

Oct 20 '23 11:10 1Jesper1

@cuplex Could you try setting holidays as a prop? holidays=[] or holidays={}

Oct 20 '23 11:10 1Jesper1

@tanmayIntelli Maybe you know what this causes?

Not sure what would be the cause. Works perfectly locally but breaks after successful build.

Oct 20 '23 11:10 cuplex

@cuplex Could you try setting holidays as a prop? holidays=[] or holidays={}

Yes, that makes sense and it's a good thing to try. Thanks!

Oct 20 '23 12:10 cuplex

@cuplex Thanks for the info! Can you set a breakpoint there on when using local and check if its undefined? a.props? I've set a breakpoint in local. a.props is not undefined

Oct 20 '23 12:10 cuplex

@1Jesper1 I misread the last comment by @cuplex . I am unable to think of a reason why it would work in local but not in prod.

Oct 20 '23 12:10 tanmayIntelli

@1Jesper1 I misread the last comment by @cuplex . I am unable to think of a reason why it would work in local but not in prod. Seems like it has something to do with the build process and react-dev-utils utility. I've realized that, Internally, my project moved away from relying on react-scripts for the build process in favor of using "react-dev-utils": "^8.0.0" not sure why

Oct 20 '23 12:10 cuplex

@KobiEzrieh I have resolved this issue by upgrading my react script version to "react-scripts": "^5.0.1",

How did you figure out this solution? The reason I am asking is. this project is not using react-scripts for the build process. Instead, it uses react-dev-utils. It seems like the CRA eject script was ran (not sure why)

Oct 20 '23 13:10 cuplex

I encountered the same error, and have already tried “react-scripts = ：“^5.0.1” ”, but it remains unresolved. The code runs well with npm start, but error after building.

Oct 21 '23 16:10 geturin

I encountered the same error, and have already tried “react-scripts = ：“^5.0.1” ”, but it remains unresolved. The code runs well with npm start, but error after building.

We are using webpack, no problems here.

Oct 21 '23 16:10 1Jesper1

@cuplex Could you try setting holidays as a prop? holidays=[] or holidays={}

I've tried holidays=[] but same error occurs 😢

Oct 23 '23 12:10 cuplex

same issue, on local machine its ok, but in production same error Cannot read properties of undefined (reading 'holidays')

Oct 24 '23 13:10 freislot

i fix problem in production by downgrade version of react-datepicker from 4.18.0 to 3.4.1

    "react": "16.8.6",
    "react-datepicker": "3.4.1",
    "react-dom": "16.8.6",

Oct 24 '23 14:10 freislot

@KobiEzrieh I have resolved this issue by upgrading my react script version to "react-scripts": "^5.0.1",

How did you figure out this solution? The reason I am asking is. this project is not using react-scripts for the build process. Instead, it uses react-dev-utils. It seems like the CRA eject script was ran (not sure why)

Seems like react-scripts uses react-dev-utils, what version of react-dev-utils do you use and what is the eject script? What if you revert and don't eject? https://github.com/facebook/create-react-app/blob/19fa58d527ae74f2b6baa0867463eea1d290f9a5/packages/react-scripts/package.json#L64

Oct 24 '23 20:10 1Jesper1

@KobiEzrieh I have resolved this issue by upgrading my react script version to "react-scripts": "^5.0.1",

Hello everyone. I am also getting this error after the minification. Build process works fine. Local works fine as well But in hosted app when trying to render a modal which contains the react-datepicker component, the app breaks with this error:

react-datepicker.min.js:2807 Uncaught TypeError: Cannot read properties of undefined (reading 'holidays')
    at r.calcInitialState (react-datepicker.min.js:2807:1)
    at new r (react-datepicker.min.js:3274:10)
    at Sn (react-dom.production.min.js:2608:1)
    at Go (react-dom.production.min.js:3552:1)
    at Ss (react-dom.production.min.js:5480:1)
    at Su (react-dom.production.min.js:5035:1)
    at fu (react-dom.production.min.js:5029:21)
    at cu (react-dom.production.min.js:4815:1)
    at react-dom.production.min.js:2331:1
    at t.unstable_runWithPriority (scheduler.production.min.js:252:1)

The component is controlled by react-hook-form as follows:

 <Controller
          control={control}
          name="startDate"
          render={({ field: { value, ...fieldProps } }) => {
            return (
              <span style={{ display: 'inline-block' }}>
                <ReactDatePicker
                  {...fieldProps}
                  placeholderText="Select date"
                  selected={value}
                  className="form-control"
                  showIcon
                  popperPlacement="right"
                  popperModifiers={[
                    {
                      name: 'preventOverflow',
                      options: {
                        rootBoundary: 'viewport',
                        tether: false,
                        altAxis: true,
                      },
                    },
                  ]}
                />
              </span>
            );
          }}
        />

My project dependencies versions involved are:

  "react": "^16.8.6",
  "react-dom": "^16.8.6",
  "react-datepicker": "^4.18.0",
  "react-hook-form": "^7.47.0",

@sathish869 the thing is I don't have react-scripts dependency in my package.json. any thoughts? Thanks

Which minifier are you using?

Oct 25 '23 10:10 sathish869

@tanmayIntelli Maybe you know what this causes?

Not sure what would be the cause. Works perfectly locally but breaks after successful build.

Exactly i too stuck in the same problem, please try to update your minifier version to resolve that

Oct 25 '23 10:10 sathish869

I have same problem with 4.18.0, need to back to version 3.4.1 to make it work. Config: "react": "^18.2.0", "react-dom": "^18.2.0"

Anyone who has found a better solution ?

Nov 27 '23 10:11 thomas-at-tld

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 10 days.

May 29 '24 01:05 github-actions[bot]

Thanks for the help

May 29 '24 09:05 KobiEzrieh