JavaScript の fetch で JavaScript のソースファイルをただのテキストとして読むときに余計な文字列が入ってしまう

Question

JavaScript の fetch で拡張子が js である JavaScript のソースコードファイルをただの文字列として読み込ませようと

const url = "./hogehoge/main.js";
const response = await fetch(url);
const text = await response.text();

として

console.log("Hello!");

を読み込むとテキストの中身が

console.log("Hello!");

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1haW4uanMiXSwic291cmNlc0NvbnRlbnQiOlsiY29uc29sZS5sb2coXCJIZWxsbyFcIik7XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxDQUFDLEdBQUcsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQzsifQ==

とお尻に sourceMappingUrl なる良く分からない情報が付いてしまいます。無理やりこのテキストを整形して取り除くことはできますが、そもそもこれが入らないようにする方法はありますか？他の拡張子のファイルでは起こらないみたいです。Vite でデバッグしています。

Answer 1

Vite でプロジェクトを管理していて、プロジェクトディレクトリ直下に単なる文字列として利用する予定の JavaScript ソースファイルを配置する間違った使い方をしている場合に、この問題が起こってしまうようです。ちゃんと public ディレクトリ以下に配置して参照すれば、良く分からない情報が付かなくなりました。多分その情報は Vite が内部で利用する何かなんだと思います。

Answer 2

【SourceMap(ソースマップ)ってなんぞ – ﾉﾘｰｰｰﾝ’s Blog】
https://nolyc.net/programming/whatssourcemap/

【ビルドオプション | Vite】
https://ja.vitejs.dev/config/build-options#build-sourcemap

当該環境がないため未検証ですが、ビルドオプション に hidden を指定すればできそうです。

Comments

[Paalon]

このビルドオプションは関係なかったようですが、Vite が原因だったようです。Vite の使い方（public ディレクトリ以下に配置しておかなければならない静的ファイルをプロジェクト直下において参照していた）が間違っていたようです。

[Paalon]

解決のヒントを与えてくださってありがとうございます。