Uncaught SyntaxError: Unexpected token '<'のエラー解決方法について

Question

Nuxt.jsで個人的にアプリの開発をしております。

発生している問題・エラーメッセージ

npm run generateで生成されたdist以下のファイルをAWS S3にアップロードしS3サーバーでHTMLファイルの動作確認をしたところ以下のようなエラーが出ました。

Uncaught SyntaxError: Unexpected token '<'
Failed to load resource: the server responded with a status of 403 (Forbidden)

当初はjsファイルが絶対パスになっており404ステータスメッセージが発生していたのでnuxt,config.jsに以下の設定を加えました。

router: {
    base: "/app/"
  },

こちらの設定を加えたことにより404ステータスコードは出なくはなったのですが、その代わりにSyntaxエラーが出るようになってしまいました。

jsファイルでそのような現象が起きてるようなのですが、なぜそのようになるか分からず、解決できそうな記事も見当たらず苦戦しております。

同じような現象に陥った方、また解決方法をご存知の方がいらっしゃいましたらご教授いただけると幸いです。

Answer 1

修正後npm run build等をされていて、distをサーバーに反映している状態であれば、ブラウザのキャッシュが変に効いてしまって起こることがございます。
スーパーリロードしていただくと直ることがございます。

Comments

[F_Yohei]

コメントいただきありがとうございます。
スーパーリロードしもう一度npm run generateして、S3にアップロードし直して実行してみたのですが、エラーは解決できませんでした。

[m2l]

スーパーリロードの方はキャッシュをクリアして再読み込みするので工程の最後に行ってみていただけますと幸いでございます。

[F_Yohei]

S3にアップロードしてからスーパーリロードするということでしょうか？

[F_Yohei]

アップロードしてからスーパーリロードを行ってみたのですが、状況変わらずでした????‍♂️

[m2l]

そうなんですね。。
S3の他にCDNとしてcloudfrontをお使いですか？
もしそれであれば下記のような形でキャッシュを無効化してみるのも良いかもしれません。
ドキュメントも載せておきましたのでご確認頂けますと幸いでございます。
aws cloudfront create-invalidation --distribution-id クラウドフロントのID --paths "/*"

ドキュメント
https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/Invalidation.html

[F_Yohei]

見てみます。
ご丁寧にありがとうございます????