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

[karlhorky]

Initial checklist

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

Affected packages and versions

MDX VS Code Extension v1.8.9

Link to runnable example

No response

Steps to reproduce

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

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" />

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ]
  },
  "mdx": {
    "checkMdx": true
  },
  "include": [
    "next-env.d.ts",
    "**/*.mdx",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts"
  ],
  "exclude": ["node_modules"]
}

2. 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:
   

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]

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

• vscode-styled-components by @jasonwilliams (styled-components.vscode-styled-components)
• React CSS modules by @Viijay-Kr (viijay-kr.react-ts-css)

[karlhorky]

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

Extensions enabled

(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

...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):

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

[remcohaszing]

I’m closing this in favour of upstream issue styled-components/vscode-styled-components#448.

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

[github-actions]

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

Thanks,
— bb

[karlhorky]

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,

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

[remcohaszing]

I’m just not seeing it.

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]

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]

FWIW this is how I’m testing this:

• git clone git@github.com:mdx-js/mdx-analyzer.git
  cd mdx-analyzer
  npm install
  code .

• Tweak fixtures/fixtures.code-workspace as desired.
• In VSCode, press F5

[karlhorky]

Here's the reproduction (also shows the missing auto-import IntelliSense - I opened #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

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

[karlhorky]

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

• vscode-styled-components by @jasonwilliams (styled-components.vscode-styled-components)
• React CSS modules by @Viijay-Kr (viijay-kr.react-ts-css)

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

• This extension conflicts with Volar styled-components/vscode-styled-components#448
• Errors in .mdx files with mdx.checkMdx in tsconfig.json appear at end of file Viijay-Kr/react-ts-css#160

[remcohaszing]

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.

[github-actions]

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]

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]

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 volarjs/volar.js#216 was released in v2.4.0-alpha.1, I guess the version that will probably have the change will be v2.4.0:

• v2.4.0

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

[github-actions]

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

[karlhorky]

@johnsoncodehk @remcohaszing Thanks for the update to Volar 2.4 in PR #460 and the publish of unifiedjs.vscode-mdx@1.8.10 🙌

The problem is half fixed: I tried out the new version with the reproduction repo from the original issue description and:

1. Correct error locations are used with the (deprecated) Styled Components VS Code extension
2. Incorrect error locations (end of file) still appear with the React CSS modules VS Code extension (related issue: Errors in .mdx files with mdx.checkMdx in tsconfig.json appear at end of file Viijay-Kr/react-ts-css#160)

Kapture.2024-08-20.at.10.03.57.mp4

[Viijay-Kr]

@karlhorky Re posting here for visibility

This PR Viijay-Kr/typescript-cleanup-definitions#5 adapts similar changes done in volar project . Hopefully this fixes the issue fully

[karlhorky]

@Viijay-Kr thanks for the publish of viijay-kr.react-ts-css@3.2.4, I can confirm the MDX errors are in the correct positions again! 🎉

Kapture.2024-08-22.at.20.20.01.mp4