The object notation for aliases is not functioning properly.

slavarazum commented 3 weeks ago

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

[X] Check if you're on the latest VitePress version.
[X] Follow our Code of Conduct
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

brc-dd commented 2 weeks ago

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'

slavarazum commented 2 weeks ago

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.

Check out on stackblitz

brc-dd commented 2 weeks ago

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.

vuejs / vitepress