Failed to resolve svg with an alias

[RobinClowers]

Describe the bug

After upgrading from vite 4.5.0 to 5.0.4, I get this error:

Error: Failed to resolve import "~/img/wordmark.svg" from "src/theme/index.tsx". Does the file exist?

If I change this to a relative import, like ../../img/wordmark.svg, it works.

Reproduction

https://stackblitz.com/edit/vitejs-vite-gnkugl?file=main.js

Steps to reproduce

npm i && npm run dev, you should see:

Failed to resolve import "~/img/javascript.svg" from "main.js". Does the file exist?

System Info

System:
    OS: macOS 14.1.2
    CPU: (10) arm64 Apple M1 Max
    Memory: 19.80 GB / 64.00 GB
    Shell: 5.2.15 - /opt/homebrew/bin/bash
  Binaries:
    Node: 18.17.1 - ~/.volta/tools/image/node/18.17.1/bin/node
    Yarn: 1.22.17 - ~/.volta/tools/image/yarn/1.22.17/bin/yarn
    npm: 9.6.7 - ~/.volta/tools/image/node/18.17.1/bin/npm
  Browsers:
    Chrome: 119.0.6045.199
    Chrome Canary: 121.0.6125.0
    Edge: 119.0.2151.97
    Firefox: 120.0.1
    Safari: 17.1.2

Used Package Manager

yarn

Logs

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] 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 vuejs/core instead.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[bolt-new-by-stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-gnkugl (Open reproduction)

[nozomuikuta]

Here is a reproduction of [email protected], where the codebase is all same as the original reproduction.

https://stackblitz.com/edit/vitejs-vite-na64no?file=main.js

---

@RobinClowers

By the way, definedConfig used in your reproduction is of vitest so that the app breaks. You might want to fix the code for authors' review.

[RobinClowers]

@NozomuIkuta Good catch! I updated the example, which now shows the correct error.

[sapphi-red]

If I downgrade Vite to 4.5.0, ~/img/wordmark.svg resolves to /src/img/javascript.svg which doesn't exist. So I think the error is correct. If you want ~/img to take precedence over ~, then you need to place ~/img before ~.

import path from 'node:path';
import { fileURLToPath } from 'node:url';

import { defineConfig } from 'vite';

const dirname = path.dirname(fileURLToPath(import.meta.url));

export default defineConfig({
  resolve: {
    alias: [
      { find: '~/img', replacement: path.resolve(dirname, 'img') },
      { find: '~', replacement: path.resolve(dirname, 'src') },
    ],
  },
});

[RobinClowers]

It appears reversing the order of these alias does fix the issue, thanks!

However, I tested this with both 4.5.0 and 4.5.1 and the svg import does resolve with that same configuration. Can you share the code where the import resolves to /src/img/javascript.svg?

It appears to me this is a breaking change from 4.x, can we make a note in the upgrade guide about this?

[sapphi-red]

Hmm, interesting. I just simply opened the reproduction provided by NozomuIkuta.

Here is a reproduction of [email protected], where the codebase is all same as the original reproduction.

https://stackblitz.com/edit/vitejs-vite-na64no?file=main.js

[RobinClowers]

Apologies, you are correct. I was confused because in 4.5.1 the build doesn't fail, which is what I was looking for. Thanks again for your help!