Zenn
Closed13

npm run に m1 で失敗した

riddle_tecriddle_tec
❯ npm run dev


> frontend@0.0.0 dev
> vite

failed to load config from /Users/xxx/Cording/bomb/frontend/vite.config.ts
error when starting dev server:
Error: The package "@esbuild/darwin-arm64" could not be found, and is needed by esbuild.

If you are installing esbuild with npm, make sure that you don't specify the
"--no-optional" or "--omit=optional" flags. The "optionalDependencies" feature
of "package.json" is used by esbuild to install the correct binary executable
for your current platform.
    at generateBinPath (/Users/xxx/Cording/bomb/frontend/node_modules/esbuild/lib/main.js:1838:15)
    at esbuildCommandAndArgs (/Users/xxx/Cording/bomb/frontend/node_modules/esbuild/lib/main.js:1905:33)
    at ensureServiceIsRunning (/Users/xxx/Cording/bomb/frontend/node_modules/esbuild/lib/main.js:2070:25)
    at build (/Users/xxx/Cording/bomb/frontend/node_modules/esbuild/lib/main.js:1961:26)
    at bundleConfigFile (file:///Users/xxx/Cording/bomb/frontend/node_modules/vite/dist/node/chunks/dep-2285ba4f.js:62960:26)
    at loadConfigFromFile (file:///Users/xxx/Cording/bomb/frontend/node_modules/vite/dist/node/chunks/dep-2285ba4f.js:62936:31)
    at resolveConfig (file:///Users/xxx/Cording/bomb/frontend/node_modules/vite/dist/node/chunks/dep-2285ba4f.js:62558:34)
    at createServer (file:///Users/xxx/Cording/bomb/frontend/node_modules/vite/dist/node/chunks/dep-2285ba4f.js:61878:26)
    at CAC.<anonymous> (file:///Users/xxx/Cording/bomb/frontend/node_modules/vite/dist/node/cli.js:729:30)
riddle_tecriddle_tec
vite.confit.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
});
riddle_tecriddle_tec

vite(ヴィート)

  1. Hot Module Replacement : ページの再読み込み無しで、モジュールの交換・追加・削除をアプリケーションの動作中に行います。(hot reload にちかい？）
  2. コードをバンドルする。トランスコンパイルのことかな？
riddle_tecriddle_tec
package.json
...
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",

これ npm run dev でコケたけど、vite がないのでは？

riddle_tecriddle_tec
❯ npm i -g vite


added 15 packages, and audited 16 packages in 8s

4 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

❯ which vite

/opt/homebrew/bin/vite

同じエラー

❯ npm run dev


> frontend@0.0.0 dev
> vite

failed to load config from /Users/xxx/Cording/bomb/frontend/vite.config.ts
error when starting dev server:
Error: The package "@esbuild/darwin-arm64" could not be found, and is needed by esbuild.
riddle_tecriddle_tec

なぜ Vite なのか | Vite

Vite は、esbuild を使用して依存関係の事前バンドルを行います。esbuild は Go 言語によって開発されており、依存関係の事前バンドルは、JavaScript ベースよりも 10 倍から 100 倍高速です。

へー。なるほど。
で、vite が使ってる esbuild のバイナリが arm 版になってなくて怒られてるということか。

riddle_tecriddle_tec
package-lock.json
    "@esbuild/win32-x64": {
      "version": "0.16.8",
      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.16.8.tgz",
      "integrity": "sha512-Zgzyn7njXpSSe1YGQk03eW4uei4QoZKloe/TBQZXgQHo6ul/ux0BtYdLz3MZ8WDlvqTG3QnLV4+gtV5ordM0+g==",
      "dev": true,
      "optional": true
    },

    "esbuild": {
      "version": "0.16.8",
      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.16.8.tgz",
      "integrity": "sha512-RKxRaLYAI5b/IVJ5k8jK3bO2G7cch2ZIZFbfKHbBzpwsWt9+VChcBEndNISBBZ5c3WwekFfkfl11/2QfIGHgDw==",
      "dev": true,
      "requires": {
        "@esbuild/android-arm": "0.16.8",
        "@esbuild/android-arm64": "0.16.8",
        "@esbuild/android-x64": "0.16.8",
        "@esbuild/darwin-arm64": "0.16.8",
        "@esbuild/darwin-x64": "0.16.8",
        "@esbuild/freebsd-arm64": "0.16.8",
        "@esbuild/freebsd-x64": "0.16.8",
        "@esbuild/linux-arm": "0.16.8",
        "@esbuild/linux-arm64": "0.16.8",
        "@esbuild/linux-ia32": "0.16.8",
        "@esbuild/linux-loong64": "0.16.8",
        "@esbuild/linux-mips64el": "0.16.8",
        "@esbuild/linux-ppc64": "0.16.8",
        "@esbuild/linux-riscv64": "0.16.8",
        "@esbuild/linux-s390x": "0.16.8",
        "@esbuild/linux-x64": "0.16.8",
        "@esbuild/netbsd-x64": "0.16.8",
        "@esbuild/openbsd-x64": "0.16.8",
        "@esbuild/sunos-x64": "0.16.8",
        "@esbuild/win32-arm64": "0.16.8",
        "@esbuild/win32-ia32": "0.16.8",
        "@esbuild/win32-x64": "0.16.8"
      }
    },

この辺？

riddle_tecriddle_tec

改めてエラーの

If you are installing esbuild with npm, make sure that you don't specify the "--no-optional" or "--omit=optional" flags. The "optionalDependencies” feature of "package.json" is used by esbuild to install the correct binary executable for your current platform.

esbuildをnpmでインストールする場合、「--no-optional」または「--omit=optional」フラグを指定しないように注意すること。package.json "の "optionalDependencies "機能は、esbuildが現在のプラットフォームに対して正しいバイナリ実行ファイルをインストールするために使用される。

こんなことやってない。

riddle_tecriddle_tec

よし、esbuild の arm64 実装がそもそもちゃんとあるのかを調べよう。
最初に調べると即答えに辿り着きそうだったので封印していたが・・・

riddle_tecriddle_tec
rm -rf node_modules

npm i esbuild -D

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 1f34fa5..124d3d4 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -19,6 +19,7 @@
         "@vitejs/plugin-react": "^3.0.0",
         "autoprefixer": "^10.4.13",
         "cross-env": "^7.0.3",
+        "esbuild": "^0.16.10",
         "postcss": "^8.4.20",
         "tailwindcss": "^3.2.4",
         "typescript": "^4.9.4",
@@ -379,10 +380,346 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.16.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.16.10.tgz",
+      "integrity": "sha512-RmJjQTRrO6VwUWDrzTBLmV4OJZTarYsiepLGlF2rYTVB701hSorPywPGvP6d8HCuuRibyXa5JX4s3jN2kHEtjQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.16.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.16.10.tgz",
+      "integrity": "sha512-47Y+NwVKTldTlDhSgJHZ/RpvBQMUDG7eKihqaF/u6g7s0ZPz4J1vy8A3rwnnUOF2CuDn7w7Gj/QcMoWz3U3SJw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.16.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.16.10.tgz",
+      "integrity": "sha512-C4PfnrBMcuAcOurQzpF1tTtZz94IXO5JmICJJ3NFJRHbXXsQUg9RFG45KvydKqtFfBaFLCHpduUkUfXwIvGnRg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.16.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.16.10.tgz",
+      "integrity": "sha512-bH/bpFwldyOKdi9HSLCLhhKeVgRYr9KblchwXgY2NeUHBB/BzTUHtUSBgGBmpydB1/4E37m+ggXXfSrnD7/E7g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
diff --git a/frontend/package.json b/frontend/package.json
index f330736..7ca92dd 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,6 +22,7 @@
     "@vitejs/plugin-react": "^3.0.0",
     "autoprefixer": "^10.4.13",
     "cross-env": "^7.0.3",
+    "esbuild": "^0.16.10",
     "postcss": "^8.4.20",
     "tailwindcss": "^3.2.4",
     "typescript": "^4.9.4",
このスクラップは2022/12/23にクローズされました