Vite Markdown Rendering Issue in Production on Netlify, Works Locally

Support
, ,
1

Hello all,

I’ve been encountering an issue with my site, where markdown files that render perfectly during local development are failing to show up in production on Netlify. Instead of rendering the content, I see what looks like HTML being output as plain text. I’ve tried several approaches to fix the issue, but nothing has worked so far.

Project Setup

Link to project branch: [WIP] Website Migration by jamesmwu · Pull Request #463 · uclaacm/hack.uclaacm.com · GitHub

Link to project deploy: https://deploy-preview-463--acm-hack.netlify.app/blog

  • Tech Stack:
    • Vite
    • React
    • react-markdown for rendering markdown
    • Deployment to Netlify
  • Site: A blog section where the posts are written in markdown and served dynamically.
  • Node Version: I recently upgraded to 20.17.0 as there were issues with using Node v16, and I resolved the node versioning problems, but the main issue persists.

Problem

Locally, running vite build and then serving with vite preview works as expected, and all markdown content is rendered properly in the blog posts. However, once deployed to Netlify, the markdown is replaced with what looks like HTML being displayed as raw text. You can see this if you click any of the blog posts in the link to the project deploy above.

Here’s what I’ve tried so far:

Things We’ve Tried

  1. File Paths & Vite’s import.meta.url
  • I moved the markdown files into the public/ folder to ensure Vite can serve them properly.
  • Updated blogs.js to use the following format:

js

Copy code

markdown: new URL('/blogPosts/fall2023/hey-future-interns/index.md', import.meta.url).href,
  • This was done to ensure proper referencing of static assets. But the issue persisted after multiple builds.
  1. Clearing Netlify Cache & Redeploying
  • I cleared the Netlify build cache several times and redeployed. This didn’t resolve the issue.
  1. Adjusted Build Command & Node Version
  • I set the correct build.command in netlify.toml to vite build.
  • Updated the Node.js version in Netlify settings to 20.17.0, ensuring the proper environment was used during the build process. The node version problem was resolved, but the markdown issue persists.
  1. Netlify Logs (No Errors)
  • The Netlify build logs show a successful build with no errors, and the static assets are deployed correctly. There are no 404s or issues with file fetching that I can see. However, the markdown content still doesn’t display as expected.
  1. Production URL Issue
  • The blog posts show raw HTML code in the browser rather than parsed markdown. Locally, everything works fine with both npm run build and npm run preview. In fact, even if I do netlify build and netlify serve, the deploy looks fine locally.
  1. No Network Errors
  • I’ve also checked the network tab in DevTools for the production site, and there are no issues with fetching the markdown files.

Build Environment

  • Vite Version: 5.4.8
  • Netlify Build Command: vite build
  • Publish Directory: dist/

What I’m Looking For

I’ve gone through the Netlify docs and several community posts, but I can’t seem to find anything that resolves this issue. Has anyone experienced a similar problem with markdown rendering via Vite on Netlify? Are there any other configuration changes I should try?

Would appreciate any advice or insights into what might be going wrong or further debugging steps.

Thank you!

2

@jamesmwu The html that you’re seeing is just the contents of your index.html file.

This will be because the .md files don’t exist where the site tries to load them from at runtime.
Instead of receiving a 404, since your site is a Single Page Application (SPA) you likely have the redirect in place that rewrites what would otherwise be those 404’s to the index.html.

This is easily confirmed by doing a ‘view source’ on your root page:
https://deploy-preview-463–acm-hack.netlify.app

image
image1746×616 159 KB

Then a ‘view source’ on one of the .md files that it tries to load:
https://deploy-preview-463–acm-hack.netlify.app/blogPosts/fall2023/hey-future-interns/index.md

image
image1743×618 172 KB

The existence of the rewrite can also be confirmed by visiting a known non-existent url like:
https://deploy-preview-463–acm-hack.netlify.app/this/url/does/not/exist

image
image1751×620 168 KB

You can use the ‘Deploy File Browser’ to check where, (if at all), the files have ended up:
https://answers.netlify.com/t/new-feature-browse-files-in-your-deploy-with-the-deploy-file-browser/105196

The fix will be to ensure the files are available where they’re requested from.

3

Hi Nathan, thanks for the quick response!

What confuses me, is when I run npm run build or even netlify build, the generated dist folder looks like the following:

- dist
 | assets /
 | blogPosts /
   | <... all my blog post markdown files here>
 | _headers
 | index.html
 | vite.svg

The blogPosts folder above has all the information I expect to see, with the markdown files and such. Because of this, I’d assume that everything configuration-wise should be alright-- but checking the Deploy File Browser as you suggested, it seems that the blogPosts are still not being generated.

image
image1386×220 10.5 KB

Are you aware of some configuration issue in the Netlify console that I might be overlooking? I don’t understand why it the preview would correctly show the expected result and recognize the markdown blogPosts when doing netlify build, but fail to generate when actually pushed.

4

@jamesmwu Are you sure your files are actually committed to the repository?

Checking the branch here:
https://github.com/uclaacm/hack.uclaacm.com/tree/migration-v2

I don’t see the files you’re describing:

image
image1229×1130 251 KB

Your .gitignore also explicitly ignores the public/ folder:

I do see the ‘catch all’ rewrites though:

5

Thank you for the catch!!!

I didn’t realize the public folder had to be committed (embarrassing mistake…)

Appreciate the help Nathan, I’ve spent like 4 hours trying to figure this thing out. Hope all is well the rest of your day.

6

@jamesmwu It’s no problem at all.

Best of luck with the rest of your project.