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

[ShyamRaj]

Describe the bug
When I try to use react-day-picker I get the follow errors in my console

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

To Reproduce
I can reproduce the error in the sandbox here -https://codesandbox.io/s/react-day-picker-base-vt99v

Expected behavior
Should be able to use the react-day-picker normally

[KyorCode]

window.DayPicker is actually undefined. Hence you getting that error.

May I suggest to use import to get the DayPicker.

[ShyamRaj]

I have been using the import method until last week, My original issue is when I started to bundle react-day-picker as es6 module,
So little background, I have a custom component library and recently switched to use rollup instead of webpack to bundle es6 modules so it can be tree shaken on the projects its being not used.

When I run the project using the component library which uses react-day-picker I get a lot more errors, Which looks like react day picker does not export things correctly for me to bundle as esm.

[KyorCode]

I'm currently using it in a rollup based component library. Is it possible to share those errors?

On the other hand, it does indeed seem that react-day-picker isn't exported correctly on the window when using it as and esm package.

[ShyamRaj]

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

[ShyamRaj]

I just tried to use just a simple DayPicker example from http://react-day-picker.js.org/docs/getting-started like this import DayPicker from 'react-day-picker'; inside the component library and used the wrapper component in the project and I'm still getting the same error as before.

[paulrostorp]

Getting this error as well when trying to import DayPickerInput:

import DayPickerInput from 'react-day-picker/DayPickerInput';
[...]
<DayPickerInput onDayChange={day => console.log(day)} />

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

Using rollup (with typescript & commonjs plugin)...

[KyorCode]

could you add which version you are using?
https://codesandbox.io/s/react-day-picker-base-pwtp2

I tried with 7.4.0 and it seems to be working.

My commonjs looks like this:
commonjs({ include: 'node_modules/**' }),

No named exports.

Also using the import statement in your example, it just works:
https://codesandbox.io/s/react-day-picker-base-7sxpk

There is still a problem with the esm package though.

[paulrostorp]

@KyorCode using v7.4.0 as well.
Also the code sandbox you sent doesn't work...

[ShyamRaj]

@KyorCode Both the sandbox code has issues and does not work.

Also tried using your commonjs configuration, I get the below error,

[!] Error: 'formatDate' is not exported by node_modules/react-day-picker/moment.js
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
src/components/DatePicker/DatePicker.js (11:9)
 9: import { DateUtils } from 'react-day-picker';
10: import DayPickerInput from 'react-day-picker/DayPickerInput';
11: import { formatDate, parseDate } from 'react-day-picker/moment';

So after little digging removed import { formatDate, parseDate } from 'react-day-picker/moment'; and copy pasted a sample example code from the site http://react-day-picker.js.org/docs/input. This time the build was successful but I get the same error which is the original error I got using unpkg,

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 DatePicker (created by Hello)

FYI, in all the above attempts my component library runs fine with expected output, the issue occurs only when I use the wrapped component from my component library inside the actual project.

[KyorCode]

https://github.com/gpbl/react-day-picker/issues/919

[ShyamRaj]

@KyorCode I think its similar but different in many ways, I tried v7.3.0 and i still have the same issue.

[KyorCode]

@ShyamRaj could you post your wrapped component? Im starting to think the problem occurs there instead of the library.

[drbeat]

I have the exact same issue.
Its not an issue with the wrapped component as a simple component like

import DayPickerInput from 'react-day-picker/DayPickerInput';
const Picker = () => (<DayPickerInput />)
export default Picker;

already causes it.

my rollup config looks like this

export default {
  input: 'src/lib/index.js',
  output: [
    {
      file: pkg.main,
      format: 'cjs',
      sourcemap: true,
    },
    {
      file: pkg.module,
      format: 'es',
      sourcemap: true,
    },
  ],
  external: ['styled-components'],
  plugins: [
    external(),
    postcss({
      modules: true,
    }),
    url(),
    babel({
      exclude: 'node_modules/**',
    }),
    resolve({
      extensions: ['.js', '.jsx'],
    }),
    commonjs(),
    filesize(),
  ],
};

i also tried removing the exlusion of "node_modules" from babel and add inclusion to commonjs but didnt work either

[coreybrown89]

I am having the same issue as @drbeat . I am also using inside of a component library using rollup to package everything up.

[kelvinlouis]

Has anyone found a workaround yet? I have the same (see @coreybrown89 and @drbeat) issue concerning the bundle produced by Rollup.

[gpbl]

~This has been fixed in v7.4.5~ not sure about that

[DerekHung]

I am having the same issue, when I wrap up the DatePickerInput & produce ES module by Rollup.
Does anyone have workaround solution?

[Yuliana7]

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';