Common component react-datepicker inclusion for React application

Question

I have common react-components like Button, Checkbox, Datepicker etc.,. I am transpiling using the rollup.config.js. For date picker I am using react-datepicker. All these components are used in all the other create-react-app application.

For Datepicker, I am getting the below error,

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `x`.
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `x`.
    at createFiberFromTypeAndProps (http://localhost:3000/static/js/bundle.js:80958:21)
    at createFiberFromElement (http://localhost:3000/static/js/bundle.js:80979:19)
...

react-components/CustomDatePicker/CustomDatePicker.jsx

import React from 'react';
import DatePicker from 'react-datepicker';

export default function CustomDatePicker() {
    return (
        <DatePicker selected={new Date()} onChange={(date) => { }} />
    );
}

react-palyground/Datepicker/Datepicker.jsx

import React from 'react';
import 'react-datepicker/dist/react-datepicker.module.css';
import { CustomDatePicker } from '[Organization-folder]/oneems-react-components';

export default function DatepickerElement() {

    return (
        <>
            <h1>Datepicker</h1>
            <CustomDatePicker />
        </>
    );
}

index.js

export { default as Datepicker } from "./DatePicker/DatePicker.jsx";

Can anyone help me to fix this issue?

Thanks in advance.

Riyaz Panarwala · Accepted Answer · 2024-11-18 07:52:06Z

0

import { CustomDatePicker } from '[Organization-folder]/oneems-react-components'; => this is wrong.

You have exported CustomDatePicker as default in other file so use as per below statement.

import CustomDatePicker from '[Organization-folder]/oneems-react-components'

answered Nov 18, 2024 at 7:52

Riyaz Panarwala

3161 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Keerthana Over a year ago

Forgot to include index.js. There DatePicker is default one. I'm sorry I missed the file.

Collectives™ on Stack Overflow

Common component react-datepicker inclusion for React application

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related