【Vite】npm run devを実行した時のエラーの対応方法

2024年8月19日プログラム

Reactを動かす際にVite

「はじめてつくるReactアプリ：HTMLとCSSの知識だけで始められるReact開発！」という本を進める中で、Viteを使ってReactを動かす節があります。「npm run dev」を動かす際にエラーが出ました。

一応対処方法を備忘録として残しておきます。

はじめてつくるReactアプリ: HTMLとCSSの知識だけで始められるReact開発！（React入門）

created by Rinker

¥1,080(2024/09/15 05:43:13時点 Amazon調べ-詳細)

1. 実行環境
2. Error: Cannot find module @rollup/rollup-darwin-arm64 が発生
3. 対処方法
4. 追記：vscodeのターミナルからではなく、macのターミナルからnpm installをおこなう

実行環境

MacBook Air Apple M1
Mac OS Sonoma 14.5
Node v20.16.0
npm 10.8,1

Error: Cannot find module @rollup/rollup-darwin-arm64 が発生

npm run dev を実行した時のエラー内容は以下の通り。

% npm run dev

> react-weather-app@0.0.0 dev
> vite

/Users/takahashiseijika/Downloads/react-weather-app/node_modules/rollup/dist/native.js:59
		throw new Error(
		      ^

Error: Cannot find module @rollup/rollup-darwin-arm64. 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 (/Users/takahashiseijika/Downloads/react-weather-app/node_modules/rollup/dist/native.js:59:9)
    at Object.<anonymous> (/Users/takahashiseijika/Downloads/react-weather-app/node_modules/rollup/dist/native.js:68:76)
    ... 3 lines matching cause stack trace ...
    at Module._load (node:internal/modules/cjs/loader:1024:12)
    at cjsLoader (node:internal/modules/esm/translators:348:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:297:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24) {
  [cause]: Error: Cannot find module '@rollup/rollup-darwin-arm64'
  Require stack:
  - /Users/takahashiseijika/Downloads/react-weather-app/node_modules/rollup/dist/native.js
      at Module._resolveFilename (node:internal/modules/cjs/loader:1145:15)
      at Module._load (node:internal/modules/cjs/loader:986:27)
      at Module.require (node:internal/modules/cjs/loader:1233:19)
      at require (node:internal/modules/helpers:179:18)
      at requireWithFriendlyError (/Users/takahashiseijika/Downloads/react-weather-app/node_modules/rollup/dist/native.js:41:10)
      at Object.<anonymous> (/Users/takahashiseijika/Downloads/react-weather-app/node_modules/rollup/dist/native.js:68:76)
      at Module._compile (node:internal/modules/cjs/loader:1358:14)
      at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
      at Module.load (node:internal/modules/cjs/loader:1208:32)
      at Module._load (node:internal/modules/cjs/loader:1024:12) {
    code: 'MODULE_NOT_FOUND',
    requireStack: [
      '/Users/takahashiseijika/Downloads/react-weather-app/node_modules/rollup/dist/native.js'
    ]
  }
}

Node.js v20.16.0

対処方法

package-lock.json と node_modules ディレクトリの削除

まず、プロジェクトディレクトリで以下のコマンドを実行して、package-lock.json ファイルと node_modules ディレクトリを削除します。これは手動で削除しても、以下のコードを使って削除してもOKです。

rm package-lock.json
rm -rf node_modules

依存関係の再インストール

次に、以下のコマンドを実行して、プロジェクトの依存関係を再インストールします。

npm install

これにより、新たな package-lock.json が生成され、node_modules ディレクトリが再構築されます。

開発サーバーの起動

依存関係の再インストールが完了したら、開発サーバーを再度起動してみてください。

npm run dev

以下のように出力されれば成功です。

% npm run dev


> react-weather-app@0.0.0 dev
> vite


  VITE v5.4.1  ready in 457 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

追記：vscodeのターミナルからではなく、macのターミナルからnpm installをおこなう

こちらの記事の中に、「権限的なものが原因では？」と書いてあるとおり、何かしら権限的なものが要因な気もします。

試しにvscodeのターミナルではなく、macのターミナルからcdをしてフォルダを移動した後に、無事npm installできました。

プログラム

Posted by sensiki