web-dev-qa-db-ja.com

Typescript ReferenceError：exportsが定義されていません

公式ハンドブック に従ってモジュールを実装しようとすると、このエラーメッセージが表示されます。

不明なReferenceError：exportsが定義されていない

app.js：2

しかし、私のコードのどこにもexportsという名前を使ったことはありません。

どうすればこれを修正できますか？

ファイル

app.ts

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

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

module-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"
    ]
}
typescriptmodule
62
George C.

編集：

es5をもうターゲットにしていない場合は、この回答は機能しない可能性があります。回答をより完全にするようにします。

元の答え

CommonJSがインストールされていない場合（ はexports を定義します）、tsconfig.jsonからこの行を削除する必要があります。

 "module": "commonjs",

コメントによると、これだけではtscのそれ以降のバージョンでは動作しないかもしれません。その場合は、CommonJS、SystemJS、RequireJSなどのモジュールローダーをインストールしてから指定できます。

注意：

tscが生成したmain.jsファイルを見てください。これは一番上にあります。

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

これはエラーメッセージの根本であり、"module": "commonjs",を削除すると消えます。

21
iFreilicht

この問題に対する他の解決策はほとんどありません

  • Javascriptへの他の参照の前に次の行を追加してください。これはいい小さなハックです。
   <script>var exports = {};</script>
  • この問題は最新バージョンのTypeScriptで発生します。このエラーはTypeScriptバージョン2.1.6を参照することで解決することができます。
22
Venkatesh Muniyandi

まだこの問題を抱えている人々のために、あなたのコンパイラターゲットがES6に設定されているならば、モジュール変換をスキップするようにbabelに伝える必要があります。これを行うには、これを.babelrcファイルに追加してください。

{
  "presets": [ ["env", {"modules": false} ]]
}
3
Cezar Augusto

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

そして.babelrcプラグインに追加して私の質問を解決しました。

1
Yi Zhang

受け入れられた答えは私のために問題を解決しませんでした。代わりにRequireJS（AMD Implementation）を使うように設定しました。私は https://stackoverflow.com/a/48436147/1019307 に私の解決策を書きました。

1
HankCa

コンパイラオプション内の "module"オプションと "target"オプションの間には関係があります（ここで文書化されているように）。

--module -m

ひも

target === "ES3"または "ES5"？ "CommonJS"： "ES6"

モジュールコードの生成を指定します： "None"、 "CommonJS"、 "AMD"、 "System"、 "UMD"、 "ES6"、 "ES2015"、または "ESNext"。 ►--outFileと組み合わせて使用​​できるのは、 "AMD"と "System"だけです。 ► "ES5"以下をターゲットにしている場合は、 "ES6"と "ES2015"の値を使用できます。

Moduleのデフォルト値はターゲットを条件としているので、あなたは自分のコードに合った正しいオプションを持つために両方のオプションとあなたがあなたのモジュールをロードするのに使っている方法の両方を考慮しなければなりません。

ES5をターゲットにしている場合は、デフォルト値以外のオプションを検討し、それに応じてモジュールのロード方法を変更する必要があります。

0
Matthieu

私の解決策は、私が追加した小さなトリックと上記のすべてのものの合計です、基本的に私は私のhtmlコードにこれを追加しました

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

エレクトロンなどを使用している場合は、これによってimportの代わりにrequireを使用することもできます。TypeScript 3.5.1、target：es3 - > esnextでは正常に機能します。

0
Hocine Abdellatif

私は同じ問題を抱えていて、このようにtsconfig.jsonに "es5"ライブラリを追加することでそれを解決しました：

{
    "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"
        ]
    }
}
0
rubensa