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.

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

[regression] typescript intelisenses are missing after latest update #413

Closed
4 tasks done
louisgv opened this issue Mar 4, 2024 · 18 comments
Closed
4 tasks done
Labels
👀 no/external This makes more sense somewhere else 👎 phase/no Post cannot or will not be acted on

Comments

@louisgv
Copy link

louisgv commented Mar 4, 2024

Initial checklist

Affected packages and versions

v1.8.1

Link to runnable example

No response

Steps to reproduce

A - definition navigation

  1. Import some TSX component
  2. Trying to jump into its definition

B - import intelisense

  1. In an MDX file
  2. 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

@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 Mar 4, 2024
@louisgv
Copy link
Author

louisgv commented Mar 4, 2024

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
Copy link
Member

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
Copy link
Author

louisgv commented Mar 4, 2024

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:

Screenshot 2024-03-05 at 6 24 39 AM

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

@louisgv
Copy link
Author

louisgv commented Mar 6, 2024

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

Screenshot 2024-03-06 at 2 00 07 PM

@remcohaszing
Copy link
Member

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
Copy link
Contributor

Can you try VSCode Insiders?

@louisgv
Copy link
Author

louisgv commented Mar 13, 2024

Downgrading to 1.7.3 resolved all of my issues:

Screenshot 2024-03-13 at 5 27 56 PM

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
Copy link

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
Copy link
Member

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
Copy link
Author

louisgv commented Mar 21, 2024

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
Copy link
Member

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
Copy link

techfg commented Mar 26, 2024

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

  1. Clone repo
  2. Open in VS Code
  3. Ensure MDX Extension > 1.7.3 installed and all other extensions are disabled
  4. Open src/pages/index.mdx
  5. Start adding a new Title tag (any of the components would work) and auto-complete will not surface the component name
  6. Downgrade to MDX Extension 1.7.3
  7. Reload VS Code
  8. Start adding a new Title tag (any of the components would work) and auto-complete will not surface the component name
  9. 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
image

1.7.3
image

Unresolved HTML elements (occurs in 1.7.3 & 1.8.2)
image
image

  1. VSCode enabled extensions
    image

  2. 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
  1. grep -l '"typescriptServerPlugins"' ~/.vscode-server/extensions/*/package.json
/home/barry/.vscode-server/extensions/unifiedjs.vscode-mdx-1.8.2/package.json
  1. tsconfig.json
{
  "extends": "astro/tsconfigs/strict"
}

@remcohaszing
Copy link
Member

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.

@remcohaszing remcohaszing closed this as not planned Won't fix, can't repro, duplicate, stale May 2, 2024
@remcohaszing remcohaszing added the 👀 no/external This makes more sense somewhere else label May 2, 2024

This comment has been minimized.

@github-actions github-actions bot added 👎 phase/no Post cannot or will not be acted on and removed 🤞 phase/open Post is being triaged manually labels May 2, 2024
@techfg
Copy link

techfg commented May 2, 2024

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
Copy link
Member

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
Copy link

techfg commented May 7, 2024

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)?

image
image

Thank you!

@remcohaszing
Copy link
Member

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

Anyway, what you’re seeing is #267.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
👀 no/external This makes more sense somewhere else 👎 phase/no Post cannot or will not be acted on
Development

No branches or pull requests

5 participants