Typescript ReferenceError:未定义导出

Question

尝试按照官方手册实现模块,我收到以下错误消息:

未捕获的ReferenceError:未定义导出

在app.js:2

但我的代码中没有任何地方使用该名称exports.

我怎样才能解决这个问题？

---

档

app.ts

let a = 2;
let b:number = 3;

import Person = require ('./mods/module-1');

模块1.T

 export class Person {
  constructor(){
    console.log('Person Class');
  }
}
export default Person;

tsconfig.json

{
   "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": true,
        "outDir": "scripts/"
    },
    "exclude": [
        "node_modules"
    ]
}

Answer 1

我通过"type": "module"从package.json.

Answer 2

这个问题很少有其他解决方案

• 在对Javascript的其他引用之前添加以下行.这是一个不错的小黑客.

   <script>var exports = {};</script>

• 使用最新版本的TypeScript会出现此问题,可以通过引用typescript版本2.1.6来消除此错误

Answer 3

编辑:

如果你不再瞄准目标es5,这个答案可能无效,我会尝试让答案更完整.

原始答案

如果未安装CommonJS(定义exports),则必须从以下位置删除此行tsconfig.json:

 "module": "commonjs",

根据评论,仅此一点可能不适用于更高版本的tsc.如果是这种情况,您可以安装CommonJS,SystemJS或RequireJS等模块加载器,然后指定它.

注意:

查看生成的main.js文件tsc.你会在最顶层找到这个:

Object.defineProperty(exports, "__esModule", { value: true });

它是错误消息的根,在删除后"module": "commonjs",,它将消失.

Answer 4

几周前我遇到了这个问题，并在短期内使用了上面的导出技巧，但最终找到了另一种对我来说非常有效的方法。

因此，与上面的其他一些回复不同，我实际上希望我正在编译的代码成为一个模块。通过设置"target": "es6", "module": "esnext"然后使用而type="module"不是链接到我编译的JS文件type="text/javascript"，我编译的代码不再有该行Object.defineProperty(exports, "__esModule", { value: true });，它仍然是一个模块

我的 tsconfig：

{
  "compilerOptions": {
    "target": "es6",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "module": "esnext",
    "moduleResolution": "node",
    "lib": ["es2016", "esnext", "dom"],
    "outDir": "build",
    "strict": true,
    "strictNullChecks": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "declaration": true,
  },
  "include": ["src/index.ts"],
  "exclude": ["build"]
}

我在 HTML 标签中链接到我编译的代码head：

<script src="../build/index.js" type="module" defer></script>

作为奖励，现在我还可以在type="module"主 HTML 代码下方的单独脚本中导入在该 index.js 文件中导出的任何内容body：

 <script type="module">
   import { coolEncodingFunction, coolDecodingFunction } from "../build/index.js";
   /* Do stuff with coolEncodingFunction and coolDecodingFunction */
   /* ... */
</script>

Answer 5

This is fixed by setting the module compiler option to es6:

{
  "compilerOptions": {     
    "module": "es6",
    "target": "es5",    
  }
}

Answer 6

我的解决方案是对上面所有内容的总结，并添加了一些小技巧，基本上我将其添加到我的 html 代码中

<script>var exports = {"__esModule": true};</script>
<script src="js/file.js"></script>

这甚至允许您使用import而不是require使用电子或其他东西，并且它适用于打字稿 3.5.1，目标：es3 -> esnext。

Answer 7

在package.json中，添加"type": "module"

在终端中输入

npx tsc --init

它将创建一个 tsconfig.json。

在tsconfig.json中，

1. 改成"target": "es5"​"target": "es6"
2. 注释掉//"module": "commonjs",
3. 取消注释"moduleResolution": "node",

你应该可以走了。

在package.json中，创建构建脚本：

"build": "tsc -p tsconfig.json"

然后，当你想要构建时，你只需编译npm run build

然后执行并且应该很好

Answer 8

我遇到了同样的问题并解决了它，将“ es5 ”库添加到 tsconfig.json 中，如下所示：

{
    "compilerOptions": {
        "target": "es5", //defines what sort of code ts generates, es5 because it's what most browsers currently UNDERSTANDS.
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true, //for angular to be able to use metadata we specify in our components.
        "experimentalDecorators": true, //angular needs decorators like @Component, @Injectable, etc.
        "removeComments": false,
        "noImplicitAny": false,
        "lib": [
            "es2016",
            "dom",
            "es5"
        ]
    }
}

Answer 9

对于仍然有这个问题的人，如果你的编译器目标设置为 ES6，你需要告诉 babel 跳过模块转换。为此，请将其添加到您的.babelrc文件中

{
  "presets": [ ["env", {"modules": false} ]]
}

Answer 10

npm install @babel/plugin-transform-modules-commonjs

并添加到.babelrc插件解决了我的问题。

Answer 11

我也有同样的错误。就我而言，这是因为我们的 TypeScript AngularJS 项目中有一个老式的 import 语句，如下所示：

import { IAttributes, IScope } from "angular";

它被编译成这样的 JavaScript：

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });

这在过去是需要的，因为我们随后IAttributes在代码中使用了它，否则 TypeScript 将不知道如何处理它。但是在删除 import 语句后，转换IAttributes为ng.IAttributes那两行 JavaScript 行就消失了 - 错误消息也是如此。