Zenn
⚡️

React Router v7 + Node v20 で「The CJS build of Vite's ～」が出る

に公開
React
Node.js
Vite
React Router
Remix
tech

React Router v7 をテンプレート(npx create-react-router@latest)から作って起動(npm run dev)したら、The CJS build of Vite's Node API is deprecated.という警告が出ました。

node@568664e019fc:/workspaces/react-router-sample$ npm run dev

> dev
> react-router dev

The CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
  ➜  Local:   http://127.0.0.1:5173/
  ➜  press h + enter to show help

この警告は、ViteのNode APIのCJSビルドが非推奨になったことを示しているものですが、package.jsonのtypeは既にmoduleになっていました。

調べていくと、Node.jsのマイナーバージョンの違いで発生することがわかりました。
Node v20 を使っていたのですが、下記のような結果になりました。

  • v20.15.1 ×警告が出る
  • v20.16.0 ×
  • v20.17.0 ×
  • v20.18.3 ×
  • v20.19.3 〇警告が出ない
node@568664e019fc:/workspaces/react-router-sample$ node -v
v20.19.3
node@568664e019fc:/workspaces/react-router-sample$ npm run dev

> react-router-sample@ dev /workspaces/react-router-sample
> react-router dev

  ➜  Local:   http://127.0.0.1:5173/
  ➜  press h + enter to show help

v20.19 で require(esm) が有効になっているので、それで変わったのかもしれません。
(そもそもv22やv24使えって話も..)

同じ現象で悩む人がいるかもしれないので残しておきます。

Discussion