Transpiled code gives TypeError:is not a constructor

Question

我有将在 React 项目 (CRA) 中使用的 JS 模块。

index.js 看起来像，

export { EvtScoket } from './socket';

socket.js 长得像

import openSocket from 'socket.io-client';

export default class EvtSocket {
  constructor(socketURL) {
    this.socket = openSocket(socketURL);
  }
  joinAsParticipant = () => {
    this.socket.emit('participantJoin', 'session');
  };

  joinAsSpeaker = () => {
    this.socket.emit('speakerJoin', 'lobby');
  };

  subscribeToInitialQuesitons = (cb) => {
    this.socket.on('initialQuestions', (questions) => {
      cb(null, questions);
    });
  };

  subscribeToQuestion = (cb) => {
    this.socket.on('newQuestionGot', (question) => cb(null, question));
  };

  sendQuestion = (question) => {
    this.socket.emit('newQuestionOn', question);
  };
}

babelrc 就像

{
  "presets": [
    [
      "@babel/preset-env",
      {
        // "targets": {
        //   "esmodules": true
        // },
        "modules": "commonjs"
      }
    ]
    // "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-classes",
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-transform-runtime",
    "@babel/plugin-syntax-export-extensions",
    [
      "@babel/plugin-transform-modules-commonjs",
      {
        "allowTopLevelThis": true
      }
    ]
  ]
}

当我转译这段代码并使用它时，React App 给出了

TypeError: eventtalk_core___WEBPACK_IMPORTED_MODULE_7__.EvtSocket is not a constructor

像这样导入使用

import { EvtSocket } from 'evt-core';

...
 constructor(){
   ...
   this.socket = new EvtSocket('xxx');
 }

最初的错误是 classProperties，这就是我需要设置 babel 的原因。

如果我console.log(EvtScoket)它输出undefined

当我直接将套接字文件导入为 evt-core/lib/socket 时，在 index.js

中导出似乎有些问题

Answer 1

在您的 socket.js 文件中，您将 class 导出为 default 导出。

这意味着您必须像这样导入它：

import EvtSocket from './socket.js`

您可以找到有关从 MDN Docs

导入的更多信息

Answer 2

这里可能有几个原因，但看起来您的导出有错别字：

export { EvtScoket } from './socket'; // typo in "Socket", EvtScoket/EvtSocket

import { EvtSocket } from 'evt-core'; // importing a named export that does not exist

修正该拼写错误，看看是否一切正常。一个快速测试是只导入错误类型的模块，例如

import { EvtScoket } from 'evt-core';

Transpiled code gives TypeError:is not a constructor

Transpiled code gives TypeError:is not a constructor

javascript

reactjs

babeljs

es6-modules