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

キャッチされていないReferenceError：エクスポートが定義されていません

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などのモジュールローダーをインストールして指定できます。

注意：

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

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

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

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

• JavaScriptへの他の参照の前に次の行を追加します。これは素晴らしいハックです。

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

• この問題は、TypeScriptの最新バージョンで発生します。このエラーは、typescriptバージョン2.1.6を参照することで解消できます。

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

.babelrcプラグインに追加すると、私の質問が解決しました。

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

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

これは、electronか何かを使用している場合のimport代わりに使用することもできrequire、typescript 3.5.1、ターゲット：es3-> esnextで正常に動作します。

"type": "module"からフィールドを削除して問題を解決しましたpackage.json。

私は同じ問題を抱えており、次のように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"
        ]
    }
}

この問題が引き続き発生する場合、コンパイラターゲットがES6に設定されている場合は、モジュール変換をスキップするようbabelに指示する必要があります。これを行うには、これを.babelrcファイルに追加します

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

これは、moduleコンパイラオプションをes6次のように設定することで修正されます。

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

私も同じエラーがありました。私の場合は、TypeScript AngularJSプロジェクトに次のような昔ながらのimportステートメントがあったためです。

import { IAttributes, IScope } from "angular";

これは次のようにJavaScriptにコンパイルされました。

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

私たちIAttributesはコードで使用し、TypeScriptはそれ以外の方法でそれをどうするかわからなかったので、昔はこれが必要でした。しかし、importステートメントを削除し、それらの2つのJavaScript行に変換IAttributesするng.IAttributesと、表示が消え、エラーメッセージも消えました。

のlibraryTarget: 'umd'ように単に追加します

const webpackConfig = {
  output: {
    libraryTarget: 'umd' // Fix: "Uncaught ReferenceError: exports is not defined".
  }
};

module.exports = webpackConfig; // Export all custom Webpack configs.

私にとっては、"esModuleInterop": truetsconfig.jsonから削除するとうまくいきました。

一部のASP.NETプロジェクトimportでexportは、Typescriptsでまったく使用されない場合があります。

質問のエラーが表示されたところ、エラーメッセージが表示されましたが、生成されたJSスクリプトを次のようにビューに追加するだけでよいことが後でわかりました。

<script src="~/scripts/js/[GENERATED_FILE].Index.js" asp-append-version="true"></script>

上記の@iFreilichtの提案を試してください。webpackをすべてインストールした後で問題が解決しない場合は、オンラインのどこかからwebpack構成をコピーし、CommonJSを誤ってサポートするように出力を構成した可能性があります。これがそうでないことを確認してくださいwebpack.config.js：

module.exports = {
  mode: process.env.NODE_ENV || "development",
  entry: { 
    index: "./src/js/index.ts"
  },
  ...
  ...
  output: {
    libraryTarget: 'commonjs',         <==== DELETE THIS LINE
    path: path.join(__dirname, 'build'),
    filename: "[name].bundle.js"
  }
};

同じ問題があり、JSパッケージの読み込み順序を変更することで修正しました。

必要なパッケージが呼び出される順序を確認し、適切な順序でロードします。

私の特定のケースでは、私は負荷に必要な（モジュールバンドラを使用していない）Redux、それからRedux Thunk、それからReact Redux。React Redux前にロードするRedux Thunkと私にくれexports is not definedます。

注：これはOPの回答には当てはまらない可能性がありますが、このエラーが発生しました。

したがって、私が直面していた問題は、特定のCDNから「js」ライブラリを取得したときにこのエラーが発生することでした。

私がしている唯一の間違ったことは、CDNのcjsディレクトリから次のようにインポートすることでした。 https://cdn.jsdelivr.net/npm/@popperjs/core@2.4.0/dist/cjs/popper.min.js

そのdist/cjs部分に気づきましたか？それが問題でした。

私の場合はCDN（jsdelivr）に戻り、umdフォルダーを見つけるためにナビゲートしました。そしてpopper.min.js、インポートする正しいファイルである別のセットを見つけることができました： https://cdn.jsdelivr.net/npm/@popperjs/core@2.4.0/dist/umd/popper.min.js。

  {
    "compileOnSave": false,
    "compilerOptions": {
      "baseUrl": "./",
      "outDir": "./dist",
      "sourceMap": true,
      "declaration": false,
      "module": "esnext",
      "moduleResolution": "node",
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "target": "es5",
      "typeRoots": ["node_modules/@types"],
      "lib": ["es2018", "dom"]
    }
  }

同じ問題が発生しましたが、セットアップには別の解決策が必要でした。

ファイルを含むcreate-react-app-rewiredパッケージを使用していconfig-overrides.jsます。以前はaddBabelPresets（override()メソッドで）のインポートを使用していたcustomize-craため、これらのプリセットを別のファイルに抽象化することにしました。偶然にも、これは私の問題を解決しました。

useBabelRc()のoverride()メソッドに追加して、次のファイルをconfig-overrides.js作成しましたbabel.config.js。

module.exports = {
    presets: [
        '@babel/preset-react',
        '@babel/preset-env'
    ],
}