Can't track down possible import/export error - React/ES6 modules

Question

I've created a wrapper around a react package (react-datepicker) in order to have a cohesive datepicker across products on my team. I have written the wrapper where I can pass in a custom input component to be rendered. I have tested it and it works in Storybook.

I am now trying to tie this wrapper into a Rails app. I have a repo that builds components that can be inserted into the Rails application (works for other components).

When trying to render the component, I get the following error:

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 your code at index.js:8.
    in DatePicker (at renderComponent.js:5)

I have scoured SO and the answer seems to be that there is a likelihood that I have possibly done an import of a named export without {} or imported a default export with {}.

I've triple checked my code and cannot find where this may be happening.

The following is my code for the wrapper.

FVDatePicker.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'
import FVPicker from './FVDatePickerStyles'

class FVDatePicker extends Component {
  constructor(props) {
    super(props)

    this.state = {
      selectedDate: ''
    }
  }

  componentDidMount() {
    this.setState({ selectedDate: this.props.date || new Date() })
  }

  changeDateValue = selectedDate => {
    this.setState({ selectedDate })
  }

  render() {
    // This check and subsequent throw is because PropTypes
    // doesn't stop the execution of the component
    if (!this.props.customInput) {
      throw "'customInput' prop is required"
    }

    return (
      <FVPicker className="FVDatePicker">
        <DatePicker
          customInput={this.props.customInput}
          selected={this.state.selectedDate}
          onChange={date => this.changeDateValue(date)}
          dateFormat={this.props.dateFormat || 'MM/dd/yyyy'}
        />
      </FVPicker>
    )
  }
}

FVDatePicker.propTypes = {
  customInput: PropTypes.node.isRequired
}

export default FVDatePicker

The corresponding styles FVDatePickerStyles.js uses react-emotion

import styled from 'react-emotion'
import DT from 'design-tokens/src/design-tokens'

const FVPicker = styled.div/* css */ `
  display: inline-block;

  // Other styles but leaving out for the sake of brevity

`

export default FVPicker

The above code is then rolled up into dist/index.js

In my renderable application, here is the code.

componentName/index.js

import React from 'react'
import FVDatePicker from 'fv-datepicker'
import renderComponent from '../../utils/renderComponent'
import CustomDatePickerInput from './CustomDatePickerInput'

const DatePicker = () => {
  return (
    <FVDatePicker
      date=""
      inputName="start-time"
      dateFormat="yyyy/MM/dd"
      customInput={<CustomDatePickerInput />}
    />
  )
}

window.DatePicker = renderComponent(DatePicker)
export default DatePicker

FVDatePicker comes from node_modules as it's in the package.json

And this is the renderComponent that is referenced in the above file:

import React from 'react'
import { render } from 'react-dom'

const renderComponent = Component => (element, props = {}) =>
  render(<Component {...props} />, element)

export default renderComponent

The expected result should be that my component should render within the rails application, but throws the above listed error (I'll add again here):

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 your code at index.js:8.
    in DatePicker (at renderComponent.js:5)

Am I missing something with the import/exports? Or doing something else wrong?

Answer 1

Is FVDatePicker a default import or a named import ? try

import { FVDatePicker } from 'fv-datepicker'

Those kind of react errors usually occur when imports are wrong, and it's easily to overlook that...