【FastAPI】Template内でjavascript自作モジュールをインポートしたいとき

1 min read

外部のjavascriptモジュールを自作のjavascriptでimportするとテンプレートで読み込むときにtype='module'が必要になる。

template.html
<script type="module" src="{{ url_for('static', path='/build/basicElementsOfScene.js') }}"></script>

こうやって読み込むときにサーバー側でMIME typeを明示的に指定していないと

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.

みたいなエラーがブラウザで発生する。
そこで、FastAPIのappを定義しているcontrol内でMIME typeを定義する。
ここで指定するmimetypeはapplication/javascriptでいいみたい。なんでかは分かりませんすみません。分かる方いたらコメントください。。

control.py
from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles
from fastapi.responses import ORJSONResponse
from starlette.templating import Jinja2Templates, _TemplateResponse
from starlette.requests import Request

# ここに追加します
import mimetypes
mimetypes.init()
mimetypes.add_type('application/javascript', '.js')


app = FastAPI(
    title='Tutorial App',
    description='App for learing FastAPI',
    version='0.9 beta',
)

app.mount("/static", StaticFiles(directory="static"), name="static")

templates = Jinja2Templates(directory="templates")
jinja_env = templates.env

def canvas(request: Request):
    return templates.TemplateResponse('testCanvas.html', {'request': request})

def index(request: Request):
    return templates.TemplateResponse('index.html', {'request': request})