🔥

これじゃ使えないよDeno+Vite+React

2024/11/21に公開

https://docs.deno.com/deploy/tutorials/vite/
Deno公式では上記のURLでviteを使ってReactアプリを作るチュートリアルを公開しています。

この手順を実行すると、確かによく見るviteのハローワールドが実行出来ました。

しかし、JSRは使えない!
下記のようにjsrモジュールの参照を追加してビルドすると

import { format } from "jsr:@std/datetime@^0.225.2";
import './App.css'
function App() {
  const dateTimeStr = format(new Date(), "yyyy-MM-dd HH:mm:ss.SSS");
  return (<>日付:{dateTimeStr}</>)
}
export default App

以下のエラーになる。平たく言うとviteがjsrに非対応という事

$ deno task build
Task build deno run -A --node-modules-dir npm:vite build
vite v5.4.11 building for production...
✓ 4 modules transformed.
x Build failed in 161ms
error during build:
[vite]: Rollup failed to resolve import "jsr:@std/datetime@^0.225.2" from "C:/test/vite-project/src/App.tsx".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
    at viteWarn (file:///C:/test/vite-project/node_modules/.deno/vite@5.4.11/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:65589:17)
    at onwarn (file:///C:/test/vite-project/node_modules/.deno/@vitejs+plugin-react@4.3.3/node_modules/@vitejs/plugin-react/dist/index.mjs:280:9)
    at onRollupWarning (file:///C:/test/vite-project/node_modules/.deno/vite@5.4.11/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:65619:5)
    at onwarn (file:///C:/test/vite-project/node_modules/.deno/vite@5.4.11/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:65284:7)
    at file:///C:/test/vite-project/node_modules/.deno/rollup@4.27.3/node_modules/rollup/dist/es/shared/node-entry.js:19472:13
    at Object.logger [as onLog] (file:///C:/test/vite-project/node_modules/.deno/rollup@4.27.3/node_modules/rollup/dist/es/shared/node-entry.js:21198:9)
    at ModuleLoader.handleInvalidResolvedId (file:///C:/test/vite-project/node_modules/.deno/rollup@4.27.3/node_modules/rollup/dist/es/shared/node-entry.js:20087:26)
    at file:///C:/test/vite-project/node_modules/.deno/rollup@4.27.3/node_modules/rollup/dist/es/shared/node-entry.js:20045:26
exit status 1

Deno側のgithubでこの問題に言及しているのは以下のレポジトリ
https://github.com/denoland/deno/issues/23929
Vite側のレポジトリでは言及なし
https://github.com/vitejs/vite/issues?q=is%3Aissue+is%3Aopen+jsr

jsr側としては以下の方法を提示しているが、これはjsrをnode_modulesの世界に配置する方法でdeno+jsrに期待しているものとはちょっと違う…
https://jsr.io/docs/with/vite

nextでも同じ問題を抱えていて、ビルドする系はdeno側がnodeに歩み寄っても限界がある感じ。

バージョンは以下の通り

$ deno --version
deno 2.0.4 (stable, release, x86_64-pc-windows-msvc)
v8 12.9.202.13-rusty
typescript 5.6.2

これが将来解消される事を祈る。

Discussion