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

[KobiEzrieh]

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?

[1Jesper1]

Do you have a JSFiddle?

[1Jesper1]

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

[sathish869]

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

[1Jesper1]

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

[sathish869]

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

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

[sathish869]

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

[cuplex]

@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

[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

[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 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

[1Jesper1]

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

[1Jesper1]

@tanmayIntelli Maybe you know what this causes?

[1Jesper1]

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

[cuplex]

@tanmayIntelli Maybe you know what this causes?

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

[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!

[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

[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.

[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. 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

[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)

[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.

[1Jesper1]

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.

[cuplex]

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

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

[freislot]

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

[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",

[1Jesper1]

@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

[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

Which minifier are you using?

[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

[thomas-at-tld]

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 ?

[github-actions[bot]]

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.

[KobiEzrieh]

Thanks for the help