React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

[jhunexjun]

import { Row,
        Col,
        Card,
        CardBody,
        CardTitle,
        CardFooter,
        CardHeader,
        Dropdown,
        DropdownToggle,
        DropdownMenu,
        DropdownItem,
        //FormGroup, Label, FormText,
} from 'reactstrap';
//import UserContext from '../Session/session-context';
import { DatePicker } from 'reactstrap-date-picker';

I tried changing the way it exports and imports but no avail.

export default function Dashboard2() {
    const inputName = 'reactstrap_date_picker_basic';
    const [value, setValue] = useState("2019-06-01T00:00:00.000Z");
    const [fmtValue, setFmtValue] = useState("06/01/2019");

    return (
        <DatePicker
            name         = {inputName}
            instanceCount= {1}
            value        = {value}
            onChange     = {(v, f) => {setValue(v); setFmtValue(f);}}
            showTodayButton= {true}
            showWeeks={true}
            autoFocus={true}
            //minDate= {minDate} maxDate={maxDate}
          />
    );
}

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `InputGroup`.
    at InputGroup (http://localhost:3000/static/js/bundle.js:122465:7)
    at _DatePicker (http://localhost:3000/static/js/bundle.js:123600:7)
    at DTPicker
    at div
    at div
    at Col (http://localhost:3000/static/js/bundle.js:147737:7)
    at div
    at Row (http://localhost:3000/static/js/bundle.js:147649:7)
    at div
    at Dashboard2 (http://localhost:3000/static/js/bundle.js:1375:74)
    at RenderedRoute (http://localhost:3000/static/js/bundle.js:115670:5)
    at Routes (http://localhost:3000/static/js/bundle.js:116092:5)
    at div
    at div
    at AdminLayout (http://localhost:3000/static/js/bundle.js:860:76)
    at RenderedRoute (http://localhost:3000/static/js/bundle.js:115670:5)
    at Routes (http://localhost:3000/static/js/bundle.js:116092:5)
    at Router (http://localhost:3000/static/js/bundle.js:116030:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:114362:5)

"dependencies": {
    "bootstrap": "^4.6.0",
    "node-sass": "^7.0.3",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.4.2",
    "react-scripts": "5.0.1",
    "reactstrap": "^9.1.5",
    "reactstrap-date-picker": "^1.0.4",
  },

[afialapis]

Please, could you provide some link to some pen/repo/whatever where I am able to reproduce it? Seems error is not in this line:

import { DatePicker } from 'reactstrap-date-picker';

but on (my guess) some passed property which expects a custom element but receives some wrong value.

[haiderali22]

@jhunexjun facing same issue, did you able to resolve it? Using react 18.2.0 , "reactstrap": "^9.1.5 and "bootstrap": "^5.2.3",