search

mdx-js / mdx-analyzer

MDX extension for Visual Studio Code
https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-mdx
MIT License
320 stars 18 forks source link

Errors in `.mdx` files with `mdx.checkMdx` appear at end of file #451

Open karlhorky opened 2 weeks ago

karlhorky commented 2 weeks ago

Initial checklist

Affected packages and versions

MDX VS Code Extension v1.8.9

Link to runnable example

No response

Steps to reproduce

  1. Set up the app-dir-mdx example from Remco using the content below

(content contains intentional TypeScript errors)

mdx-components.tsx

import { MDXComponents } from 'mdx/types';
import { HTMLAttributes } from 'react';

type ZoomImageProps = {
  alt: string;
};

function ZoomImage(props: ZoomImageProps) {
  return <div>www</div>;
}

function CustomCodeSandBox(props: HTMLAttributes<HTMLDivElement>) {
  return (
    <div {...props} />
  );
}

const components = {
  ZoomImage,
  CustomCodeSandBox,
} satisfies MDXComponents;

declare global {
  type MDXProvidedComponents = typeof components;
}

export function useMDXComponents(): MDXProvidedComponents {
  return components;
}

app/message.mdx

<ZoomImage src="/logo.svg" alt="Logo" />

<CustomCodeSandBox template="react" />
  1. Observe the errors from the MDX VS Code extension appearing on a 1-character red squiggly the end of the file in VS Code instead of on the respective lines where the errors occur: Screenshot 2024-06-27 at 19 48 42

Expected behavior

In the screenshot above, I would expect that the 1st error would appear on line 47, covering the whole line, and the 2nd error would appear on line 49, covering the whole line

Actual behavior

In the screenshot above, the errors from the MDX VS Code extension appear on a 1-character red squiggly the end of the file in VS Code instead of on the respective lines where the errors occur

Runtime

No response

Package manager

No response

OS

macOS

Build and bundle tools

Next.js

karlhorky commented 2 weeks ago

Interesting, it appears that the highlighting is in the correct location if I disable these 2 extensions 🤔

Screenshot 2024-06-27 at 23 06 27

karlhorky commented 2 weeks ago

Funny enough, if I disable these 2 extensions, then that also disables the IntelliSense to auto-import into the file:

Extensions enabled

Screenshot 2024-06-27 at 23 07 38

Screenshot 2024-06-28 at 10 45 42

(although it is weird that the import appears at the end of the file... I guess it could be related to the error being reported at the end though)

Extensions disabled

Screenshot 2024-06-27 at 23 07 30

...or maybe IntelliSense to auto-import is not a feature of MDX Analyzer? 🤔

There is also another IntelliSense issue below with vscode-styled-components

However this appears to exhibit the opposite behavior - according to users in 413, enabling these extensions apparently caused IntelliSense suggestions to disappear on older versions (whereas I'm seeing IntelliSense suggestions only appear when the extensions are enabled):

remcohaszing commented 2 weeks ago

I’m closing this in favour of upstream issue https://github.com/styled-components/vscode-styled-components/issues/448.

I’m not seeing any problems while using viijay-kr.react-ts-css.

github-actions[bot] commented 2 weeks ago

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

github-actions[bot] commented 2 weeks ago

Hi team! Could you describe why this has been marked as external?

Thanks, — bb

karlhorky commented 2 weeks ago

Ok, thanks for reporting!

I’m not seeing any problems while using viijay-kr.react-ts-css.

I think this may be only caused by certain settings in React CSS modules by @Viijay-Kr (viijay-kr.react-ts-css)

eg. here are my settings:

  "reactTsScss.autoComplete": true,
  "reactTsScss.baseDir": "src",
  "reactTsScss.cleanUpDefs": [
    "node_modules/vite/client.d.ts",
    "node_modules/next/types/global.d.ts",
    "node_modules/react-scripts/lib/react-app.d.ts"
  ],
  "reactTsScss.codelens": true,
  "reactTsScss.cssAutoComplete": true,
  "reactTsScss.cssDefinitions": true,
  "reactTsScss.cssSyntaxColor": true,
  "reactTsScss.definition": true,
  "reactTsScss.diagnostics": true,
  "reactTsScss.peekProperties": true,
  "reactTsScss.references": true,

https://github.com/mdx-js/mdx-analyzer/assets/1935696/84d39fb9-26de-469b-8b66-ba0acfc6527c

remcohaszing commented 2 weeks ago

I’m just not seeing it.

image

Possibly another extension is the culprit. All TypeScript plugins interact with each other and can accidentally break other plugins. I even recall one plugin recovered issues from another at some point. Perhaps another extension is the culprit.

The following command lists all VSCode extensions that register a TypeScript plugin.

grep -l '"typescriptServerPlugins"' ~/.vscode/extensions/*/package.json
karlhorky commented 2 weeks ago

Hm, I can repro with only unifiedjs.vscode-mdx@1.8.9 and viijay-kr.react-ts-css@3.2.0

I'll create a reproduction.

remcohaszing commented 2 weeks ago

FWIW this is how I’m testing this:

karlhorky commented 2 weeks ago

Here's the reproduction (also shows the missing auto-import IntelliSense - I opened https://github.com/mdx-js/mdx-analyzer/issues/452 for that):

Extensions: unifiedjs.vscode-mdx@1.8.9 and viijay-kr.react-ts-css@3.2.0

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

https://github.com/mdx-js/mdx-analyzer/assets/1935696/1be8f03f-d318-4dc2-8b15-682310f1f11c

karlhorky commented 2 weeks ago

Interesting, it appears that the highlighting is in the correct location if I disable these 2 extensions 🤔

Companion issues have been reported in these two VS Code extensions now:

remcohaszing commented 2 weeks ago

I’m re-opening this. A change was made upstream in https://github.com/volarjs/volar.js/pull/216, which fixes compatibility with a number of existing TypeScript plugins. Let’s track here until that change has made its way into MDX analyzer.

github-actions[bot] commented 2 weeks ago

Hi team! I don’t know what’s up as there’s no phase label. Please add one so I know where it’s at.

Thanks, — bb

github-actions[bot] commented 2 weeks ago

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.

jasonwilliams commented 2 weeks ago

Thanks for raising the detailed issue, sadly I've had to archive https://github.com/styled-components/vscode-styled-components due to having no contributors for quite some time. It's unlikely the issue will be fixed there any time soon, I don't know if there's a replacement extension but until then it will remain the way it is.

karlhorky commented 1 week ago

I’m re-opening this. A change was made upstream in volarjs/volar.js#216, which fixes compatibility with a number of existing TypeScript plugins. Let’s track here until that change has made its way into MDX analyzer.

@remcohaszing Nice, thanks!

For anyone following along, considering that https://github.com/volarjs/volar.js/pull/216 was released in v2.4.0-alpha.1, I guess the version that will probably have the change will be v2.4.0:

Once that version has been released, it can be bumped in MDX Analyzer too.