Vue.js デプロイ時にエラーが出た。
Vue.jsで作ったアプリをHerokuにデプロイした時にエラーが出たので、ログ残しも兼ねて記事を書きます。
経緯
以下のエラーがデプロイ時に出た。
Build failed We're sorry this build is failing! You can troubleshoot common issues here: https://devcenter.heroku.com/articles/troubleshooting-node-deploys Some possible problems: - Node version not specified in package.json #上記の部分でエラーが出た。 https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
意味としてはpackage.jsonにnodeのバージョンを記載していないということである。
そのためpackage.jsonに以下の文を追記
"engines": { "node": "16.x", "npm": "8.x" },
記載した後にデプロイしたが、別のエラーが出た。
Please update to v0.35.0 or higher for TypeScript version: 4.7.4 src/pages/PlayPage.vue(13,3): error TS1184: Modifiers cannot appear here. Build failed We're sorry this build is failing! You can troubleshoot common issues here: https://devcenter.heroku.com/articles/troubleshooting-node-deploys If you're stuck, please submit a ticket so we can help: https://help.heroku.com/
色々調べた結果、今回は以下の部分が原因だと判明した。
Please update to v0.35.0 or higher for TypeScript version: 4.7.4 src/pages/PlayPage.vue(13,3): error TS1184: Modifiers cannot appear here.
その部分を確認したら、確かに以下の部分でエラーが出ていた。 src/pages/PlayPage.vue
export type PLAY_STATUS = typeof PLAY_STATUS[keyof typeof PLAY_STATUS];
原因としてはModifiers cannot appear here.と記載しているように
どうやらexportという修飾子はここでは使えないみたいなので
exportを消してみた。
その後、package-lock.jsonを更新するために 以下のコードを打った後に再度デプロイした。
npm run bulid
そのようにしたら、無事デプロイできた。
以上
参考
Heroku環境でReactアプリのビルドに失敗する(Node version not specified in package.json)原因はNodeのバージョン違いでした - Qiita
