【Typescript】Uncaught SyntaxError: Unexpected token 'export'　を解決したいです

実現したいこと

【Uncaught SyntaxError: Unexpected token 'export'】を解決したいです。

発生している問題・分からないこと

【事象】
TSからJSにコンパイルした後、JSファイルに自動的にexportが記述されており、それが原因でエラーになってしまう。

【試行したこと】
JSのexportをコメントアウトすると、一時的にブラウザ上で正常に動作した。
→再度コンパイルすると、JSファイルが新規内容で上書きされるため、export文も追加されエラーになる。

exportが自動的に付与される理由についてご存知の方、ご教示頂きたく思います。
宜しくお願いします。

エラーメッセージ

error
1タイトルの通りです。

該当のソースコード

index.ts
1function responseFunc(value: string | number) {
2  if(typeof value === "string") {
3    console.log(`名前：${value}`);
4  } else if(typeof value === "number") {
5    console.log(`年齢：${value}歳`);
6  }
7}
8
9responseFunc("satoshi");

index.js
1function responseFunc(value) {
2    if (typeof value === "string") {
3        console.log(`名前：${value}`);
4    }
5    else if (typeof value === "number") {
6        console.log(`年齢：${value}歳`);
7    }
8}
9responseFunc("satoshi");
10export {};　←ここでエラーになる
11//# sourceMappingURL=index.js.map

tsconfig.json
1{
2  // Visit https://aka.ms/tsconfig to read more about this file
3  "compilerOptions": {
4    // File Layout
5    // "rootDir": "./src",
6    "outDir": "./dist",
7
8    // Environment Settings
9    // See also https://aka.ms/tsconfig/module
10    "module": "esnext",
11    "target": "es2020",
12    "types": [],
13    // For nodejs:
14    // "lib": ["esnext"],
15    // "types": ["node"],
16    // and npm install -D @types/node
17
18    // Other Outputs
19    "sourceMap": true,
20    "declaration": true,
21    "declarationMap": true,
22
23    // Stricter Typechecking Options
24    "noUncheckedIndexedAccess": true,
25    "exactOptionalPropertyTypes": true,
26
27    // Style Options
28    // "noImplicitReturns": true,
29    // "noImplicitOverride": true,
30    // "noUnusedLocals": true,
31    // "noUnusedParameters": true,
32    // "noFallthroughCasesInSwitch": true,
33    // "noPropertyAccessFromIndexSignature": true,
34
35    // Recommended Options
36    "strict": true,
37    "jsx": "react-jsx",
38    "verbatimModuleSyntax": true,
39    "isolatedModules": true,
40    "noUncheckedSideEffectImports": true,
41    "moduleDetection": "force",
42    "skipLibCheck": true,
43    "moduleResolution": "node"
44  },
45  "include": ["./src/**/*.ts"]
46}
47

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

根本原因の解決には至らなかった。

補足

特になし

maisumakun

2025/08/15 03:01

TSからJSへのコンパイルは、どのように実行していますか？

kosuke05

2025/08/16 01:01

maisumakunさんご返信頂き有難うございます。コンパイルはコマンドプロンプトで npx tsc で行っています。

行動規範の内容に同意します

回答1件

ベストアンサー

解決方法は二つです。

モジュールとして読み込む。【推奨】

ブラウザーで読み込む<script>タグにtype="module"という属性と値を追加してください。これで、JavaScriptがモジュールとして読み込まれるため、export文でエラーになることはありません。

スクリプトとしてコンパイルする。

tsconfig.jsonのmoduleDetectionの値を"legacy"に変更してください。これで、スクリプトとして解釈されるため、コンパイル時にexport文が追加されることは有りません。

解説

歴史的経緯により、JavaScriptにはスクリプトとモジュールという二つの形式があります。

スクリプトはレガシーな形式で、モジュールはモダンな形式です。レガシーなブラウザーではモジュールに対応していないため、スクリプトとして扱う必要がありましたが、現在サポートが有効な主要なブラウザーの全てがモジュールに対応しているため、古いブラウザーのためにスクリプトを使う理由はありません。スクリプトの形式はIEという遺物が存在していたときの過去のものです。ただし、HTML自体の互換性のために、<script>タグでtype属性を使わない場合は、スクリプトのJavaScriptになります。モジュールのJavaScriptを使うには、type="module"と属性で明示する必要があります。

さて、モジュールではimprotとexportというものを使います。スクリプトには無かったものなので、スクリプトでこれらの文があるとエラーになります。それが、質問であがっている、エラーの正体です。

では、TypeScriptはどうなのかというとスクリプトにもモジュールにも対応できています。昔のバージョンでは、import文とexport文の有無で判断していたようですが、moduleDetectionで細かい制御ができるようになっています。ただ、注意してほしいのは、最新のtsc(5.9.2で確認)で、tsc --initとした場合、moduleDetectionが"force"になるということです。これは、どんなJavaScriptでもモジュールとみなすという動作になります。そのため、export文を追加されるなどの動作になります。なお、スクリプトとみなされた場合は"use strict";が追加されます。

TypeScriptの詳細について、下記のリンク先も参考にしてください。

投稿2025/08/15 05:29