OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

JS Syntax Error after deploying to CloudFlare

  • Thread starter Thread starter Hykilpikonna
  • Start date Start date
H

Hykilpikonna

Guest
I have a static website built using Svelte (4.2.10) + Vite (5.1.1) + TypeScript (5.2.2).

When I run the developmental frontend by running vite locally, it runs fine and renders without any problem. When I build the website using vite build and use miniserve to serve the dist static directory, it also renders completely fine.

However, when I deploy the website on Cloudflare and open the deployed website, the browser complains about a SyntaxError and does not render.

I have created a minimal reproducible example at https://gitlab.com/hykilpikonna/vite-reproducible-bug. The only dependency required to reproduce this behaviour seems to be core-js. The bugged version can be accessed at https://test0213.hydev.org/ - this page should show "1,2,3,4,5" but instead shows a SyntaxError in the console.

Some properties of this bug:

  • It cannot be reproduced when I deploy to Cloudflare pages without a domain (i.e. https://vite-reproducible-bug.pages.dev/ works as intended)
  • It cannot be reproduced when deployed locally using Nginx.
  • It does not immediately show up. It only appears after refreshing the page when the developer console is open. However, after the bug shows up, refreshing the page doesn't fix it.
  • I have tried different browsers and clean profiles, which all showed this behaviour, so it couldn't be caused by my browser extensions.

Steps to replicate this bug from scratch:

  1. Create a vite svelte project using npm create vite@latest
  2. Install core-js, import and use it in your code
  3. Deploy it to CloudFlare pages (I used GitHub and GitLab integrations)
  4. Set a CloudFlare domain URL for the CloudFlare pages.

enter image description here

enter image description here

<p>I have a static website built using Svelte (4.2.10) + Vite (5.1.1) + TypeScript (5.2.2).</p>
<p>When I run the developmental frontend by running <code>vite</code> locally, it runs fine and renders without any problem. When I build the website using <code>vite build</code> and use <code>miniserve</code> to serve the dist static directory, it also renders completely fine.</p>
<p>However, when I deploy the website on Cloudflare and open the deployed website, the browser complains about a SyntaxError and does not render.</p>
<p>I have created a minimal reproducible example at <a href="https://gitlab.com/hykilpikonna/vite-reproducible-bug" rel="nofollow noreferrer">https://gitlab.com/hykilpikonna/vite-reproducible-bug</a>. The only dependency required to reproduce this behaviour seems to be <code>core-js</code>. The bugged version can be accessed at <a href="https://test0213.hydev.org/" rel="nofollow noreferrer">https://test0213.hydev.org/</a> - this page should show "1,2,3,4,5" but instead shows a SyntaxError in the console.</p>
<p>Some properties of this bug:</p>
<ul>
<li>It cannot be reproduced when I deploy to Cloudflare pages without a domain (i.e. <a href="https://vite-reproducible-bug.pages.dev/" rel="nofollow noreferrer">https://vite-reproducible-bug.pages.dev/</a> works as intended)</li>
<li>It cannot be reproduced when deployed locally using Nginx.</li>
<li>It does not immediately show up. It only appears after refreshing the page when the developer console is open. However, after the bug shows up, refreshing the page doesn't fix it.</li>
<li>I have tried different browsers and clean profiles, which all showed this behaviour, so it couldn't be caused by my browser extensions.</li>
</ul>
<p>Steps to replicate this bug from scratch:</p>
<ol>
<li>Create a vite svelte project using <code>npm create vite@latest</code></li>
<li>Install <code>core-js</code>, import and use it in your code</li>
<li>Deploy it to CloudFlare pages (I used GitHub and GitLab integrations)</li>
<li>Set a CloudFlare domain URL for the CloudFlare pages.</li>
</ol>
<p><a href="https://i.sstatic.net/jLMyO.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/jLMyO.png" alt="enter image description here" /></a></p>
<p><a href="https://i.sstatic.net/7S34Q.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/7S34Q.png" alt="enter image description here" /></a></p>
 

Latest posts

Online statistics

Members online
0
Guests online
4
Total visitors
4
Top