Loader returning object with whole html string in deployment

[Alixchau]

Hi, I'm deploying my remix app and the loader function's response is returning whole html string with data injected inside, which in development I will get json object and render properly.

In my video_.$url.jsx file, it renders individual video page in the website.
During deployment, the loader function returns only "video" object, and it contains of string of whole html from Doctype till end of html tag. And inside of the html, the loader's data has already been injected in.
So the loader actually gives me the html to be rendered but because the video_.$url.jsx file is expecting video's json object instead, it becomes undefinded and therefore can not be rendered properly.

In developement, it returns json object of video, videoId, videoUrl and videoDesc as below

{
  "video": { xx},
  "videoId": 32,
  "videoUrl": "https://www.youtube.com/embed/abc",
  "videoDesc": "xx"
}

Here is my loader function

import { json, fetch } from "@remix-run/node";

export async function loader({ params }) {
	let response;
	try {
		response = await fetch(url + `/video/${params.url}`);

		const video = await response.json();

		const videoId = video?.id;
		const videoUrl = video?.url;
		const videoDesc = video?.desc;
		return json({ video, videoId, videoUrl, videoDesc });
	} catch (err) {
		if (err?.response && err?.response?.status == 404) {
			throw new Response("Not Found Response", {
				status: 404,
				statusText: "We couldn't find that page.",
			});
		}
	}
}

And in the default function catch the data using useLoaderData()

const { video, videoId, videoUrl, videoDesc } = useLoaderData();

Is there anything I need to look into for this problem? Appreciate your assistance in advance!

[Marcdj-02]

Is this all in a single file? Or are you fetching data from another route?

The fetch that you do in the loader to what route does that go, is that internal or external?

If it is internal does that same page have a export default beneath it? This causes it to server-side render that page and return that instead of only returning the loaderData. Consider using a route without an export default.

[b-goldney]

Were you ever able to solve this? I'm facing the same issue. Loader works in dev, but in deployment (lambda function) it's returning HTML.

[Tjerk-Haaye-Henricus]

Did anyone of you solved this ? Facing the same issue in a setup with bun

[b-goldney]

Check out this blog: this solved it for me.

[Alixchau]

I solved the issue by updating the node version

[AndreSilva1993]

Check out this blog: this solved it for me.

This was exactly what happened to me, had a Cloudfront distribution which didn't consider query parameters as part of its cache keys.