Как мне включить свой собственный компонент, используя `require` вместо ʻinclude`

Question

Я создал простой компонент React с использованием nwb, как описано в этом руководстве.

Это очень простой компонент, представляющий собой всего лишь кнопку:

import t from 'prop-types'
import React, {Component} from 'react'

class LoadingButton extends Component {
  static propTypes = {
    disabled: t.bool,
    loading: t.bool,
    type: t.string,
  }
  static defaultProps = {
    disabled: false,
    loading: false,
    type: 'button',
  }
  render() {
    let {children, disabled, loading, type, ...props} = this.props
    if (loading) {
      disabled = true
    }
    return <button disabled={disabled} type={type} {...props}>
      {children}
    </button>
  }
}

export default LoadingButton

В другом проекте после использования npm link, Я могу импортировать этот компонент, делая что-то вроде этого:

import LoadingButton from 'react-loading-button'

И это работает!

Но мой вопрос в том, что мне также нужно включить этот компонент, используя require(внутри старой кодовой базы). Я бы хотел сделать что-то подобное:

var LoadingButton = require("react-loading-button");

К сожалению, у меня такой подход не работает. Это дает мне эту ошибку:

Error: Objects are not valid as a React child (found: [object Module]). If you meant to render a collection of children, use an array instead.

Я создал компонент, используя nwb, в котором говорится:

По умолчанию nwb создаст сборку CommonJS для вашего проекта в lib/, что является основным способом его использования при установке через npm, с основной конфигурацией package.json по умолчанию, указывающей на lib/index.js.

Поэтому я немного не понимаю, почему require не работает.

У кого-нибудь был опыт использования такого подхода?

Answer 1

Я пробовал использовать компоненты стиля функции / класса, var LoadingButton = require("react-loading-button").default; похоже, работает нормально, кодовая база не совсем такая, но попробовать стоит.