导入节点模块什么导出默认类导致'模块'不是'构造函数' [英] Importing node module what exports default class results in a 'module' not a 'constructor'

问题描述

我正在尝试导入一个节点模块React-Signature-Pad。 index.js文件如下所示：

I am trying to import a node module React-Signature-Pad. The index.js file looks like this:

import PropTypes from 'prop-types'
import React, { Component } from 'react'
import trimCanvas from 'trim-canvas'

import Bezier from './bezier.js'
import Point from './point.js'

export default class SignatureCanvas extends Component {
  static propTypes = {
    velocityFilterWeight: PropTypes.number,
    minWidth: PropTypes.number,
    maxWidth: PropTypes.number,
    dotSize: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
    penColor: PropTypes.string,
    onEnd: PropTypes.func,
    onBegin: PropTypes.func,
    canvasProps: PropTypes.object
  }

  static defaultProps = {
    velocityFilterWeight: 0.7,
    minWidth: 0.5,
    maxWidth: 2.5,
    dotSize: () => {
      return (this.props.minWidth + this.props.maxWidth) / 2
    },
    penColor: 'black',
    backgroundColor: 'rgba(0,0,0,0)',
    onEnd: () => {},
    onBegin: () => {}
  }

  componentDidMount () {
    this._ctx = this._canvas.getContext("2d");
    //.....

我正在尝试使用它： code> import *作为SignatureCanvas从'reactions-signature-canvas'

I am trying to use it like this: import * as SignatureCanvas from 'react-signature-canvas'

然而，SignatureCanvas可以将一个属性赋予一个对象的默认。所以当我使用我得到一个错误，因为SignatureCanvas实际上不是一个构造函数。

However then SignatureCanvas evaulates to an object with a single property of 'default'. So when I use I get an error because SignatureCanvas is not actually a constructor.

我已经能够得到这个工作的唯一方法是像这样导入：

The only way I have been able to get this to work is to import it like this:

declare var require: any;
var SignatureCanvas = require('react-signature-canvas').default;

哪个似乎不对。

如果重要，我正在使用WebPack2来捆绑网站。

I am using WebPack2 to bundler the site if it matters.

推荐答案

您将不得不导入它，就像模块具有默认导出成员一样：

You will have to import it like as the module has a default exported member:

import SignatureCanvas from 'react-signature-canvas'

默认导出只是一个名为默认。所以你甚至可以这样做：

A default export is simply a named export with the name default. So you can even do this:

import { default as SignatureCanvas } from 'react-signature-canvas'

或者：

import * as SignatureCanvas from 'react-signature-canvas'

//... and use the `SignatureCanvas` class by accessing the `default property`
new SignatureCanvas.default()

请参阅有关默认出口的文档： https://www.typescriptlang.org/docs/handbook/modules.html#default-exports

See documentation on default exports: https://www.typescriptlang.org/docs/handbook/modules.html#default-exports

这篇关于导入节点模块什么导出默认类导致'模块'不是'构造函数'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！