Site renders differently on Netlify vs Local

[j-e]

As per title, I have a feature on my website that renders perfectly fine in my local development environment, but the same repo that is deployed to my Netlify site doesn’t render correctly at all.

In this case, I’m using Mapbox to render a map view, which as below has a broken overlay for the navigation/copyright section:

However, in my local development environment, this isn’t an issue at all:

I’m wondering what might be causing this or if anyone else has seen this before? It’s just rather odd that this is only the case on the Netlify-hosted site, so seems to be an issue with the build/deploy environment. I can’t see anything in the build/deploy logs that is of concern. I also can’t see any errors in the console when I load the page, or on the sveltekit-render Netlify function.

For reference, I’m using SvelteKit with the Netlify adapter.

[nathanmartin]

@j-e How does it render when you run your Build command locally, then host the output with npx serve?

[j-e]

@nathanmartin That just gives me the files to navigate through as expected (instead of the site itself).

[nathanmartin]

@j-e You need to serve whatever your output folder is.

If it’s build in this case, then you could use npx serve -s build.

[j-e]

@nathanmartin Same thing, but for the build folder.

Screenshot 2024-02-27 at 11.11.48|690x118

[nathanmartin]

If your project doesn’t actually produce a static site, but is leaning on some middleware, then my assistance will unfortunately be useless.

[j-e]

@nathanmartin I’m using SvelteKit, which uses Vite, not sure if you read that in the original post? I can use

vite preview

To run the production version locally.

[nathanmartin]

@j-e I did, but I can barely keep up with what does/doesn’t use middleware these days and there’s an abundance of issues on the forums caused by it all.

If you can produce static output, and host static output, then you should, and you should check that.

It’ll allow you to spot if it’s something about your own build process causing it.

[j-e]

^ Which yes does appear to have the same issue I see on Netlify.

[nathanmartin]

@j-e

^ Which yes does appear to have the same issue I see on Netlify.

Excellent, that’s all I was really trying to help you spot.

I can’t say exactly why it’s occuring for you, but it’s very common for people to encounter issues upon deployment to Netlify, but not realize that the actual issue is some difference between the output of their Build command and their Develop command.

The quicker you spot it’s in your codebase, the quicker you can self-solve, otherwise you can get stuck waiting for Netlify to respond.