Is it possible to to get the filepath of the file that uses an alias to import in Vite (Vue3)?

[lvjhn]

Description

Good day!

I have a couple of questions. Is it possible to to get the filepath of the file that uses an
alias to import in Vite (Vue3) ?

Set-up

I have this directory structure, for rhetorical purposes only:

src/ 
    module_a/ 
        some_script.js 
        another_script.js 
    module_b/ 
        some_script.js 
        another_script.js 
vite.config.js 

Scenarios

For example, say I'm in this file:

If I import using:
src/module_a/some_script.js

import "#/another_script.js" 

... then, the # alias should automatically point to ./src/module_a

Say when I'm in another module location ./src/module_b/some_script.js.

The statement:

import '#/another_script.js' 

... should import ./src/module_b/another_script.js accordingly.

Main Question

Is it possible to do this in vite.config.js?

vite.config.js

    ...
    export default defineConfig({
        plugins: [vue()],
        resolve: {
            alias: {
            '@': path.resolve(__dirname, './src'),
            '#': (...args) => {
                console.log(args);    // outputs [#, 0, '@/path/of/script/to/import']
                
                // how to get this thing below??? =(
                const filepathOfImportingScript = 
                    getImportingFilepath()  // <--- should return ./src/module_a/some_script.js
                
                const pathOfModule = 
                    getPathOfModule(filepathOfImportingScript);  // returns ./src/module_a/

                return path.resolve(__dirname, pathOfModule);
            }
        }
    })

My main problems are...

• How do I create the getImportingFilepath() function above which returns the filepath of the script
  that uses the alias # to import?

• The function getPathOfModule() is easier for me. The import filepath just have to be parsed to identify the module directory. However, the getImportingFilepath() is needed for this..

I hope somebody knows, thanks a lot!

Suggested solution

Why not add additional argument in resolver function?
Is this possible? =D

  export default defineConfig({
        plugins: [vue()],
        resolve: {
            alias: {
            '@': path.resolve(__dirname, './src'),
            '#': (alias, someInt, scriptToImport, scriptThatImports) => {

                // Is this possible??? =D 
                console.log(args);    // example output:  [#, 0, ''@/path/of/script/to/import', '@/path/of/script/that/is/importing']
                
                // how to get this thing below??? =(
                const filepathOfImportingScript = 
                    scriptThatImports  // <--- example output:  full/path/to/src/module_a/some_script.js
                
                const pathOfModule = 
                    getPathOfModule(filepathOfImportingScript);  // example return: ./src/module_a/

                return path.resolve(__dirname, pathOfModule);
            }
        }
    })

Adding this feature might open up a lot of possibilities in module relative imports.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[sapphi-red]

You could use customResolver as documented. (stackblitz)
https://vitejs.dev/config/shared-options.html#resolve-alias

[lvjhn]

Thanks a lot! I'll check that out =D.

How do I know the filepath of the script that imports? It's my main question.

When I use the custom resolver function and try to access the arguments using ..args, it only gives off something like ["@", 0, "@/path/to/import"]. However, I need the file that does the importing. It's not available as an arguments/parameter to the resolver function.

[lvjhn]

Oh... I overlooked the StackBlitz link. Thank you so much for this! Finally found it

More love and power to vite.