Malformed JavaScript file served to the browser from App Service

Question

Malformed JavaScript file served to the browser from App Service

Damian Głowala 0

I have deployed a Nuxt 3 web app using Azure App Service (on Linux). However, one of the JavaScript assets is malformed when served to the browser, which looks really odd:

User's image

I have excluded the possibility of file being corrupted after the build is completed, as when accessing the release's files via SSH in Kudu, the file looks correct (compared to the above):

User's image

I would really appreciate any hints as to what the cause might be, I am completely clueless at this point... Thank you!

ajkuma 28,136 Reputation points Microsoft Employee Moderator

2024-03-07T09:58:00.19+00:00

To better assist you on this, just to clarify, was this working fine before? or the issue is happening since the first deployment? Does it work locally fine?

To fetch more info on this, enable and review logs to fetch more details about the error:

Enable diagnostics logging for apps in Azure App Service and #access-log-files

Also, review the spelling:
Vite_mapDeps.viteFileDeps

Vite_mapDeps.viteFileDep

Kindly let us know, I'll follow-up with you.

Additionally, just to highlight, Using PM2 on App Service Linux

To run PM2 successfully inside the docker container in Azure App Service Linux, be sure to use the --no-daemon argument because PM2 needs to run in the foreground for the container to work properly. Alternative you can also use pm2-runtime, which is another option to run the aplication in the foreground designed for using with containers, e.g. pm2-runtime start index.js.

pm2 serve /home/site/wwwroot/dist --no-daemon --spa
Damian Głowala 0 Reputation points

2024-03-07T12:03:12.03+00:00

To better assist you on this, just to clarify, was this working fine before? or the issue is happening since the first deployment? Does it work locally fine?

This is happening since the first deployment. It works fine locally when building for production and previewing the app.

Also, review the spelling: Vite_mapDeps.viteFileDeps Vite_mapDeps.viteFileDep

When I inspect the contents of this particular JavaScript file directly in App Service's file system through SSH, it is completely fine and the syntax isn't malformed. However, it is malformed when inspected in the browser. Something cuts the ending of the file during transfer to the client. I am really running out of ideas what this might be...

Additionally, just to highlight, Using PM2 on App Service Linux

Thank you for mentioning about PM2 - I have integrated it into the App Service!
Damian Głowala 0 Reputation points

2024-03-08T13:09:32.4933333+00:00

UPDATE:

I can confirm the deployment works fine when done from VS Code Azure extension. It's the AzureWebApp@1 task within Azure DevOps which most likely impacts the final result. What should I check in CI/CD? Is it the right task for the job?
ajkuma 28,136 Reputation points Microsoft Employee Moderator

2024-03-09T14:57:12.12+00:00

Thanks for the follow-up and additional info. Glad to know that the deployment works fine from VS code.

WEBSITE_WEBDEPLOY_USE_SCM' set in Application settings to True: Environment variables and app settings in Azure App Service and then check.

Azure Web App service deployments related issues and Debug logs and tips for further debugging to fetch more info.

I'll follow-up privately to fetch more info.

Your answer

ajkuma 28,136 Reputation points Microsoft Employee Moderator

2024-03-07T09:58:00.19+00:00

To better assist you on this, just to clarify, was this working fine before? or the issue is happening since the first deployment? Does it work locally fine?

To fetch more info on this, enable and review logs to fetch more details about the error:

Enable diagnostics logging for apps in Azure App Service and #access-log-files

Also, review the spelling:
Vite_mapDeps.viteFileDeps

Vite_mapDeps.viteFileDep

Kindly let us know, I'll follow-up with you.

Additionally, just to highlight, Using PM2 on App Service Linux

To run PM2 successfully inside the docker container in Azure App Service Linux, be sure to use the --no-daemon argument because PM2 needs to run in the foreground for the container to work properly. Alternative you can also use pm2-runtime, which is another option to run the aplication in the foreground designed for using with containers, e.g. pm2-runtime start index.js.

pm2 serve /home/site/wwwroot/dist --no-daemon --spa
Damian Głowala 0 Reputation points

2024-03-07T12:03:12.03+00:00

To better assist you on this, just to clarify, was this working fine before? or the issue is happening since the first deployment? Does it work locally fine?

This is happening since the first deployment. It works fine locally when building for production and previewing the app.

Also, review the spelling: Vite_mapDeps.viteFileDeps Vite_mapDeps.viteFileDep

When I inspect the contents of this particular JavaScript file directly in App Service's file system through SSH, it is completely fine and the syntax isn't malformed. However, it is malformed when inspected in the browser. Something cuts the ending of the file during transfer to the client. I am really running out of ideas what this might be...

Additionally, just to highlight, Using PM2 on App Service Linux

Thank you for mentioning about PM2 - I have integrated it into the App Service!
Damian Głowala 0 Reputation points

2024-03-08T13:09:32.4933333+00:00

UPDATE:

I can confirm the deployment works fine when done from VS Code Azure extension. It's the AzureWebApp@1 task within Azure DevOps which most likely impacts the final result. What should I check in CI/CD? Is it the right task for the job?
ajkuma 28,136 Reputation points Microsoft Employee Moderator

2024-03-09T14:57:12.12+00:00

Thanks for the follow-up and additional info. Glad to know that the deployment works fine from VS code.

WEBSITE_WEBDEPLOY_USE_SCM' set in Application settings to True: Environment variables and app settings in Azure App Service and then check.

Azure Web App service deployments related issues and Debug logs and tips for further debugging to fetch more info.

I'll follow-up privately to fetch more info.

Share via

Malformed JavaScript file served to the browser from App Service

Your answer