SupabaseのQuickstart: Vue 3の `npm init @vitejs/app` でエラーになる問題の解決方法

240
SupabaseのQuickstart: Vue 3の `npm init @vitejs/app` でエラーになる問題の解決方法
目次

はじめに

postgresベースの BaaS、 Supabase を試していようということで、
Vue3のQuickstartをやってみましたがviteを使ってプロジェクトテンプレートを
作成するところでエラーになったので、解決方法を記録しておきます。

問題箇所とエラー内容

Quickstart: Vue 3の問題のある箇所

Building the App​ > Initialize a Vue 3 app​

エラーになったコマンド(npm 6.x or 7.x)

# npm 6.x 
npm init @vitejs/app supabase-vue-3 --template vue 

# npm 7+, extra double-dash is needed: 
npm init @vitejs/app supabase-vue-3 -- --template vue

発生したエラー

@vitejs/create-app is deprecated, use npm init vite instead

internal/modules/cjs/loader.js:1102
      throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
      ^

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/{username}/.npm/_npx/96769/lib/node_modules/@vitejs/create-app/node_modules/create-vite/index.js
require() of ES modules is not supported.
require() of /Users/{username}/.npm/_npx/96769/lib/node_modules/@vitejs/create-app/node_modules/create-vite/index.js from /Users/{username}/.npm/_npx/96769/lib/node_modules/@vitejs/create-app/index.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename /Users/{username}/.npm/_npx/96769/lib/node_modules/@vitejs/create-app/node_modules/create-vite/index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/{username}/.npm/_npx/96769/lib/node_modules/@vitejs/create-app/node_modules/create-vite/package.json.

    at new NodeError (internal/errors.js:322:7)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1102:13)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:101:18)
    at Object.<anonymous> (/Users/{username}/.npm/_npx/96769/lib/node_modules/@vitejs/create-app/index.js:43:1)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32) {
  code: 'ERR_REQUIRE_ESM'
}

原因

ログにこのように記載されていました。
@vitejs/create-app is deprecated, use npm init vite instead

DeePL訳としては、
vitejs/create-app は非推奨です、代わりに npm init vite を使ってください。

ただ、念の為、vitejsの公式サイトを見ると、コマンドが異なっていました。次の解決方法として記載します。

解決方法

vitejsの公式サイトにある通り、
npm init ではなく npm create にすることで無事成功しました。

# npm 6.x
npm create @vitejs/app supabase-vue-3 --template vue

# npm 7+, extra double-dash is needed:
npm create @vitejs/app supabase-vue-3 -- --template vue