Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Auto-import IntelliSense of React components missing #452

Open
4 tasks done
karlhorky opened this issue Jun 28, 2024 · 4 comments · May be fixed by #491
Open
4 tasks done

Auto-import IntelliSense of React components missing #452

karlhorky opened this issue Jun 28, 2024 · 4 comments · May be fixed by #491
Labels
🗄 area/interface This affects the public interface 👍 phase/yes Post is accepted and can be worked on 🐛 type/bug This is a problem 🙆 yes/confirmed This is confirmed and ready to be worked on

Comments

@karlhorky
Copy link

karlhorky commented Jun 28, 2024 •
edited
Loading

Initial checklist

Affected packages and versions

MDX VS Code Extension v1.8.9

Link to runnable example

No response

Steps to reproduce

As noted in #451 (comment), the IntelliSense entries for auto-import of React components in .tsx files (auto-import in an .mdx file) are missing.

  1. Clone the reproduction at https://github.com/karlhorky/repro-mdx-analyzer-missing-auto-import-intellisense
  2. Install the 2 recommended extensions [email protected] and [email protected] (both enabled)
  3. In app/message.mdx, move the cursor to the end ZoomImage and trigger IntelliSense with ctrl-space
  4. Observe one entry in IntelliSense
  5. Select this entry
  6. Observe the import is added at the end of the file
  7. Disable [email protected]
  8. Move the cursor to the end ZoomImage and trigger IntelliSense with ctrl-space
  9. Observe zero entries in IntelliSense
Version: 1.91.0-insider
Commit: aea213b7fcc7de5c24ad797ac1af209b159d451f
Date: 2024-06-28T06:02:58.030Z
Electron: 29.4.0
ElectronBuildId: 9728852
Chromium: 122.0.6261.156
Node.js: 20.9.0
V8: 12.2.281.27-electron.0
OS: Darwin arm64 23.5.0

Repo: https://github.com/karlhorky/repro-mdx-analyzer-missing-auto-import-intellisense

Kapture.2024-06-28.at.17.33.21.mp4

Expected behavior

  1. One entry in the IntelliSense for ZoomImage when only [email protected] installed
  2. Selecting the entry should add the new import to the top of the code (also when [email protected] enabled)
    1. Saving the file with an import not in the import block at the top should move the import to the top of the file

Actual behavior

  1. Zero entries in the IntelliSense for ZoomImage when only [email protected] installed
  2. (when [email protected] enabled) selecting the entry adds the new import to the bottom of the code
    1. Saving the file has no effect

Runtime

Node v20

Package manager

No response

OS

macOS

Build and bundle tools

Next.js

Potentially Related
@github-actions github-actions bot added 👋 phase/new Post is being triaged automatically 🤞 phase/open Post is being triaged manually and removed 👋 phase/new Post is being triaged automatically labels Jun 28, 2024
@karlhorky karlhorky mentioned this issue Jun 28, 2024
Closed
4 tasks
@Yonom
Copy link

Yonom commented Jul 8, 2024

I am getting a similar issue with the VSCode Intellicode extension turning off all hints from this extension

@remcohaszing remcohaszing added 🐛 type/bug This is a problem 🗄 area/interface This affects the public interface 🙆 yes/confirmed This is confirmed and ready to be worked on 👍 phase/yes Post is accepted and can be worked on labels Jan 3, 2025
@github-actions github-actions bot removed the 🤞 phase/open Post is being triaged manually label Jan 3, 2025
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jan 3, 2025

Hi! This was marked as ready to be worked on! Note that while this is ready to be worked on, nothing is said about priority: it may take a while for this to be solved.

Is this something you can and want to work on?

Team: please use the area/* (to describe the scope of the change), platform/* (if this is related to a specific one), and semver/* and type/* labels to annotate this. If this is first-timers friendly, add good first issue and if this could use help, add help wanted.

@remcohaszing
Copy link
Member

I have confirmed (and fixed) it, but the fact that it works with viijay-kr.react-ts-css is actually a bug.

remcohaszing added a commit that referenced this issue Jan 3, 2025
@remcohaszing
Fix auto-imports
c8b5c32 
This change adds support for auto-imports.

The virtual code now contains an empty import of the JSX runtime. This
import was chosen, because it must exist anyway. This is immediately
followed by an empty code mapping, meaning TypeScript always has a place
to insert auto-imports.

Since JSX components can be injected, they are sometimes prefixed with
`_components.` in the virtual code. To support auto-import completions,
an additional mapping is now made to an expression containing merely the
identifier. As a result, the editor now shows auto-import completions,
unless `MDXProvidedComponents` is defined. I don’t know why the
existence of `MDXProvidedComponents` matters, but this probably matches
the expectation of users anyway.

The auto-imports will not be followed by a blank line. This can lead to
a syntax error in case no other imports exist yet. This is not ideal,
but easy and straight-forward to resolve manually.

Closes #452
@remcohaszing remcohaszing linked a pull request Jan 3, 2025 that will close this issue
Open
6 tasks
@karlhorky
Copy link
Author

karlhorky commented Jan 3, 2025 •
edited
Loading

@remcohaszing thanks, amazing!

Do you think this is a bug in viijay-kr.react-ts-css?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
🗄 area/interface This affects the public interface 👍 phase/yes Post is accepted and can be worked on 🐛 type/bug This is a problem 🙆 yes/confirmed This is confirmed and ready to be worked on
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix auto-imports mdx-js/mdx-analyzer
3 participants
@remcohaszing @Yonom @karlhorky