Broken paths when using base path "./" in vite config.

seihoukei commented 1 year ago

Describe the bug

When using base path "./", generated paths are broken in resulting dist files. For example, when project folder is d:\test\vite-project, generated paths look like ../../../../test/vite-proje/assets/index-785346fb.js when they should look like ./assets/index-785346fb.js regardless of project path.

Reproduction URL

https://github.com/seihoukei/vite-svelte-base-bug-reproduction

Reproduction

npm install
npm run build
see paths to assets in ./dist/index.html

To reproduce from scratch (without the repo above)

npx create-vite@4.3.1
Choose vite-project(default) -> Svelte -> JavaScript
cd vite-project
npm install
edit vite.config.js to add base: "./", between plugins: [svelte()], and })
npm run build
see paths to assets in ./dist/index.html

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
    Memory: 17.89 GB / 31.96 GB
  Binaries:
    Node: 18.12.1 - C:\Program Files\nodejs\node.EXE
    npm: 9.6.7 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 112.0.5615.138
    Edge: Spartan (44.19041.1266.0), Chromium (113.0.1774.42)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @sveltejs/vite-plugin-svelte: ^2.0.3 => 2.2.0
    svelte: ^3.57.0 => 3.59.1
    vite: ^4.3.2 => 4.3.8

seihoukei commented 1 year ago

As an additional information: I stumbled upon this after upgrade from

    "@sveltejs/vite-plugin-svelte": "^1.0.1",
    "svelte": "^3.49.0",
    "vite": "^3.0.7"

where things worked fine.

I've noticed that generated path (in addition to just being broken outright) has one more ../ than project folder can accomodate, and last two letters of the path are omitted, so it might be case of wrong split, cutting last 2 letters instead of initial "..".

I've experimented with creating a React and Vanilla JS projects using same method (npx create-vite@4.3.1), and for both adding base path "./" worked as intended, so I suppose it's specific to this plugin.

bluwy commented 1 year ago

I ran the repro locally and it's working fine (on macos). It could be an issue with Windows specifically but given that you've tried with React and it worked, and that vite-plugin-svelte doesn't meddle with base at all, it's a bit strange.

Perhaps there's some node_modules caching issue in the Vite + Svelte project? e.g. re-creating node_modules or updating all to latest could perhaps fix it.

seihoukei commented 1 year ago

Perhaps there's some node_modules caching issue in the Vite + Svelte project? e.g. re-creating node_modules or updating all to latest could perhaps fix it.

It reproduces with a freshly created project for me (no node_modules until first npm install), so I don't think it's a caching issue. I will try to remove node.js/npm with all its data and reinstall it to make sure.

Issue might be Windows-specific because it's related to path handling, and the way path strings look (and should be handled) is system-specific. I should have specified that.

EDIT: after npm cache clean --force and recreating project from scratch, problem is still there.

EDIT2: wiping out node and npm (including appData etc) from PC and reinstalling fresh ones did not help as well...

seihoukei commented 1 year ago

~~I've tried on another Windows PC and it indeed does not replicate at all. I guess it's safe to close the issue and I'm left with looking for the issue locally. Sorry for taking your time.~~

I'd still apreciate any help with resolving this, as clean install of latest stable npm/node after removing whatever caches it had did not help, and I don't see how anything else could affect it so far.

seihoukei commented 1 year ago

Actually, I've found out that the other PC where issue did not replicate had Node 16.x and after updating to Node 18.16 the issue replicates there as well.

dominikg commented 1 year ago

I can't reproduce this in a windows10 vm with cmd.exe. Both node16 and node18 produce these paths in dist/index.html

    <script type="module" crossorigin src="./assets/index-785346fb.js"></script>
    <link rel="stylesheet" href="./assets/index-9ea02431.css">

As vite-plugin-svelte does not include any code that would change the path of emitted assets, it is very unlikely to be caused by it.

It may be caused by drive-letter handling problems in vite, but i would expect it to affect all vite templates in a similar way. As mentioned by @bluwy already, vite-plugin-svelte does not mess with base or asset path handling at all.

seihoukei commented 1 year ago

I've done some more experimenting and so far I've found running "npm run build" as administrator to work properly. At this point I'm inclined to think it's a deeper problem with multiple things involved, but not tied to this plugin specifically.

EDIT: actually that only worked once or twice and now I'm back with "../"s. Oh, well.

sveltejs / vite-plugin-svelte