Nuxt•3mo ago

npm run build result is not running as expected

Hi all. I am having an issue with my nuxt prod build. I have a /server route so that warrants an npm run build instead of npm run generate. However, when I preview the site, 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." for every .js file loaded in my site. I have not so far found any solution to fix any of this. Also, when I visit the site, I can see that no fonts are being loaded or images or even the javascript for the site is not running. If I open any of the JS files for the site, it instead has JSON in it, something like {"data":{"type":"Buffer","data":[105,109,112,111,114,116,123,112,125,102 instead of actual Javascript (i think it should be mjs). If anyone is willing to help, kindly tell me why this is happening, or how exactly I should configure my nuxt app for production if I have the /server folder. Also I am deploying to a standard Docker container exposed via NGINX. I have attached a video to show what I mean

2 Replies

kapa.ai•3mo ago

Hi @OffWhiteOrBlack. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It sounds like your production server is serving your built client assets (the .js files under .output/public/_nuxt/...) with the wrong response — you’re getting JSON (a Node Buffer serialized to JSON) instead of JavaScript, which then triggers the “Strict MIME type checking” error in the browser. In a Nuxt 3/4 build with server routes, you should: - Build with nuxt build. This produces a Node server entrypoint and a public folder under .output. [nuxt build; Deployment] - Run the server with node .output/server/index.mjs (or nuxt preview to test locally) so Nitro can correctly serve dynamic routes and static assets from .output/public with proper headers. [Deployment; nuxt preview] What likely went wrong - If you put NGINX directly in front of the .output/public files and proxy only some requests to Node, you might be rewriting or mishandling asset requests so they hit your Node API and return JSON (Buffer) instead of the actual static files. The Buffer-looking JSON suggests a handler is returning the file contents as JSON rather than letting Nitro/static serve it as a file. - If you deployed using generate/prerender by mistake, you’d miss the server, but you said you used build. Note that generate/prerender removes server endpoints from the output, so for server routes you must use nuxt build. [Universal rendering; nuxt build] How to validate locally - Run a clean build, then preview: - npx nuxt build - npx nuxt preview - Open http://localhost:3000 and confirm assets load with Content-Type: application/javascript and actual JS content. [nuxt preview] Recommended deployment pattern (Docker + NGINX) - Container runs the Nitro Node server: - node .output/server/index.mjs - Ensure HOST and PORT are set (HOST=0.0.0.0; PORT or NITRO_PORT) as needed. [Deployment] - NGINX acts as a reverse proxy to the Node server. Do not have NGINX serve .output/public directly unless you carefully mirror Nitro’s asset paths and headers; simplest is to proxy all requests to the Node server and optionally add caching for /_nuxt/ assets. - If you do serve static files via NGINX, make sure: - The root points to .output/public. - You do not proxy those asset paths to the Node server. - Correct MIME types are used (application/javascript for .js, text/css for .css, fonts/images as appropriate). Dockerfile example (two-stage) that aligns with Nuxt docs

# Build stage
FROM node:22-alpine AS build
WORKDIR /app

# Enable corepack to use pnpm/yarn if needed
RUN corepack enable

# Copy manifests and install
COPY package.json pnpm-lock.yaml .npmrc ./
RUN pnpm i

# Copy source and build
COPY . ./
RUN pnpm run build

# Runtime stage
FROM node:22-alpine
WORKDIR /app

# Only copy the build output
COPY --from=build /app/.output/ ./

ENV HOST=0.0.0.0
ENV PORT=3000
EXPOSE 3000

CMD ["node", "/app/server/index.mjs"]

# Build stage
FROM node:22-alpine AS build
WORKDIR /app

# Enable corepack to use pnpm/yarn if needed
RUN corepack enable

# Copy manifests and install
COPY package.json pnpm-lock.yaml .npmrc ./
RUN pnpm i

# Copy source and build
COPY . ./
RUN pnpm run build

# Runtime stage
FROM node:22-alpine
WORKDIR /app

# Only copy the build output
COPY --from=build /app/.output/ ./

ENV HOST=0.0.0.0
ENV PORT=3000
EXPOSE 3000

CMD ["node", "/app/server/index.mjs"]

This is consistent with Nuxt’s deployment guidance for Node preset and content’s Docker example. [Deployment; Content Docker; Content Server preset] Key checks - Ensure you did not run nuxt build --prerender (static) because that excludes the server. [nuxt build; Universal rendering] - Ensure your NGINX config doesn’t convert binary/JS responses into JSON (e.g., proxying to an endpoint that returns a Buffer serialized as JSON). Assets should be served as files, not via an API response. - If using Docker Compose, avoid volume-mounting the project over the runtime container in a way that overwrites .output. This is a common cause of “Cannot find module .output/server/index.mjs” and broken assets. [How to run Nuxt3 with docker] If you share your NGINX config, you can verify the static location and proxy_pass rules. But from the symptoms, the fix is to let the Nitro server serve assets (via reverse proxy) or correctly map NGINX to .output/public without routing them through server handlers. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@1406829011761500240> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

npm run build result is not running as expected

Did you find this page helpful?