React项目运行提示does not provide an export named 'default'如何解决

报错信息 #

does not provide an export named  'default'

触发报错的原始代码 #

import { RevAiStreamingClient, AudioConfig } from 'revai-node-sdk';

module.exports = class StreamingClient {
  constructor(accessToken, io) {
    console.log('Loading Streaming Client');
    this.accessToken = accessToken;
    this.io = io;
  }

  start() {
    this.revAiStreamingClient = new RevAiStreamingClient(this.accessToken, new AudioConfig('audio/x-wav'));

    this.revAiStreamingClient.on('close', (code, reason) => {
      console.log(`Connection closed, ${code}: ${reason}`);
    });

    this.revAiStreamingClient.on('httpResponse', (code) => {
      console.log(`Streaming client received http response with code: ${code}`);
    });

    this.revAiStreamingClient.on('connectFailed', (error) => {
      console.log(`Connection failed with error: ${error}`);
    });

    this.revAiStreamingClient.on('connect', (connectionMessage) => {
      console.log(`Connected with job id: ${connectionMessage.id}`);
      this.io.emit('streaming-connected', connectionMessage);
    });

    this.revStream = this.revAiStreamingClient.start();
    this.revStream.on('data', (data) => {
      this.io.emit('transcript', data);
    });
  }

  end() {
    this.revStream = null;
    this.revAiStreamingClient.end();
  }

  stream(data) {
    console.log('streaming data ....');
    this.revStream && this.revStream.write(data);
  }
};

报错原因 #

混用了CommonJS的module.exports导出语法和ES6的import导入语法，两种模块规范不兼容，导致项目无法识别到文件的默认导出。

修复方案 #

将导出方式统一修改为ES6的export default即可，修复后代码如下：

import { RevAiStreamingClient, AudioConfig } from 'revai-node-sdk';

class StreamingClient {
  constructor(accessToken, io) {
    console.log('Loading Streaming Client');
    this.accessToken = accessToken;
    this.io = io;
  }

  start() {
    this.revAiStreamingClient = new RevAiStreamingClient(this.accessToken, new AudioConfig('audio/x-wav'));

    this.revAiStreamingClient.on('close', (code, reason) => {
      console.log(`Connection closed, ${code}: ${reason}`);
    });

    this.revAiStreamingClient.on('httpResponse', (code) => {
      console.log(`Streaming client received http response with code: ${code}`);
    });

    this.revAiStreamingClient.on('connectFailed', (error) => {
      console.log(`Connection failed with error: ${error}`);
    });

    this.revAiStreamingClient.on('connect', (connectionMessage) => {
      console.log(`Connected with job id: ${connectionMessage.id}`);
      this.io.emit('streaming-connected', connectionMessage);
    });

    this.revStream = this.revAiStreamingClient.start();
    this.revStream.on('data', (data) => {
      this.io.emit('transcript', data);
    });
  }

  end() {
    this.revStream = null;
    this.revAiStreamingClient.end();
  }

  stream(data) {
    console.log('streaming data ....');
    this.revStream && this.revStream.write(data);
  }
}

export default StreamingClient;

内容的提问来源于stack exchange，提问作者jdog