"Internal server error: URI malformed" when using a percent sign in URL

[hichemfantar]

Describe the bug

"Internal server error: URI malformed" when using a percent sign in URL

Reproduction

https://github.com/hichemfantar/vite-bug-repro

Steps to reproduce

1. create a file with % in name
2. import it

System Info

System:
    OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i5-10500H CPU @ 2.50GHz
    Memory: 9.71 GB / 15.40 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.18.2/bin/yarn
    npm: 9.8.1 - ~/.nvm/versions/node/v18.18.2/bin/npm
    pnpm: 8.10.2 - ~/.nvm/versions/node/v18.18.2/bin/pnpm
  Browsers:
    Chrome: 118.0.5993.88
  npmPackages:
    @vitejs/plugin-react: ^4.2.0 => 4.2.1 
    vite: ^5.0.0 => 5.0.7

Used Package Manager

npm

Logs

no build errors

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[benmccann]

I'm unsure if the handling of % is a bug. However users of vite-imagetools are reporting that a space in the filename doesn't work, which definitely seems like a bug: JonasKruckenberg/imagetools#670

[sapphi-red]

Faux ESM treats the import specifier (I mean the bar.js part of import foo from './bar.js') as a file path and native ESM (Node/browsers/deno) treats it as URL.

For example, in order to import a file named %foo, the import specifier is different between them.
Faux ESM: import foo from './%foo'
Native ESM: import foo from './%25foo'

I guess we first need to decide how Vite should handle this.

[benmccann]

What is faux ESM? Do you mean how it's treated by Vite during bundling? We can't change how native ESM handles it, so I imagine that if we wanted to fix this that our only choice would be to align with native ESM.

[sapphi-red]

What is faux ESM? Do you mean how it's treated by Vite during bundling?

It's a term that refers to files that cannot be run in the browser or Node.js, but use ESM import/export. It's consumed by a bundler including Vite, Webpack, parcel, etc. For example, a file is specified by module field is sometimes faux ESM. I believe there won't be many packages importing a file that requires URL encoding, but it does have a chance to break some packages if we change the way.

If we align the behavior with native ESM, this error itself is not a bug. (We could add a more friendly error message though.) It seems import SmallLogo from "./assets/logo-10%25.png"; doesn't work and that is a bug.