Skip to content

Vite dev mode, loading css files is not consistent if order of query params is changed  #357

Open
@skalidindi

Description

@skalidindi

Related plugins

Describe the bug

I am trying to run a vite dev mode in an environment where order of query params can change in a middle layer which is out of my control but Vite's output seems to be dependent on the order of its query params when it shouldn't be the case.

Note: This happens in Vue 2's plugin as well.

Reproduction

https://github.com/skalidindi/vue3-vite-bug

Steps to reproduce

Run the following in the codebase

npm install
npm run dev

Then visit
http://localhost:3000/src/App.vue?vue&type=style&index=0&scoped=7a7a37b1&lang.css
This returns the right output of javascript

However, change the order of query params in this url and visit that url for example

http://localhost:3000/src/App.vue?vue&type=style&lang.css&index=0&scoped=7a7a37b1

This instead results in parsed css which the browser does not like because the file type from the request is document JS.

System Info

System:
    OS: macOS 14.2
    CPU: (12) arm64 Apple M2 Pro
    Memory: 72.94 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - ~/.local/state/fnm_multishells/78767_1685589184986/bin/node
    Yarn: 1.22.21 - /opt/homebrew/bin/yarn
    npm: 10.4.0 - ~/.local/state/fnm_multishells/78767_1685589184986/bin/npm
    bun: 1.0.25 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 121.1.62.156
    Safari: 17.2
  npmPackages:
    @vitejs/plugin-vue: ^5.0.3 => 5.0.4 
    vite: ^5.1.0 => 5.1.3

Used Package Manager

npm

Logs

N/A

Validations

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions