問題
以下の記事を参考に、iTermでreact-serverの環境構築を行いました。
参考記事
【図解解説】話題の神Reactフレームワークreact-serverで技術記事投稿サイトを開発するチュートリアル【@lazarv/react-server/Convex/TypeScript】
iTermではnpm run devでローカルサーバーが立ち上がるのに、Visual Studio Codeでは以下のようなエラーが発生します。
// Visual Studio Codeのターミナル(zsh)
% npm run dev
> tech-article-app@0.0.0 dev
> react-server
[react-server] Error: Cannot find module @rollup/rollup-darwin-x64. npm has a bug related to optional dependencies (https://github.com/npm/cli/issues/4828). Please try `npm i` again after removing both package-lock.json and node_modules directory.
at requireWithFriendlyError (/xxxxx/yyyyy/node_modules/rollup/dist/native.js:64:9)
at Object.<anonymous> (/xxxxx/yyyyy//node_modules/rollup/dist/native.js:73:76)
at Module._compile (node:internal/modules/cjs/loader:1369:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1427:10)
at Module.load (node:internal/modules/cjs/loader:1206:32)
at Module._load (node:internal/modules/cjs/loader:1022:12)
at cjsLoader (node:internal/modules/esm/translators:366:17)
at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:315:7)
at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
at async ModuleLoader.import (node:internal/modules/esm/loader:323:24)
解決方法
node_modulesとpackage-lock.jsonを削除し、再インストールします。
// Visual Studio Codeのターミナル(zsh)
% rm -rf node_modules package-lock.json
% npm install
これで解決しました。
// Visual Studio Codeのターミナル(zsh)
% npm run dev
> tech-article-app@0.0.0 dev
> react-server
,,,,,,,,,,,,, .,,,,,,,,,,,,.
,,,,,, ,,,,,,,, ,,,,,,,, ,,,,,
.,,,, ,,,,,,, .,,,,,, ,,,,
,,,, .,,/# ,@ ,,,,
,,,, .#*.**********.(@ ,,,,.
,,,, ,% ,**********.@( ,,,,
.,,, .,*@ **********./@. ,,,,
,,,, ,,,,,,,/% ********** &*,,,,, ,,,
,,,,,,,,,,,,,,,,,(*.*********, .... ,&,,,,,,,,,,
,,,,,,,,,,,,,. ,,,,%.,****************** %% ,,,,,,,,,,,,,
,,,,,,,, ,,,, ,,,*@.******************.*&,. ,,,,. ,,,,,,,,
,,,,,, ,,,,*,,,/% ****************** @*,,,,,,,, .,,,,,
.,,,,. ,,,,,,(*.*****************.(#,,,,,,,,,. ,,,,,
.,,, ,,,,,%%###%%# ,*********.@*,,,,,,,,, ,,,,
.,,,,. ,,,,,,,,,,,*% *********.#(,,,,,,,,,,,,. ,,,,,
,,,,,, ,,,,,,,,,,,(#.*********. #/,,,,,, .,,,,,,
,,,,,,,, ,,,, ,,,,%*,****************,.&,,. ,,,,. ,,,,,,,,
,,,,,,,,,,,,,, ,,% ,***************,,&,,, ,,,,,,,,,,,,,.
.,,,,,,,,,,,,*% ***************.*@,,,,,,,,,,,,,,,,,.
,,,, ,,*&@@@@@@.,******.,&,,,,,,,,, .,,,
.,,,, ,#/,*****..&,,,, ,,,,
,,,, @*.****.,&,,,,. ,,,,
,,,, (#.***.*&,,,, ,,,,.
,,,, @( **.*&,,,,,,. ,,,,
.,,,, *%.*.*&,,, ,,,,,,, ,,,,
,,,,, /% .,%,, ,,,,,,,, .,,,,
,,,,,,,,,%(*&, ,,,,,,,,,,,,,.
react-server/0.0.0-experimental-bb46e35-20250304-3af0ffd9 starting development server
22:26:49 [react-server] Initializing router configuration 🚦
22:26:49 [react-server] Router configuration successful ✅
終わりに
自分はターミナルを以下のように使い分けることが多いです。
- VS Codeでローカル環境を立ち上げる
- 環境構築はiTermで行う（iTermでログを残す）
解決できてよかったです。