Blank page after deployment of React site

I uploaded a project from my github repo today and it was successfully uploaded but after the site was created and i tried accessing the page it takes me to a blank white screen this is the link to the site
https://fcc-markdown-previewer.pages.dev/

It shows the test page for me, and looks like everything is fine.

It will be a blank white page unless Javascript is enabled and not blocked, so check for any browser extensions that may be getting in the way.

Actually I think it may be browser-specific. Your main Javascript file has a .tsx extension, which isn’t right, and it’s being served up with the wrong Content-Type. That should be bundled into a .js file. You probably just skipped a step in your project setup.

Yes, it shows just the test page but when i run it locally i get to see the whole content

Yes, but that’s because you’re loading it locally and the error is ignored as a result. I missed the error in my first reply for much the same reason.

Your HTML index file has this in it:

    <script type="module" src="/src/main.tsx"></script>

You can’t do that; you can’t load a Typescript file directly into the browser. That should have been transformed at build time and turned into a file with a .js extension. If the browser still tries to execute the file as Javascript, it will render a page with the various form elements, but it can’t work the way you expect.

Your HTML also includes an icon suggesting that you’re using Vite. Vite should have created a ready-to-go React template for you to work with, and that setup should have automatically built your code into a .js file for you. That’s why I think you’ve missed or skipped a step in whatever tutorial you’re following.

When you deploy to Pages you should be running a vite build command, and that should turn that .tsx file into Javascript. What is your build command in your Pages project? And the “Build output directory” should be dist. The problem could just be that you haven’t configured the Pages deployment properly to build your project.

You can start with Vite’s getting started guide and use the React template to create a working site. For the Cloudflare deployment, you’ll need that vite build step. Pages does not, sadly, have a Vite preset, so you need to ensure you’re running vite build and using the correct build output directory.

Thank you very much, turned out i have to run npm build command before deploying it

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.