I am trying to add the react-tailwindcss-datepicker to my project by following the documentation here:

/install

However, I'm encountering the following error:

react-jsx-runtime.development.js:348 Uncaught TypeError: Cannot read properties of undefined (reading 'A')

The above error occurred in the <Datepicker> component:

I added the following configuration to my tailwind.config.js:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './index.html',
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/react-tailwindcss-datepicker/dist/index.esm.js',
  ],
  theme: {
    extend: {},
  },
  plugins: [require('@tailwindcss/forms')],
};

I used the Datepicker component like this:

import { useState } from "react"; 
import Datepicker from "react-tailwindcss-datepicker";

const App = () => { 
    const [value, setValue] = useState({ 
        startDate: null, 
        endDate: null
    });

    return (
        <Datepicker 
            value={value} 
            onChange={newValue => setValue(newValue)}
        /> 
    );
};

export default App;

I installed the required packages using the following commands:

npm install dayjs
npm add [email protected]

Even after following the documentation, I am facing the error mentioned above. It seems related to undefined properties when rendering the component.

Can anyone help me understand what the issue is or suggest a solution?

I am trying to add the react-tailwindcss-datepicker to my project by following the documentation here:

https://react-tailwindcss-datepicker.vercel.app/install

However, I'm encountering the following error:

react-jsx-runtime.development.js:348 Uncaught TypeError: Cannot read properties of undefined (reading 'A')

The above error occurred in the <Datepicker> component:

I added the following configuration to my tailwind.config.js:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './index.html',
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/react-tailwindcss-datepicker/dist/index.esm.js',
  ],
  theme: {
    extend: {},
  },
  plugins: [require('@tailwindcss/forms')],
};

I used the Datepicker component like this:

import { useState } from "react"; 
import Datepicker from "react-tailwindcss-datepicker";

const App = () => { 
    const [value, setValue] = useState({ 
        startDate: null, 
        endDate: null
    });

    return (
        <Datepicker 
            value={value} 
            onChange={newValue => setValue(newValue)}
        /> 
    );
};

export default App;

I installed the required packages using the following commands:

npm install dayjs
npm add [email protected]

Even after following the documentation, I am facing the error mentioned above. It seems related to undefined properties when rendering the component.

Can anyone help me understand what the issue is or suggest a solution?

• javascript
• reactjs
• tailwind-css
• react-datepicker
• tailwind-css-3

1 Answer 1

Related: onesine/react-tailwindcss-datepicker issue #300

In theory, version 1.7.3 should also work. In this case, I can imagine that you might have accidentally installed version 2.0.0 at first, or possibly 1.7.4 (which has since been removed a few weeks ago). If so, delete your lock file and the node_modules folder, then reinstall version 1.7.3.

I'm going to release a major version, i.e. version 2.0.0, and unpublish version 1.7.4.

---

Source: onesite's comment from issue #300

If that doesn't help, and if you are using React 18, it is recommended to use version 1.7.2.

npm install [email protected]

Otherwise, to fix the issue, you need to migrate the entire project to React 19 and use the new react-tailwindcss-datepicker v2 version.