Deno+React+jsxImportSourceの設定

React v17から、jsxを利用する際にimport React from 'react';をファイルにわざわざ書かなくても自動的にimportする仕組みが導入されたのだが、これをDenoで有効にする設定を書く。

DenoのJSXに関する設定については、Configuring JSX in Denoという公式のドキュメントに記述してあるものの、preactの場合の設定例などが書いてあってReactだとどうするのか一見よくわからなかったので調べてみた。

結論から言うと、次のような設定をすると動く。

deno.json:

{
  "imports": {
    "react": "https://esm.sh/react@18.2.0",
    "react/": "https://esm.sh/react@18.2.0/",
    "react-dom": "https://esm.sh/react-dom@18.2.0",
    "react-dom/": "https://esm.sh/react-dom@18.2.0/"
  },
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react"
  }
}

example.tsx:

import { renderToString } from 'react-dom/server';

console.log(renderToString(<div>hello</div>));

$ deno run example.tsx
<div>hello</div>

Denoの場合、.tsxという拡張子のファイルがある場合、自動的にreact/jsx-runtimeを読み込むらしい(参照)。じゃあその辺り勝手にうまいことやってくれるのかと思いきや、deno.jsonのcompilerOptionsやimportsに手を入れる必要があった。おしまい。