はじめに
フロントエンドエンジニアをやっておりますbakupenです。
開発は主にVue2を使っていたのですが、最近のプロジェクトでは初めてVue3を使いました。
Vue3ではせっかくなのでViteを導入してみました。
vue-cliに比べて動作がかなり早いですね。もうvue-cliには戻れません、、
て感じで快適に開発していたのですが、そろそろホスティングしてみっか〜と思ってbuildコマンドを打ってみたところエラーが出てめちゃめちゃハマったので共有したいと思います。
解決もできたのでよければ参考にしてください。
バージョンなど
- node: v16.15.0
- npm: 8.7.0
- vue: 3.2.25
- vite: 2.9.9
- vuetify: 3.0.0-beta.0
- cssライブラリです。なかなかBetaから動きがない。
- aws-amplify: 4.3.31
- aws cliをjsからいい感じに叩けるライブラリです。
- 詳しい使い方などは、手前味噌ですがこちらを参照ください。
buildしたらエラーになった！
開発の動作確認でnpm run serveを実行し、全く問題なく動いていたのですが、
ビルドコマンドnpm run buildを叩くとこんなメッセージが表示されました。
$ npm run build
vite-project@0.0.0 build
> vite build
vite v3.0.9 building for production...
✓ 23 modules transformed.
Unexpected token (Note that you need plugins to import files that are not JavaScript)
file: /Users/***/vite-project/node_modules/vuetify/lib/composables/theme.mjs:244:4
242: themeClasses,
243: styles,
244: global: {
^
245: name,
246: current
error during build:
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
at error (file:///Users/***/vite-project/node_modules/rollup/dist/es/shared/rollup.js:1858:30)
at Module.error (file:///Users/***/vite-project/node_modules/rollup/dist/es/shared/rollup.js:12412:16)
at Module.tryParse (file:///Users/***/vite-project/node_modules/rollup/dist/es/shared/rollup.js:12789:25)
at Module.setSource (file:///Users/***/vite-project/node_modules/rollup/dist/es/shared/rollup.js:12694:24)
at ModuleLoader.addModuleSource (file:///Users/***/vite-project/node_modules/rollup/dist/es/shared/rollup.js:22136:20)
解決策
vite.config.js内で書いてるグローバル変数の書き方を変える
vite.config.js
export default defineConfig({
plugins: ...,
server: ...,
define: {
global: {},
},
});
↓
vite.config.js
export default defineConfig({
plugins: ...,
server: ...,
define: {
"window.global": {},
},
});
AmplifyとVite(のbuildで動くesbuild)の相性に問題があるです。
参考になったのはこちらのissueとこちらのissue。
なんか違うエラーが出た！
上記の対応をして再度buildしたところ今度はこちらのエラーになりました。
$ npm run build
> postfor-frontend-vue3@0.0.0 build
> vite build
vite v2.9.14 building for production...
transforming (363) node_modules/vuetify/lib/components/VImg/VImg.css[@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead.
✓ 2242 modules transformed.
'request' is not exported by __vite-browser-external, imported by node_modules/@aws-sdk/credential-provider-imds/dist/es/remoteProvider/httpRequest.js
file: /Users/***/vite-project/node_modules/@aws-sdk/credential-provider-imds/dist/es/remoteProvider/httpRequest.js:4:9
2: import { ProviderError } from "@aws-sdk/property-provider";
3: import { Buffer } from "buffer";
4: import { request } from "http";
^
5: /**
6: * @internal
error during build:
Error: 'request' is not exported by __vite-browser-external, imported by node_modules/@aws-sdk/credential-provider-imds/dist/es/remoteProvider/httpRequest.js
at error (/Users/***/vite-project/node_modules/rollup/dist/shared/rollup.js:198:30)
at Module.error (/Users/***/vite-project/node_modules/rollup/dist/shared/rollup.js:12543:16)
at Module.traceVariable (/Users/***/vite-project/node_modules/rollup/dist/shared/rollup.js:12902:29)
at ModuleScope.findVariable (/Users/***/vite-project/node_modules/rollup/dist/shared/rollup.js:11554:39)
at FunctionScope.findVariable (/Users/***/vite-project/node_modules/rollup/dist/shared/rollup.js:6486:38)
at ChildScope.findVariable (/Users/***/vite-project/node_modules/rollup/dist/shared/rollup.js:6486:38)
at FunctionScope.findVariable (/Users/***/vite-project/node_modules/rollup/dist/shared/rollup.js:6486:38)
at ChildScope.findVariable (/Users/***/vite-project/node_modules/rollup/dist/shared/rollup.js:6486:38)
at Identifier.bind (/Users/***/vite-project/node_modules/rollup/dist/shared/rollup.js:7553:40)
解決策
vite.config.js内に以下の記述を追加
vite.config.js
export default defineConfig({
resolve: {
alias: {
"./runtimeConfig": "./runtimeConfig.browser",
},
},
まとめ
今回わかったことは、AWS AmplifyとViteの相性が悪そうだということでした。
Amplifyはissueでバグ直して〜と言われても対応してくれない印象があります…とても便利なので使わないわけにはいかないんですが。
あとで調べたところ、似たような対応がAmplifyUIのドキュメントに書いてありました。
When working with a Vite project you must make a few modifications. Please follow the steps below.
UIは使っていないので読んでなかったですね…。