vitejs / vite

Next generation frontend tooling. It's fast!
http://vitejs.dev
MIT License
67.2k stars 6.04k forks source link

dev server resolves wrong url for .json asset with import.meta.url from a dependent package #17949

Closed pskelin closed 2 weeks ago

pskelin commented 2 weeks ago

Describe the bug

When using @ui5/webcomponents as a dependency, it has an internal usage of the new URL('xxx', import.meta.url) pattern. This works correctly for vite build, but fails for vite dev

When running the linked reproduction project with vite dev, the URL is resolved to

return (await fetch(new URL("/node_modules/.vite/assets/cldr/en_GB.json", import.meta.url))).json();

but the dev server returns the index.html page for it

wrong url:

http://localhost:5174/node_modules/.vite/assets/cldr/en_GB.json

the correct url is

http://localhost:5174/node_modules/@ui5/webcomponents-localization/dist/generated/assets/cldr/en_GB.json

Running the same code with vite build and serving the dist folder works as expected

A workaround is the add the following config

export default {
  optimizeDeps: {
    exclude: ['@ui5/webcomponents'],
  },
};

but this is not ideal since this is the default usage of the package and should work the same way as the build command works for JSON assets.

There is a similar issue reported https://github.com/vitejs/vite/issues/8427, but it it for .wasm assest which are not included by default. For .json assets it should work the same as the build command without any workarounds.

Reproduction

https://github.com/Quafadas/my-vite-project

Steps to reproduce

Run npm install followed by npm run dev

open the page and check the network request for

http://localhost:5174/node_modules/.vite/assets/cldr/en_GB.json

which returns the index.html content

System Info

System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Pro
    Memory: 111.88 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.1.0 - /usr/local/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 10.7.0 - /usr/local/bin/npm
    pnpm: 9.8.0 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 127.0.6533.122
    Edge: 128.0.2739.42
    Safari: 17.5
  npmPackages:
    vite: ^5.4.1 => 5.4.2

Used Package Manager

npm

Logs

No response

Validations

hi-ogawa commented 2 weeks ago

Unfortunately the underlying issue is same regardless of asset type or extension, so we have to handle this as a duplicate of https://github.com/vitejs/vite/issues/8427.