🐛 BUG: Astro files no intellisense for import component/new created files

[FairyPenguin]

Describe the Bug

This bug has become normal in Astro now and I think it needs serious consideration.

Whenever you work with Astro files the files that have an extension (.astro) have no IntelliSense for CSS and now for components or files.

The scenario:

I created a new component for example

new.astro or new.jsx or new.tsx

if I tried to import this component in any old .astro file no IntelliSense and even when I use the path to reach the file like
../../ >> I get no directory like the directory is not or not created, i checked double and trouble the files, and they and working because I can add the path myself like writing down the path without autocomplete so it works even Astro show me there is no file it imported the component and it's working, Sometimes even it gives me an error that the module can't be found while it's imported and working!!

The reason I became sure 100% that this problem only belongs to .astro files is that it never happens with any other framework outside or even inside Astro

I use Astro with React, all the .jsx/.tsx files work fine and great no problem of any kind even with React inside Astro. It's crystal clear there is a problem with it.Astro files import and before that, I reported the CSS IntelliSense is not working too all the time i even now use .css files as a solution for this.

I did a reproduction here
Reproduceand it contains all the problems with this one too.

I will try my best to record a video or screenshot of the problem but it needs serious consideration.

> astro "info"

  Astro                    v4.3.1
  Node                     v20.9.0
  System                   Linux (x64)
  Package Manager          pnpm
  Output                   server
  Adapter                  none
  Integrations             @astrojs/react
                           astro-icon

[FairyPenguin]

While I checked the old issues I found this one

#707 (comment)

it's the same problem typically, from November and it's still not solved, this now makes me sure of what I was describing.

As he described, all the services are crashing constantly astro ts, and this is in Astro only.

But now it reached the CSS intellisense service and Import too.

[Princesseuh]

Everything works just fine for me in your reproduction, so unfortunately, I don't really know what the issue is. The only issue I notice in your repro is the same one as this issue #685

I'm sorry, I'm not really sure how to help.

[FairyPenguin]

It's here too, so I'm not the only one

#707

as it's typically the same problem and as I see in this issue too no solution.

Sadly, I was hoping to use Astro as our main framework for production projects at work but with this situation, we can't continue with that, any of us can work while there are constant crashes and no IntelliSense

For the reproduction, we moved it to Nextjs yestarday as we reached a dead end with Astro. After a deep search, we found many complaints on Reddit and Twitter about the typescript Language Server crashes in Astro and this explains everything.
I think this needs more and deeper investigation in the future.

Thanks for your help and support. 🙏

[Princesseuh]

No worries, sorry it didn't work. Hopefully I'll eventually be able to reproduce the issue and fix it. It's quite likely the issue is somewhat isolated or we'd get much more reports (we have thousands of users and the same code powers Vue's extension, that has millions of users), but unfortunately I can't quite tell what the common factor is.

[Princesseuh]

Closing this issue because it seems to be a mix of two previously reported ones, namely #707 and #685

[FairyPenguin]

I have the same problem, it seems to happen only on linux.

Your point about Linux makes me wonder because yes I only use Linux and I don't have any other OS to test with.
Even all the team uses Linux.

Can you test this in another OS if you can Like Mac or Windows?

I did some deep dubbing yesterday and today too,
First, we used Vue as they said they are using the same code as Vue but Vue works perfectly and has no problems like Astro - again and again it's only Astro-Related problem.
I even used Vue for continuous 3 hours deleting editing and creating files and code with no problem like this!

Another thing I found is that the Astro dev server lags horribly after some time of use, But as I member this never happened in the previous realizes, This issue started to be very vague after the last 3-4 releases, before that and I never encountered that and Astro was never lagging or slow like now.

[FairyPenguin]

I have the same problem, it seems to happen only on linux.

Another point I was suspecting before moving the project to Nextjs completely, Is that I remember something that could maybe help detect this problem

1- Try to remove any Image component (Astro Image) and use only the regular img element

2- If you are using any SSR/Hybrid remove and use the default.

Test both solutions, maybe could work for you.

Here's why I'm suspecting both this:

Long story short: When Nextjs 13 was released I faced the same problem with lags and hangs but it wasn't like what is in Astro but very close and turns out that the Next Image component was using a server for image optimization that did this whole problems of lag and hangs.

Another thing I remember the Next team at that time detected some Nodejs workers were causing most of the problems too.

But as I understand Astro uses Vite which uses Go not node!

Hope you can find a solution, but unfortunately reached a dead end it was time-consuming and frustrating, and not like it will be solved any soon.

[FairyPenguin]

#707 (comment)

Wow, it looks like it's getting worse and others reporting the same problem with ts and you here saying where the others=, they are in the issue you replayed to?!

I'm shocked!! you replied to a user who facing the same issue with the ts LSP for astro crashing and replay to me here where the others!!