🐛 BUG: Svelte integration not working with import Aliases

[moritzlaube]

What version of astro are you using?

1.0.0-beta.56

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

I am importing a Svelte component with an alias between the fences of my index.astro component like so:

import Test from 'component:Test.svelte'

When using the component with a client:* directive vite throws an error:

Cannot read properties of null (reading 'endsWith')
    at ModuleGraph.resolveUrl (/Users/moritzlaube/Projekte/kay-organics/bumwell-frontend/node_modules/vite/dist/node/chunks/dep-8f5c9290.js:58924:30)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async ModuleGraph.getModuleByUrl (/Users/moritzlaube/Projekte/kay-organics/bumwell-frontend/node_modules/vite/dist/node/chunks/dep-8f5c9290.js:58800:23)
    at async doTransform (/Users/moritzlaube/Projekte/kay-organics/bumwell-frontend/node_modules/vite/dist/node/chunks/dep-8f5c9290.js:49932:20

When then importing the component with its actual file path (import Test from '../component/Test.svelte') the error goes away. I am sharing a minimial reproducable example on stackblitz, importing the svelte component (Heading.svelte) in index.astro

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-4o8rsa?file=src/pages/index.astro

Participation

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

[tony-sull]

Looks like our aliasing docs are a bit out of date! Vite needs to know the aliases as well - astro.config.mjs needs to include the same alias map in vite.resolve.alias config so that both typescript and vite can resolve the paths

Here is an updated reproduction with the vite config, note that I changed the aliasing to use @components/* rather than component:*, I think that is the more usual Vite way of naming aliases

I just opened a docs issue to show the Vite config as well 👍

[moritzlaube]

Thanks!

[tony-sull]

Looks like I jumped the gun there! Turns out we actually have a custom Vite plugin that should be copying over the tsconfig.json aliases

Re-opening so we can get that plugin fixed, in the meantime the work around above should at least unblock you 👍

[bluwy]

Hello!

[bluwy]

In Astro 1.0.1, we get a clearer error message now like: Cannot find module 'component:Card.astro' imported from '/home/projects/github-4o8rsa/src/pages/index.astro'. It looks like this happens because compilerOptions.baseUrl isn't set, and searching around discord, this seems like a recommended option to set for other tooling to work.

So a way to fix the repro is to set:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "component:*": ["src/components/*"]
    }
  }
}

I'll make a docs PR instead then to clarify this. Another thing we could probably do is to suggest setting baseUrl if we find a match in paths.