URL Query Parameter with .scss causes vite to fail

[dongj0316]

Describe the bug

When navigating to a URL with a query parameter that contains a .scss, the vite development server will fail

Reproduction

https://stackblitz.com/edit/vitejs-vite-yduu1r?file=package.json

Start the service and open https://vitejs-vite-yduu1r--3000.local.webcontainer.io?url=test.com%2Fa.scss

System Info

System:
    OS: macOS 12.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 863.88 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.14.0 - ~/.nvm/versions/node/v15.14.0/bin/node
    Yarn: 1.22.5 - ~/.yarn/bin/yarn
    npm: 7.7.6 - ~/.nvm/versions/node/v15.14.0/bin/npm
  npmPackages:
    @vitejs/plugin-legacy: ^1.6.4 => 1.7.0 
    @vitejs/plugin-vue: ^2.1.0 => 2.2.0 
    vite: ^2.7.13 => 2.8.0

Used Package Manager

yarn

Logs

Failed to resolve entry for package "/home/projects/vitejs-vite-yduu1r/". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "/home/projects/vitejs-vite-yduu1r/". The package may have incorrect main/module/exports specified in its package.json.
    at packageEntryFailure (/home/projects/vitejs-vite-yduu1r/node_modules/vite/dist/node/chunks/dep-1412e872.js:29519:11)
    at resolvePackageEntry (/home/projects/vitejs-vite-yduu1r/node_modules/vite/dist/node/chunks/dep-1412e872.js:29515:9)
    at tryResolveFile (/home/projects/vitejs-vite-yduu1r/node_modules/vite/dist/node/chunks/dep-1412e872.js:29245:38)
    at tryFsResolve (/home/projects/vitejs-vite-yduu1r/node_modules/vite/dist/node/chunks/dep-1412e872.js:29227:16)
    at Context.resolveId (/home/projects/vitejs-vite-yduu1r/node_modules/vite/dist/node/chunks/dep-1412e872.js:29080:28)
    at Object.resolveId (/home/projects/vitejs-vite-yduu1r/node_modules/vite/dist/node/chunks/dep-1412e872.js:38250:55)
    at async ModuleGraph.resolveUrl (/home/projects/vitejs-vite-yduu1r/node_modules/vite/dist/node/chunks/dep-1412e872.js:53476:26)
    at async ModuleGraph.getModuleByUrl (/home/projects/vitejs-vite-yduu1r/node_modules/vite/dist/node/chunks/dep-1412e872.js:53361:23)
    at async doTransform (/home/projects/vitejs-vite-yduu1r/node_modules/vite/dist/node/chunks/dep-1412e872.js:52929:20

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 https://github.com/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.

[jianqi-jin]

@dongj0316 what's the aim of doing this? it looks like vite treats this url as a local file throught the middleware transformMiddleware. cause this url's postfix is ends up with the .css extension.

[dongj0316]

@JinJianQi This is a legal URL parameter value. We don't know what this value looks like. Legal values should be supported. In my usage scenario, I may need to receive a resource address through the URL parameter

[sapphi-red]

duplicate of #5265.

[sapphi-red]

#5265 is a issue with path including . so it was different.

[olejorgenb]

Note: this might be a slightly different issue than the OP

@mdi/font specify the version number of the font in the css. (ie.: this issue is not sass specific). Presumably to ensure the font is not cached in browsers across upgrades.

The vite server (confirmed both 2.9 and 3.0) builds and serve the application, but fail to load the font. I searched alot before I figured out the url parameter was the culprit. I used the --debug flag without getting any clues (admittingly I didn't look that hard though).

The browser fail with: GET http://localhost:5173/@fs/.../node_modules/@mdi/font/fonts/materialdesignicons-webfont.woff2?v=6.9.96 net::ERR_ABORTED 404 (Not Found)

Removing the query parameter from the css files resolved the issue. (sed -i 's/\?[^}]*\}//' node_modules/@mdi/font/scss/_path.scss)

[sapphi-red]

@olejorgenb I think that is a different issue. Would you create a new issue?

[ArcticPanda]

I came across this with a .css file. When we added a new param to the end of the query it started working. For instance in your original post, the url would become https://vitejs-vite-yduu1r--3000.local.webcontainer.io?url=test.com%2Fa.scss&a=a

[bluwy]

Moving this out of Vite 5 milestone as it's not a breaking issue. But I have a fix locally and will sent a PR shortly.