question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

unpkg usage throwing react type is invalid error

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:21 (2 by maintainers)

github_iconTop GitHub Comments

3reactions
ShyamRajcommented, Jan 27, 2020

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

2reactions
drbeatcommented, May 7, 2021
Read more comments on GitHub >

github_iconTop Results From Across the Web

unpkg usage throwing react type is invalid error - - Bountysource
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...
Read more >
React Element Type is Invalid, why am I getting this error and ...
"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
Read more >
types/react/index.d.ts - UNPKG
* This lifecycle is invoked after an error has been thrown by a descendant component. 661, * It receives the error that was...
Read more >
single-spa-react
Use single-spa-react to create and export single-spa lifecycle functions from ... an Error boundary without having to write your own class component for...
Read more >
React v17.0 – React Blog
This demo uses Create React App, but it should be possible to follow a similar approach with any other tool. We welcome demos...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found