Typescript aliases are not working in astro.config.ts

[zokkis]

Astro Info

Astro                    v4.2.1
Node                     v20.10.0
System                   Linux (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             astro-purgecss
                         astro-compress
                         @astrojs/mdx
                         @astrojs/sitemap

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

Using Typescript aliases inside the astro.config.ts throws an error. But if I use the same file but a relative/absolute path the File is found and everything works fine.

There is nothing inside the Docu which describes this behavior, but aliases are essential to typescript and should be supported.

And there is nothing fancy in the file, its a normal string-export and as I saied the file dont has any problems, because relative/absolute paths are working.

What's the expected result?

I would like to have support for aliases even in the config. I also tried to edit the vite.config, but still the same error.

I don't need any fancy-functions, only a import of constants or pure-functions.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-umcujs-lyef16?file=astro.config.ts

Participation

• [X] I am willing to submit a pull request for this issue.

[zokkis]

After further search, I found the Bug in https://github.com/withastro/astro/blob/17f27e7cebe612ba38fcee09e35df0a8e0ce86cd/packages/astro/src/core/config/vite-load.ts#L8

after adding:

resolve: {
  alias: {
    '@utils': 'C:/Development/test/squalid-flare/src/utils'
  }
}

with patch-package to the vite-config inside of vite-load.ts its working (only for @utils alias)

I thing the tsconfig should be read and the paths should be mapped

[castarco]

Besides adding the aliases, you also have to set the "compilerOptions.baseUrl" option in your tsconfig.json file, so the defined aliases can be properly resolved.

Also, try to not use absolute paths for your aliases, prefer always relative paths.

[zokkis]

Besides adding the aliases, you also have to set the "compilerOptions.baseUrl" option in your tsconfig.json file, so the defined aliases can be properly resolved.

Also, try to not use absolute paths for your aliases, prefer always relative paths.

The copilerOptions.baseUrl is set like written in the docu.

The tsconfig.json looks like this:

{
    "extends": "astro/tsconfigs/strictest",
    "compilerOptions": {
        "baseUrl": ".",
        "verbatimModuleSyntax": true,
        "paths": {
            "@/*": ["*"],
            "@public/*": ["public/*"],
            "@src/*": ["src/*"],
            "@components/*": ["src/components/*"],
            "@i18n/*": ["src/i18n/*"],
            "@layouts/*": ["src/layouts/*"],
            "@pages/*": ["src/pages/*"],
            "@shared/*": ["src/shared/*"],
            "@styles/*": ["src/styles/*"]
        },
        "plugins": [
            {
                "name": "@astrojs/ts-plugin"
            }
        ]
    }
}

The absolute path in vite was only a quick-fix with patch-package and an example path to demonstrate that the vite-config must be extended to support ts-aliases in the astro.config.ts.

the problem is as simple as using import translations from '@i18n/translations'; inside the config and it will throw an error, but use the same import in a *.astro-file will work.

So there is no workaround

See #9789

[matthewp]

Closing as we decided in https://github.com/withastro/astro/pull/9789 not to support this feature as it would deviate from how astro.config.mjs works.

[dnbkr]

just wanted to add here that, while I respect that the decision not support this has been made, I do have a (imo) common use case that would support the case to make this work

I want my app to insert some data into my database when the server launches. For this, I have been writing an Integration to use the server start hook. My script wants to reuse my app's various typescript modules for database connection etc. and they all use relative imports. This is not possible because of this limitation with the config file.

[zokkis]

just wanted to add here that, while I respect that the decision not support this has been made, I do have a (imo) common use case that would support the case to make this work

I want my app to insert some data into my database when the server launches. For this, I have been writing an Integration to use the server start hook. My script wants to reuse my app's various typescript modules for database connection etc. and they all use relative imports. This is not possible because of this limitation with the config file.

https://zokki.net/en/blog/ts-paths-aliases-in-astro-config/

I wrote a short Tutorial on how to add the support by yourself.