Subscribe on changes!

Chunk names with %20 after build (3.3.0-beta.5)

avatar
May 10th 2023

Vue version

3.3.0-beta.5

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-bttikt?file=src/components/GenericComponent.vue

Steps to reproduce

When using generic component (https://github.com/vuejs/rfcs/discussions/436, https://github.com/vuejs/language-tools/pull/2545), I got invalid chunk names (with %20) after npm run build in /dist/assets folder.

Example chunk name created from component using:

<script setup lang="ts" generic="TModel extends BaseModelWithBankAccounts">

Example:

  • BankAccountsList.vue_vue_type_script_setup_true_generic_TModel%20extends%20BaseModelWithBankAccounts_lang-147e6095.js

After replacing %20 with (space) in file names - everything works fine.

I've tried to reproduce the error but haven't succeeded yet.

It might occure when using generic component in many routes, so it would be placed in its own chunk.

What is expected?

Chunks should not have %20 in their names, but rather space or dash -.

What is actually happening?

I got chunks with %20 in their names. Browser is probably looking for a file with spaces, but there is a file with %20, and I got 404 not found error.

Example:

  • dist/assets/BankAccountsList.vue_vue_type_script_setup_true_generic_TModel%20extends%20BaseModelWithBankAccounts_lang-147e6095.js
  • dist/assets/GenericComponent.vue_vue_type_style_index_0_lang-3f2af169.js (simpler variant)

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (12) x64 Intel(R) Core(TM) i5-10500 CPU @ 3.10GHz   
    Memory: 42.53 GB / 63.75 GB

  Binaries:
    Node: 18.12.1 - C:\Program Files\nodejs\node.EXE
    npm: 9.1.3 - C:\Program Files\nodejs\npm.CMD

  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (113.0.1774.35)
    Internet Explorer: 11.0.19041.1566

  npmPackages:
    vue: 3.3.0-beta.5 => 3.3.0-beta.5 
    vue-router: 4.1.6
    vue-tsc: 1.6.4
    vite: 4.3.5
    typescript: 5.0.4
    postcss: 8.4.23
    @vue/tsconfig: 0.3.2

Any additional comments?

No response

avatar
May 11th 2023

I can't reproduce this from your linked reproduction. Maybe this only happens on Windows?

avatar
May 11th 2023

Should be fixed with @vitejs/plugin-vue 4.2.2

avatar
May 11th 2023

Thank You! It's working now :-)