Bug: experimental assets: `Import declaration conflicts with local declaration of 'Image'.`

[jlarmstrongiv]

What version of astro are you using?

2.6.2

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

What browser are you using?

VSCode

Describe the Bug

Please download the project from stackblitz and use VSCode (I am on Mac, personally). The error does not appear in stackblitz. However, if you download the project, install dependencies locally, and open the demo image.astro file, you will find the following type error:

Import declaration conflicts with local declaration of 'Image'.

This error occurs even when the Astro VSCode extension is the only extension installed.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-at6m8s-t6usix?file=src%2Fpages%2Fimage.astro

Participation

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

[Princesseuh]

This happens when you import a component with the same name as the current page / component.

In your case, you're importing Image into image.astro. Until this issue is fixed, you can alias Image to something else, like so:

import { Image as AstroImage } from "astro:assets";

[jlarmstrongiv]

Thank you so much! This helped me fix the error in a package I plan to open-source soon.

I didn’t understand it originally, so this explanation helps a lot.

[sarajw]

I've just come across this bug. Thanks for the workaround @Princesseuh

[RickyC0626]

I came across this bug too, when dealing with page slugs with multiple words (/workout-history with WorkoutHistory component). However, this error goes away when using the slug /workouthistory.

I'd like to work on fixing this issue, or at least provide clearer error messages for the next person who encounters this.

[fjdelarubia]

I'm not sure if it's related but in my project I have two button.astro files, one in components/common/button.astro and another one in components/common/modal/base/actions/button.astro and I also have an index.ts file in the actions directory for exporting all the components for the actions with custom name:

export { default as ModalActionsContainer } from './container.astro';
export { default as ModalActionsButton } from './button.astro';

VSCode shows me this error "Cannot find module './button.astro' or its corresponding type declarations.ts(2307)" in the index file, if I rename the button file the error disappears.

Could it be any limitation about having same filename for different astro components?