[regression] typescript intelisenses are missing after latest update

louisgv commented 7 months ago

Initial checklist

[X] I read the support docs
[X] I read the contributing guide
[X] I agree to follow the code of conduct
[X] I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

v1.8.1

Link to runnable example

No response

Steps to reproduce

A - definition navigation

Import some TSX component
Trying to jump into its definition

B - import intelisense

In an MDX file
Try to import a TSX component with path autocomplete

Expected behavior

A - I should be able to F12/Ctrl + click the component to jump to its definition

B - I should have autocomplete for the path of my project

Actual behavior

A - Nothing happened

B - Nothing happened

Runtime

Node v20

Package manager

pnpm

OS

macOS

Build and bundle tools

Next.js

louisgv commented 7 months ago

Additional information:

My tsconfig.json:

{
  "compilerOptions": {
    "target": "es2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noImplicitReturns": true,
    "noUncheckedIndexedAccess": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitOverride": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    },
    "incremental": true,
    "verbatimModuleSyntax": true,
    "plugins": [
      {
        "name": "next"
      }
    ]
  },
  "include": [
    "next-env.d.ts",
    "**/*.mts",
    "**/*.mdx",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts"
  ],
  "exclude": ["node_modules"]
}

A sample mdx file:

import { Swagger } from '@/components/Swagger';
import { someAPISwaggerDocs } from '@/app/api/v1/some/[...slug]/schema';

<Swagger spec={someAPISwaggerDocs} />

The MDX rendered ok. And this used to work yesterday and earlier today. Then I had to reboot my laptop and I guess that's when vscode upgraded this extension 😅

remcohaszing commented 7 months ago

Are you sure this problem exists in 1.8.1? I could see why it would exist in 1.8.0, but 1.8.1 fixed some bugs due to internal changes.

I’m not able to reproduce this issue with 1.8.1.

louisgv commented 7 months ago

Yes - I got this problem together with #407 whenever I rename a TS export as well (saw it just now when I tried to F2 renaming a component). vscode says I'm on 1.8.1:

I have also tried to uninstall/reinstall via vscode marketplace - same issue :d

louisgv commented 7 months ago

Ooh, maybe VSCode version might be the cause? I'm on the latest stable:

remcohaszing commented 7 months ago

I use the same version of VSCode. That’s not the problem. Do you also have this problem when you disable all other extensions?

johnsoncodehk commented 7 months ago

Can you try VSCode Insiders?

louisgv commented 7 months ago

Downgrading to 1.7.3 resolved all of my issues:

Potentially an incompatible TypeScript handling? Occasionally, I'd see this error when I was on 1.8.1:

<semantic> TypeScript Server Error (5.4.2)
Debug Failure. File /Users/etc.../file.mdx has unknown extension.
Error: Debug Failure. File /Users/etc.../file.mdx has unknown extension.

manspaniel commented 6 months ago

I also had this problem after installing it for the first time today, as well as TypeScript errors showing on the last character of a line, rather than on the actual expression.

Downgrading to 1.7.3 fixed it.

remcohaszing commented 6 months ago

Could you provide:

A list of your extensions. (Output of code --list-extensions)
A list of extensions that register TypeScript plugins. (Output of grep -l '"typescriptServerPlugins"' ~/.vscode/extensions/*/package.json)
Your tsconfig.json, if available
Ideally, a repository which reproduces the problem

louisgv commented 6 months ago

code --list-extensions

adpyke.codesnap
akmittal.hugofy
arcanis.vscode-zipfs
bradlc.vscode-tailwindcss
captncaps.ue4-snippets
charliermarsh.ruff
christianalfoni.overmind-devtools-vscode
cschlosser.doxdocgen
dart-code.dart-code
dart-code.flutter
dbaeumer.vscode-eslint
dotjoshjohnson.xml
dsznajder.es7-react-js-snippets
dustypomerleau.rust-syntax
eamodio.gitlens
editorconfig.editorconfig
esbenp.prettier-vscode
flowtype.flow-for-vscode
formulahendry.auto-close-tag
formulahendry.auto-rename-tag
formulahendry.github-actions
github.copilot
github.copilot-chat
github.vscode-github-actions
github.vscode-pull-request-github
graphql.vscode-graphql-execution
graphql.vscode-graphql-syntax
green-csv.img-contextual
henoc.svgeditor
ibm.output-colorizer
jeff-hykin.better-cpp-syntax
jeroen-meijer.pubspec-assist
jock.svg
josetr.cmake-language-support-vscode
kevinrose.vsc-python-indent
localizely.flutter-intl
mathiasfrohlich.kotlin
mdickin.markdown-shortcuts
me-dutour-mathieu.vscode-github-actions
million.million-lint
mrmlnc.vscode-duplicate
ms-azuretools.vscode-azureresourcegroups
ms-azuretools.vscode-cosmosdb
ms-azuretools.vscode-docker
ms-dotnettools.csharp
ms-dotnettools.vscode-dotnet-runtime
ms-python.black-formatter
ms-python.debugpy
ms-python.python
ms-python.vscode-pylance
ms-toolsai.jupyter
ms-toolsai.jupyter-keymap
ms-toolsai.jupyter-renderers
ms-toolsai.vscode-jupyter-cell-tags
ms-toolsai.vscode-jupyter-slideshow
ms-vscode-remote.remote-containers
ms-vscode-remote.remote-ssh
ms-vscode-remote.remote-ssh-edit
ms-vscode-remote.remote-wsl
ms-vscode-remote.vscode-remote-extensionpack
ms-vscode.azure-account
ms-vscode.cmake-tools
ms-vscode.cpptools
ms-vscode.cpptools-extension-pack
ms-vscode.cpptools-themes
ms-vscode.remote-explorer
ms-vscode.remote-server
ms-vsliveshare.vsliveshare
mtxr.sqltools
mtxr.sqltools-driver-pg
mushan.vscode-paste-image
naumovs.color-highlight
njqdev.vscode-python-typehint
onatm.open-in-new-window
pkief.material-icon-theme
redhat.vscode-yaml
rust-lang.rust-analyzer
ryu1kn.partial-diff
slevesque.vscode-multiclip
styled-components.vscode-styled-components
svelte.svelte-vscode
tamasfe.even-better-toml
tauri-apps.tauri-vscode
toba.vsfire
twxs.cmake
tyriar.lorem-ipsum
unifiedjs.vscode-mdx
visualstudioexptteam.intellicode-api-usage-examples
visualstudioexptteam.vscodeintellicode
znck.grammarly

grep -l '"typescriptServerPlugins"' ~/.vscode/extensions/*/package.json

/Users/lab/.vscode/extensions/styled-components.vscode-styled-components-1.7.8/package.json
/Users/lab/.vscode/extensions/svelte.svelte-vscode-108.3.3/package.json
/Users/lab/.vscode/extensions/visualstudioexptteam.vscodeintellicode-1.3.1/package.json

tsconfig.json

{
  "compilerOptions": {
    "target": "es2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noImplicitReturns": true,
    "noUncheckedIndexedAccess": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitOverride": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    },
    "incremental": true,
    "verbatimModuleSyntax": true,
    "plugins": [
      {
        "name": "next"
      }
    ]
  },
  "include": [
    "next-env.d.ts",
    "**/*.mts",
    "**/*.mdx",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts"
  ],
  "exclude": ["node_modules", "workers/**"]
}

remcohaszing commented 6 months ago

That info is helpful. :)

All 3 extensions you listed that provide TypeScript plugins (styled-components.vscode-styled-components, svelte.svelte-vscode, visualstudioexptteam.vscodeintellicode) are known to have caused conflicts with Volar. Can you try disabling them and see if that helps?

techfg commented 6 months ago

I believe I've encountered the same root issue but only have the autocomplete problem.

I've disabled all extensions except MDX and WSL.

Repro is straight from astro with mdx starter, only modification is adding a tsx component to be able to test tsx, jsx, astro within mdx.

Steps to reproduce

Clone repo
Open in VS Code
Ensure MDX Extension > 1.7.3 installed and all other extensions are disabled
Open src/pages/index.mdx
Start adding a new Title tag (any of the components would work) and auto-complete will not surface the component name
Downgrade to MDX Extension 1.7.3
Reload VS Code
Start adding a new Title tag (any of the components would work) and auto-complete will not surface the component name
Autocomplete locates the component

One other note is that HTML elements (e.g., div, img, etc.) on either 1.8.2 or 1.7.3 aren't found in intellisense either and after typing a start tag, they aren't auto-closing. Honestly can't remember if it ever did this (been a while since I've worked with MD/MDX) but I seem to recall it did. Possibly I have something else misconfigured but thought I would mention it just in case it helps shed any light.

1.8.2

1.7.3

Unresolved HTML elements (occurs in 1.7.3 & 1.8.2)

VSCode enabled extensions

code --list-extensions

Extensions installed on WSL: Ubuntu:
azurite.azurite
bierner.github-markdown-preview
bierner.markdown-checkbox
bierner.markdown-emoji
bierner.markdown-footnotes
bierner.markdown-mermaid
bierner.markdown-preview-github-styles
bierner.markdown-yaml-preamble
bourhaouta.tailwindshades
davidanson.vscode-markdownlint
dbaeumer.vscode-eslint
eamodio.gitlens
editorconfig.editorconfig
eg2.vscode-npm-script
esbenp.prettier-vscode
github.copilot
github.copilot-chat
hbenl.vscode-mocha-test-adapter
hbenl.vscode-test-explorer
hookyqr.minify
huntertran.auto-markdown-toc
ibm.codewind
ibm.codewind-openapi-tools
letmaik.git-tree-compare
ms-azuretools.vscode-azureappservice
ms-azuretools.vscode-azurefunctions
ms-azuretools.vscode-azureresourcegroups
ms-azuretools.vscode-azurestaticwebapps
ms-azuretools.vscode-azurestorage
ms-azuretools.vscode-docker
ms-dotnettools.csharp
ms-dotnettools.vscode-dotnet-runtime
ms-python.debugpy
ms-python.isort
ms-python.python
ms-python.vscode-pylance
ms-toolsai.jupyter
ms-toolsai.jupyter-keymap
ms-toolsai.jupyter-renderers
ms-toolsai.vscode-jupyter-cell-tags
ms-toolsai.vscode-jupyter-slideshow
ms-vscode.azure-account
ms-vscode.azurecli
ms-vscode.powershell
ms-vscode.test-adapter-converter
msazurermtools.azurerm-vscode-tools
orta.vscode-jest
pwabuilder.pwa-studio
redhat.vscode-commons
redhat.vscode-xml
ritwickdey.liveserver
ryu1kn.partial-diff
shd101wyy.markdown-preview-enhanced
unifiedjs.vscode-mdx
vscode.docker
vscode.yaml
xdebug.php-debug
yzhang.markdown-all-in-one

grep -l '"typescriptServerPlugins"' ~/.vscode-server/extensions/*/package.json
```
/home/barry/.vscode-server/extensions/unifiedjs.vscode-mdx-1.8.2/package.json
```
tsconfig.json
```
{
"extends": "astro/tsconfigs/strict"
}
```

remcohaszing commented 5 months ago

I’m not seeing that:

It’s resolved in svelte.svelte-vscode.
This still occurs when using styled-components.vscode-styled-components.
When using visualstudioexptteam.vscodeintellicode additionally, this solves it again.

I imagine this has something to do with a bug in styled-components.vscode-styled-components and the order in which plugins are loaded.

github-actions[bot] commented 5 months ago

Hi! This was closed. Team: If this was fixed, please add phase/solved. Otherwise, please add one of the no/* labels.

techfg commented 5 months ago

I’m not seeing that:

It’s resolved in svelte.svelte-vscode.

This still occurs when using styled-components.vscode-styled-components.

When using visualstudioexptteam.vscodeintellicode additionally, this solves it again.

I imagine this has something to do with a bug in styled-components.vscode-styled-components and the order in which plugins are loaded.

Hi @remcohaszing -

Thanks for looking in to this! I'm not sure I fully understand your comments, sorry. In my repro, I disabled ALL extensions except MDX & WSL, there is nothing related to svelte and I don't even have the extensions svelte.svelte-vscode, styled-components.vscode-styled-components or visualstudioexptteam.vscodeintellicode installed.

I just tried v1.8.4 and intellisense is working again for MDX components, however it does not work for me if using > v1.7.3 through < 1.8.4.

Curious if you tested my repro using > 1.8.3 or 1.8.4?

Also, even with 1.8.4, intellisense for HTML elements is not working - this only occurs in MDX files. Any thoughts?

Thank you!

remcohaszing commented 5 months ago

I just released 1.8.5. This fixes a deeper issue which may resolve various unexpected bugs. But if you’re saying it works with 1.8.4, that should be ok, right?

Also, even with 1.8.4, intellisense for HTML elements is not working - this only occurs in MDX files. Any thoughts?

What do you mean by this? This extension doesn’t deal with HTML files. MDX files don’t contain HTML.

techfg commented 5 months ago

I just released 1.8.5. This fixes a deeper issue which may resolve various unexpected bugs. But if you’re saying it works with 1.8.4, that should be ok, right?

Yes, working with 1.8.4 is OK as it resolves the issue that existed > 1.7.3 < 1.8.4. I just tested with 1.8.5 and its working with that too so all good :) You had mentioned that you were unable to reproduce so I was only asking if you tested with 1.8.3 or if you had tested with 1.8.4. Either way, no worries, intellisense for MDX components is working as expected >= 1.8.4.

Also, even with 1.8.4, intellisense for HTML elements is not working - this only occurs in MDX files. Any thoughts?

What do you mean by this? This extension doesn’t deal with HTML files. MDX files don’t contain HTML.

Sorry for the confusion. What I meant is that when typing an HTML element (e.g., div, span, etc.) into an MDX file, intellisense for the HTML element doesn't resolve correctly. As I mentioned in my previous message, I'm not sure if this ever worked but noticed it and thought I would mention/ask. Should HTML elements have intellisense in MDX files (e.g., if I'm adding a "div" or "span" to an MDX which would be valid content for an MDX file like in the below)?

Thank you!

remcohaszing commented 5 months ago

Ah, so you meant JSX elements, not HTML. They are not the same.

Anyway, what you’re seeing is #267.

mdx-js / mdx-analyzer