fetchでtextではなくhtmlファイルが返ってくる。

Question

###fetchでtextではなくhtmlファイルが返ってくる。
すでに解決策は見つかっているのですが、根本的な原因がわかって質問させていただきました。
私は普段、以下のようにtextを取得しています。

import(`../text/${props.match.params.id}.txt`)//変数で動的に取得するファイルを変える。
            .then(res => {
                return fetch(res.default)
            })
            .then(res => res.text())
            .then(text=>{console.log(text)})

この状態ならテキストは取得できるのですが、もっと簡単にfetchを使えばいいのではないかと考えました。
そしてネットを参考にしつつ以下のコードを書きました。

fetch(`../text/${props.match.params.id}.txt`)
            .then(res=>res.text())
            .then(text=>console.log(text))

しかし、これではtextが取得できませんでした。
取得できたのは、「reactにおけるpublicディレクトリにあるindex.htmlファイルの内容」でした。
これはなぜでしょう？

原因不明がわからないので気持ちが悪いです・・・

Answer 1

import()は、コンパイル時に処理されます。変数を入れているように見えますが、../text/（何か）.txtに当たるパターンのファイルをすべて集めてきて、どれが来てもアクセスできるような形で、JavaScriptとして生成しています。

なので、（そのテキストファイルをHTTPアクセスでも読めるように公開していない限り）fetchではうまくいきません。

Comments

[hood]

回答ありがとうございます！
>import()は、コンパイル時に処理されます
そうだったのですね・・・勉強になりました。
dynamic importは三つのブラウザでしか使えないようなので、他の方法でもできるならいつかfetchに置き換えようと思いました！