Javascript模块导入失败-为什么？

我是一个javascript新手，我正在试图弄清楚为什么这个导入语句失败。我不知道这是否相关，但我是在createreact应用程序及其默认网页设置的上下文中进行此操作的。我有以下文件：

TestClass.js

export default class TestClass {
    sayHello() {
        console.log("Hello World.");
    }
}

TestModule.js

import TestClass from "./TestClass";

module.exports = {
    MyExport: {
        doSomething: function() {
            let testClass = new TestClass();
            testClass.sayHello();
        }
    }
}

然后是我的主应用程序文件App.js：

import React, { Component } from "react";
import "./App.css";
import { MyExport } from "./TestModule"

class App extends Component {
    constructor(props) {
        super(props);

        MyExport.doSomething();

        ... bla bla bla ...
}

当我尝试在Node.js中运行这个时，它返回

Failed to compile.

./src/App.js
Attempted import error: 'MyExport' is not exported from './TestModule'.

我做错了什么

您可以尝试以下方法：

import { TestClass } from "./TestClass";

const Object = {
   MyExport: {
    doSomething: function() {
      let testClass = new TestClass();
      testClass.sayHello();
    }
  }
}
export default MyExport

import { TestClass } from "./TestClass";

module.exports = function () {
    return {
        MyExport: {
          doSomething: function() {
           let testClass = new TestClass();
           testClass.sayHello();
          }
       }
    }
}

因为您正在使用两种不同类型的导入导出

或者，如果必须使用

模块.exports

，您可以尝试以下操作：

import { TestClass } from "./TestClass";

const Object = {
   MyExport: {
    doSomething: function() {
      let testClass = new TestClass();
      testClass.sayHello();
    }
  }
}
export default MyExport

import { TestClass } from "./TestClass";

module.exports = function () {
    return {
        MyExport: {
          doSomething: function() {
           let testClass = new TestClass();
           testClass.sayHello();
          }
       }
    }
}

您可以尝试导出函数，而不是与之混合的对象。您的TestModule应按如下方式导出：

import { TestClass } from "./TestClass";

export const MyExport = {
  doSomething: function () {
    let testClass = new TestClass();
    testClass.sayHello();
  }
};

---

这在允许代码的其余部分保持不变的情况下应该可以工作

module.exports应该导出函数而不是对象，这是真的吗？似乎我可以找到很多不属于这种情况的例子（例如）。我不是说你不能使用object，我只是建议你使用function。在我的回答中改变这句话可能会误导你，你是对的。这很有效-谢谢。不过，我想了解更多。是否禁止以这种方式混合进口？这是因为webpack和/或Node在编译时查看一个文件，并确定它是什么类型的“东西”@user12798778 require-type语法主要用于NodeJS中，并且该环境本机支持该语法。您尝试使用的ES6样式导入在构建期间由Webpack解析，Webpack本质上解析所有导入并将它们粘贴到一个大文件中。虽然webpack能够支持CommonJS和ES6类型的导入，但您不能像在代码中那样混合和匹配这些不同的模块方法。您可以在这里@user12798778阅读更多关于Webpack如何实现这一点的信息。主要的收获是，如果您使用

module.exports

导出模块，您应该使用

require（“…”）

导入它，或者您可以使用es6 module

export

语法导出模块，这意味着您必须通过

import。。。从…

。只是不要混合不同的导出和导入方法，因为Webpack不知道如何处理这些情况。明白了。谢谢-非常感谢。