The object notation for aliases is not functioning properly.
slavarazum opened this issue · comments
Describe the bug
I'm trying to connect Laravel's structure with Vitepress subfolder via Vite aliases. It works properly when using fileURLToPath(new URL('./path', import.meta.url))
to wrap the path, but it doesn't work with the simplified object notation.
Reproduction
Vitepress config file:
import { defineConfig } from 'vitepress';
import { fileURLToPath, URL } from 'node:url';
// https://vitepress.dev/reference/site-config
export default defineConfig({
title: "Awesome blog",
description: "Some description",
vite: {
resolve: {
// Doens't work
// alias: {
// '@blog': './theme',
// '@': '../../resources/js'
// },
// Works well
alias: [
{
find: '@blog',
replacement: fileURLToPath(
new URL('./theme', import.meta.url)
)
},
{
find: '@',
replacement: fileURLToPath(
new URL('../../resources/js', import.meta.url)
)
}
]
},
}
})
Expected behavior
As described in ViteJS docs:
Can either be an object, or an array of { find, replacement, customResolver } pairs.
If I haven't missed something, the configuration should work as follows:
import { defineConfig } from 'vitepress';
// https://vitepress.dev/reference/site-config
export default defineConfig({
title: "Awesome blog",
description: "Some desctiption",
vite: {
resolve: {
alias: {
'@blog': './theme',
'@': '../../resources/js'
},
},
}
})
System Info
System:
OS: macOS 14.4.1
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 71.29 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.9.0 - /usr/local/bin/node
Yarn: 1.22.22 - /usr/local/bin/yarn
npm: 10.1.0 - /usr/local/bin/npm
pnpm: 8.15.6 - /usr/local/bin/pnpm
Browsers:
Chrome: 124.0.6367.62
Safari: 17.4.1
Additional context
No response
Validations
- Check if you're on the latest VitePress version.
- Follow our Code of Conduct
- Read the docs.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Please share a repo or a stackblitz demo (https://vitepress.new) where we can verify this. Most likely the paths are not resolving properly in first case. Have you tried using '@blog': fileURLToPath(...)
? IIRC by default the paths are relative to project root rather than the config file. You can also try '@blog': '.vitepress/theme'
Sure. I created demo project where I import ExampleComponent
with @components
alias in Layout. I have commented out all the options for registering an alias using object notation that you can try. I expected one of them to work.
Sorry, it should be '@components': '/.vitepress/theme/components',
(notice leading slash) -- https://stackblitz.com/edit/vite-9upneb?file=docs%2F.vitepress%2Fconfig.ts
Based on usage it seems that's how one is supposed to use them - https://github.com/search?q=vite%20alias%20/%5B'%22%5D%5B@~%5D.*?%5B'%22%5D:%20%5B'%22%5D%5C//&type=code
Might be better to create docs PR to rollup make it more clear.