无法追踪可能的导入/导出错误 - React/ES6 模块

Question

我创建了一个围绕反应包 (react-datepicker) 的包装器，以便在我的团队中的产品之间拥有一个有凝聚力的日期选择器。我已经编写了包装器，可以在其中传入要呈现的自定义输入组件。我已经对其进行了测试，它可以在 Storybook 中使用。

我现在正尝试将此包装器绑定到 Rails 应用程序中。我有一个构建可以插入 Rails 应用程序的组件的存储库（适用于其他组件）。

尝试渲染组件时，出现以下错误：

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)

我已经搜索过了，答案似乎是我有可能在没有{} 的情况下导入了命名导出或使用{} 导入了默认导出。

我已经三次检查了我的代码，但找不到可能发生这种情况的地方。

以下是我的包装代码。

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

对应的样式FVDatePickerStyles.js使用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

然后将上面的代码汇总到dist/index.js

在我的可渲染应用程序中，代码如下。

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 来自 node_modules，因为它在 package.json 中

这就是上面文件中引用的renderComponent：

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

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

export default renderComponent

预期的结果应该是我的组件应该在 rails 应用程序中呈现，但会抛出上面列出的错误（我将在此处再次添加）：

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)

我在导入/导出方面遗漏了什么吗？还是做错了什么？

Answer 1

FVDatePicker是默认导入还是命名导入？试试

import { FVDatePicker } from 'fv-datepicker'

当导入错误时，通常会发生这种反应错误，并且很容易忽略...