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

Question

我已经创建了一个关于react包(React datepicker )的包装器，以便在我的团队中有一个跨产品的有凝聚力的数据报警器。我已经编写了包装器，可以在其中传递要呈现的自定义输入组件。我对它进行了测试，它在故事书中起作用。

我现在正试图将这个包装器绑定到一个Rails应用程序中。我有一个repo，它构建可以插入到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 使用的是反应情绪

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的？试一试

import { FVDatePicker } from 'fv-datepicker'

这种反应错误通常发生在进口错误的时候，很容易忽略.