Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug?]: Assets with names containing international characters don't work in prod on cloudflare-pages #1607

Open
2 tasks done
rvlzzr opened this issue Aug 21, 2024 · 4 comments
Open
2 tasks done

[Bug?]: Assets with names containing international characters don't work in prod on cloudflare-pages #1607

rvlzzr opened this issue Aug 21, 2024 · 4 comments
Labels
bug Something isn't working

Comments

@rvlzzr
Copy link
Contributor

rvlzzr commented Aug 21, 2024

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Current behavior 😯

Assets named with international characters do not load in prod, at least when using the cloudflare-pages preset.

Expected behavior 🤔

Assets named with international characters work consistently in dev and prod using any preset.

Steps to reproduce 🕹

Steps:

  1. Image files src/assets/서아.webp and src/assets/seoa.webp exist
  2. Import them and use them in img tags
  3. Note that both images show up in dev, but when deployed to prod, at least on cloudflare, the seoa.webp image loads correctly while the 서아.webp image is broken.

I haven't yet tested this using other presets so I'm not sure whether or not this issue is exclusive to cloudflare-pages.

Context 🔦

I am trying to import images such as 서아.webp named with international characters and use them in img tags.

Your environment 🌎

No response
@rvlzzr rvlzzr added the bug Something isn't working label Aug 21, 2024
@pheki
Copy link

pheki commented Sep 4, 2024

I think this is actually an issue with cloudflare pages. I'm not using SolidJS, but I managed to reproduce it yesterday when deploying a pages app with different wrangler versions, a directory I have was getting uploaded with a unicode character on its filename (ú) changed to 0xFFFD (�).

Both deployment and GET requests with url-encoding were working fine for months until this last deployment (which was the first deployment in a few weeks). Luckily when I downgraded wrangler to 3.67.1 it worked for me, but I think it was just a coincidence as it later failed with 3.67.1 and now it's working even with 3.73.0.

fix: #1607

@neehhaa06 it that link correct? It's pointing to this same issue

@rvlzzr
Copy link
Contributor Author

rvlzzr commented Sep 4, 2024

It works correctly using Astro. https://anydrop.com/ is just a basic astro app deployed with wrangler pages deploy dist. The images with and without international characters both load correctly as expected. I don't see why it should be possible for Astro but not for SolidStart.

export default defineConfig({
  output: 'server',
  adapter: cloudflare()
});

---
import Seoa from '../assets/geurimjaseoa.webp';
import 서아 from '../assets/서아.webp';
---

<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <link rel="icon" type="image/svg+xml" href="/favicon.svg"/>
    <meta name="viewport" content="width=device-width"/>
    <meta name="generator" content={Astro.generator}/>
    <title>Astro</title>
  </head>
  <body>
    <h1>Seoa</h1>
    <img src={Seoa.src} alt="Seoa"/>
    <h1>서아</h1>
    <img src={서아.src} alt="서아"/>
  </body>
</html>

@pheki
Copy link

pheki commented Sep 5, 2024

Hey, I probably wasn't clear enough, but from my experience this is an issue that happens sometimes when uploading files to Cloudflare Pages. I'm not using solid, but I have an app that worked correctly for months, except that on some of my last deployments my file names got incorrectly changed. My file path changed from something like assets/próprio/cropped.png to assets/pr�prio/cropped.png`, however after retrying the deployment some times it eventually worked as expected.

My guess is that you got unlucky with your Solid deployment, but lucky with Astro.

To confirm that, I suggest that you try verifying the files that got uploaded to Cloudflare Pages.

  1. Open the Cloudflare Dashboard on https://dash.cloudflare.com
  2. Click on Workers & pages
  3. Select your project
  4. Find the deployment you did with Cloudflare pages that was failing to load the images and click on "View details"
  5. On the "Assets uploaded" tab, expand the assets directory (or wherever is the image) and check the filename. If my guess is correct, you should find ��.webp
  6. If your dist/build directory is still there, compare to the image name there to see if SolidStart generated the correct image name.

Another thing you can try is deploying again now and see if it happens to work (you can deploy to a preview branch by adding e.g. --branch development)

My guess is that there's some Cloudflare server that's misconfigured or running different software/version that's screwing up the encoding.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@rvlzzr @pheki and others