AWS Amplify で Vite 3.0 の Vue テンプレートを amplify publish するときに ES 関連の An error occurred during the push operation が起きるときの対応メモ

AWS Amplify で Vite 3.0 の Vue テンプレートを amplify publish するときに ES 関連の An error occurred during the push operation が起きるときの対応メモです。

2022/8 ごろの情報です

今回のナレッジは 2022/8 ごろの情報です。

今後、各ドキュメントに手順が反映されたり、何かしら改善されることで、必要のない対応になる可能性があります。

エラーが起きるまでの Vite + Vue 構築手順

5 ~ 6 月ごろは問題なく動いた手順をなぞって行いました。

Cloud9 で作業をはじめて、

npm -v
8.11.0

node -v
v16.16.0

といったバージョン。以下、ざっとこんな環境でつくりました。

  • Vite + Vue 作成
    • npm create vite@latest my-vue-app -- --template vue でプロジェクト作成
    • cd my-vue-app でフォルダ移動
    • npm i で関連ライブラリインストール
    • npm run dev で一旦プレビューをみる → OK
  • amplify init コマンドでプロジェクトの初期設定
  • Vite + Vue での設定調整
  • Troubleshooting | Amplify UI for Vue を元に、Vue 調整
    • src/index.html の <body> タグあたりで window.global = window; に関係する設定を書き加える。
    • vite.config.ts に resolve 関係の設定を書き加える。

API の準備と push → すでにここでエラー

  • amplify add api で API を加える(GraphQL でも REST でもどっちでもOK)
  • amplify push で反映する

と、対応すると、

An error occurred during the push operation: /
Must use import to load ES Module: /home/ec2-user/environment/my-vue-app/src/aws-exports.js
require() of ES modules is not supported.
require() of /home/ec2-user/environment/my-vue-app/src/aws-exports.js from /snapshot/repo/build/node_modules/amplify-frontend-javascript/lib/frontend-config-creator.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 aws-exports.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/ec2-user/environment/my-vue-app/package.json.

バックエンドは構築できたものの、An error occurred during the push operation エラーが起きます。

Hosting の準備と publish → おなじエラーでフロントエンドが反映できない

  • amplify add hosting でHosting の準備
    • Select the plugin module to execute
      • Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
    • Choose a type
      • Manual deployment
  • amplify publish でフロントエンドを反映

の手順を行うと、以前はうまくいっていた対応のはずが、やはり、同じ An error occurred during the push operation となって、バックエンド処理とは違って一切フロントエンドが反映されません。

以前は、ドキュメント通り対応すると、すんなり通っただけに戸惑いました。

エラーメッセージを読んで、素直にやってみるとうまく治らない

さきほどのエラーメッセージに具体的な対応が書いてありました。

Instead rename aws-exports.js to end in .cjs, change the requiring code to use import(), or remove “type”: “module” from /home/ec2-user/environment/my-vue-app/package.json.

どうやら、

  • src/aws-exports.js を aws-exports.cjs にファイル名変更して、src/main.js の中の aws-exports.js の呼び出しを aws-exports.cjs に変更する
  • package.json から “type”: “module” を削除する

が提案されています。

aws-exports.cjsのやりかたは一時的に直せるもののバックエンドを変更すると、また aws-exports.js が上書きされて戻ってしまいました。
場合によっては、センシティブな aws-exports.js の付近に似たファイルを置いているせいか、別のエラーが起きました。 “type”: “module” の影響なのか、ファイル内の JavaScript の記述が現状の Vue に合わなかったりで、良いやり方ではなさそうでした。

package.json から “type”: “module” を削除するやりかたは、いきなり Vue のビルドエラーが発動するので AWS Amplify では適切なアプローチだけど、いまの Vite + Vue に合わない感じでした。

結構詰んでる。

Vite の以前のバージョン(2.9.3)の Vue テンプレートを使って解決

いろいろ試行錯誤して原因を追っていくうちに、Vite の Vue テンプレートで package.json の “type”: “module” が登場したのは 3.0 以降のようで、それが先月 7 月ごろの出来事なので、私が Vite + Vue で5 ~ 6 月ごろうまくいっていたタイミングから、うまくいかなくなった 8 月現在なので符合しすることが見えてきました。

なるほど、結構大きな更新ですね!

ちなみに、 npm create vite@latest my-vue-app -- --template vue で呼び出されたものはバージョン 3.0.1 の Vue テンプレートを使っていました。 → vite/package.json at 301442bfef8343c0a937aafd16a4e84c2a4d5e06 · vitejs/vite

{
  "name": "vite-vue-starter",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.0.2",
    "vite": "^3.0.6"
  }
}

これだと “type”: “module” が入っています。

ですので、npm create vite@latest my-vue-app -- --template vue で読み込まれたあとに、3.0 以前の一番最近のバージョンの package.json から上書きしてみたところ、An error occurred during the push operation エラーでることなく、以前のようにすんなり amplify publish が通るようになりました。

具体的には package.json に type : module のない最近のもので 2.9.3 のものをコピーアンドペーストして使いました。 → vite/package.json at 1db7c4939a4c589854bb7a3a85002a8f3c42a50c · vitejs/vite

{
  "name": "vite-vue-starter",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.1",
    "vite": "^2.9.7"
  }
}

日付が 3 May (5/3) なので、まさにうまくいっていた時期の package.json の内容だったので、予想がうまく当たった感じです!

Vite 側は今後を見据えて “type”: “module” を導入したけれど、AWS Amplify 側で “type”: “module” によって、おそらく ES モジュールまわりが Vue とうまく合わない形で処理が動いてしまってエラーが出たようですね。

amplify-cli のバージョンを 5 月ごろのものに戻してみても “type”: “module” がある限り同じエラーがおきてしまったり、vite@latest での Vue テンプレートへのバージョン指定みたいなアプローチはうまくいかなかったり、はたまた、CommonJS で調整してもうまくいかなかったり、めちゃくちゃ色々試しましたが、とりあえず、状況が見えて対応できてよかったです。

おそらく、AWS Amplify 側が何か気づいて対応したり、”type”: “module” って強い設定だと思うので Vite 側で何かした追加の調整項目ができたり、いろいろやってくれそうですが、現状はひとまず、これですすめてみます。