VueJS 3: How to inject JS script into index.html with "Type" as "text/javascript"

Question

I currently build and deploy my VueJS webapp (created via vue3 cli) in a http2 service in aws ec2.

Before deploying, I run npm run build which is package.json as "build": vue-cli-service build

Most of the times, the deployment to aws ec2 is good and webpage loads fine in public internet.

Sometimes, I have following error

Warning: The script from "https:/websitedomain.com/js/chunk-vendors.sdadd234.js" was loaded even though its MIME type ("text/html") is not a valid Javascript MIME type.

Error: Uncaught SyntaxError: expected expression, got '<'

Result

The webpage is blank white page with no data.

Some investigation

Found that Vue injects js and css files into my public/index.html" and when i see "View page source" on blank page, it has code like <script src="/js/chunk-vendors.sdadd234.js">

I am thinking if I can find a way to add "text/javascript" then the page would load just fine.

Has anyone faced this error before? How to solve this problem?

Answer 1

For others that end up in this situation

I did not see this problem any more. Only thing I changed is how the build and deployment stages are in my website development.

Previously

1. Code changes
2. npm run serve - to verify everything looks good in local
3. npm run build and git commit . - This steps is to generate those build files(compressed js, css..) in dist
4. After git push, my settings in AWS pipelines take care of updating files in dist directory to all my EC2 hosts service the website.

** New process **

1. Code changes
2. npm run serve - to verify everything looks good in local
3. git commit . - No build phase
4. git push
5. Now i have update my AWS pipelines to have 3 step process (Code, build and deploy to EC2 hosts)