npm run build not working as expected (and described)

[bikathi]

Preface

I have been working on a certain Nuxt App for a year. For a long time, the app did not have a /server part so npm run generate was what I used for building it and it never failed me.

However, I came across a feature that required me to add the /server route to the app. This merits a change to use npm run build.

The Issue

1. While the app builds correctly, when I preview it with npm run preview I am not able to properly load the pages. I mean they do open but none of the public assets are loading meaning where images are supposed to be there is just a blank placeholder there.
2. Upon looking at the network tab, I see no API calls being made at all e.g. when I click login. I have APIs from external servers that were being called fine with npm run generate but after npm run build, none of them are working.
3. In the console, I keep getting the error Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of "application/json". Strict MIME type checking is enforced for module scripts per HTML spec.Understand this error CLi9hGpr.js:1 I believe this means that some scripts are not loading properly or at all, which is nuking the functionality of my website.
4. Also in the console, I get the warning The resource http://127.0.0.1:3100/_nuxt/builds/meta/d38f3228-0f27-476b-bba7-449ef79750ad.json was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally. which I'm sure has something to do with the build process.

My Expectation

1. I expect the app to run properly after running npm run build in the browser with API calls to both the /server route and external servers working without any issue.
2. I expect all my assets to be loaded and page navigation to be as flawless as it is in development mode.

My nuxt.config.ts file

Before running npm run build, I ensured to set ssr: true in my Nuxt config file no other build-related config has been changed. I have also double checked that the URL of files in my public assets is correct but I still can't access the files in my browser.

I am using Nuxt3 so if anyone has any recommendation for how I should go about this, i'd really appreciate.

[github-actions]

Would you be able to provide a minimal reproduction? 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritize it based on its severity and how many people we think it might affect.

If needs reproduction labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

Please use a template below to create a minimal reproduction

A public GitHub repository is also perfect. 👌

Please ensure that the reproduction is as minimal as possible. See more details in our guide.

You might also find these other articles interesting and/or helpful:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[bikathi]

Unfortunately i am not able to accurately recreate a mini version of the app as it is rn as it is NDAd to the org i work for. But a pointer on how i should properly configure the build process would really be helpful. I usually deploy the whole thing in a Docker container btw

[sewalsh]

I usually deploy the whole thing in a Docker container btw

That's your problem. You're going from serving a static site to a SSR site. Change your NGINX / reverse proxy config.

To be honest, you're not going to find a solution to your problem here unless you create a reproduction. This sounds like an infrastructure problem.

[OrbisK]

I usually deploy the whole thing in a Docker container btw

I dont have any problems with nuxt 3 generate + docker + reverse proxy (traefik). Maybe you can try to deploy vitesse-nuxt: https://github.com/antfu/vitesse-nuxt/tree/83dae853fe601375d43db3095dbbdbaaaef61ba1 (commit before nuxt4). Then check if you are facing the same problems.

[danielroe]

this does sound like an infrastructure issue rather than something related to nuxt, and without a reproduction we can't investigate further.

you might try discussing with folk on the nuxt discord.