react-day-picker: unpkg usage throwing react type is invalid error

This is the error I get

Warning: React.createElement: 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 `DatePicker`.

In the render function I have a used DayPickerInput using the wrapper component from my component library. which imports import DayPickerInput from 'react-day-picker/DayPickerInput';

Here is the render function of the library wrapper component

<DayPickerInput
          classNames={{
            container: 'DatePickerInput',
            overlayWrapper: showOrHideDatePickerOverlay,
            overlay: ''
          }}
          value={this.state.date}
          onDayChange={this.handleDayChange}
          formatDate={formatDate}
          parseDate={parseDate}
          placeholder={placeholder}
          dayPickerProps={dayPickerProps}
          inputProps={{
            kind: 'date',
            label,
            labelPosition,
            disabled,
            hasFocus,
            helpText,
            material,
            muteValidation,
            name,
            regex,
            required,
            inRange: this.state.inRange,
            validityCheck,
            errormessage,
            maxLength: 10
          }}
          component={Input}
        />

In my component library rollup config, I have these plugins and commonjs with namedExports

 plugins: [
      babel(),
      resolve(),
      commonjs({
        namedExports: {
          'react-day-picker/moment': ['formatDate', 'parseDate'],
          'react-dom': ['createPortal', 'findDOMNode', 'render'],
        }
      }),

Do I have to do any namedExports for react-day-picker/DayPickerInput because I cannot find any export statement in DayPicker.js or types/index.ts under node_moduels/react-day-picker.

If possible can you share a snippet of your plugins in rollup.config.js

This is a nice workaround https://github.com/gpbl/react-day-picker/issues/1194#issuecomment-814065458

The issue seems to be with the export of this component, I’m not sure there’s a way to trick rollup into building it into something it’s not. If the author could export default like he did with <DayPicker /> - it would solve the problem, I think. Using <DayPicker /> in consumer component isn’t causing any problems, commonjs plugin resolves it as a function, unlike <DayPickerInput />

in ‘index.d.ts’ add:

export { default } from './DayPickerInput';

in your consumer component:

import DayPickerInput from 'react-day-picker';