未捕獲的 ReferenceError：導入函數時未定義導出 - TypeScript

Question

我正在學習打字稿。 我從console.ts導入了output函數：

export function output(value: any): void {
  console.log(value);
}

編譯為console.js ：

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var console_1 = require("./console");
console_1.output('Hello');
//# sourceMappingURL=functional.js.map

在目標文件中導入和使用：

import {output} from "./console";
output('Hello');

tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ]
}

我沒有編譯錯誤，但不明白為什么在瀏覽器中出現以下錯誤：

Uncaught ReferenceError: exports is not defined at functional.js:2

Answer 1

我在 Vue.js / TypeScript 項目中遇到了類似的問題。 Vue.js 項目在幕后使用了 Webpack，我在外部模塊開發期間運行了npm link 。

最終，我發現這個問題是由 Webpack 試圖跟蹤我用npm link命令鏈接的依賴項的符號鏈接引起的。

解決方案是指示 Webpack 停止跟蹤符號鏈接。

相關的WebPack文檔部分： resolve.symlinks 。

相關 Vue.js 故障排除部分： Vue.js 和 npm 鏈接。

Answer 2

我有完全相同的問題。 告訴 webpack 停止跟隨符號鏈接有幫助，這是vue.config.js的片段

chainWebpack: config => {
  config.resolve.symlinks(false);
},