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"
]
}
編集:
es5
をもうターゲットにしていない場合は、この回答は機能しない可能性があります。回答をより完全にするようにします。
元の答え
CommonJSがインストールされていない場合( はexports
を定義します)、tsconfig.json
からこの行を削除する必要があります。
"module": "commonjs",
コメントによると、これだけではtsc
のそれ以降のバージョンでは動作しないかもしれません。その場合は、CommonJS、SystemJS、RequireJSなどのモジュールローダーをインストールしてから指定できます。
注意:
tsc
が生成したmain.js
ファイルを見てください。これは一番上にあります。
Object.defineProperty(exports, "__esModule", { value: true });
これはエラーメッセージの根本であり、"module": "commonjs",
を削除すると消えます。
この問題に対する他の解決策はほとんどありません
- Javascriptへの他の参照の前に次の行を追加してください。これはいい小さなハックです。
<script>var exports = {};</script>
- この問題は最新バージョンのTypeScriptで発生します。このエラーはTypeScriptバージョン2.1.6を参照することで解決することができます。
まだこの問題を抱えている人々のために、あなたのコンパイラターゲットがES6に設定されているならば、モジュール変換をスキップするようにbabelに伝える必要があります。これを行うには、これを.babelrc
ファイルに追加してください。
{
"presets": [ ["env", {"modules": false} ]]
}
npm install @babel/plugin-transform-modules-commonjs
そして.babelrcプラグインに追加して私の質問を解決しました。
受け入れられた答えは私のために問題を解決しませんでした。代わりにRequireJS(AMD Implementation)を使うように設定しました。私は https://stackoverflow.com/a/48436147/1019307 に私の解決策を書きました。
コンパイラオプション内の "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をターゲットにしている場合は、デフォルト値以外のオプションを検討し、それに応じてモジュールのロード方法を変更する必要があります。
私の解決策は、私が追加した小さなトリックと上記のすべてのものの合計です、基本的に私は私のhtmlコードにこれを追加しました
<script>var exports = {"__esModule": true};</script>
<script src="js/file.js"></script>
エレクトロンなどを使用している場合は、これによってimport
の代わりにrequire
を使用することもできます。TypeScript 3.5.1、target:es3 - > esnextでは正常に機能します。
私は同じ問題を抱えていて、このように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"
]
}
}