Hover/completions do not work when using mdx_analyzer from Neovim

[b0o]

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-js/[email protected]

Link to runnable example

No response

Steps to reproduce

I'm trying to use the MDX language server from Neovim.

The server starts and attaches to MDX files, and it reports diagnostics for structural issues like unclosed tags, but hover and completion do not work, and TypeScript errors are not reported.

I'm using the default config from lspconfig:

require'lspconfig'.mdx_analyzer.setup{}

I've tested in my own project (which is private), as well as this repo. MDX works as expected in both of them in VSCode, but not Neovim.

Other Neovim users seem to be having trouble as well: https://www.reddit.com/r/neovim/comments/1ewwtok/has_anyone_figured_out_intellisense_in_mdx_files/

Expected behavior

• Hovering over a variable/function should display type information
• Completions should be suggested, as they would in a .ts/tsx file

Actual behavior

• Hovering reports "No information available"
• No completions are shown

Runtime

Node v20

Package manager

pnpm

OS

Linux

Build and bundle tools

Next.js

[remcohaszing]

Hey @b0o, thanks for letting us know, and also for linking to the Reddit post.

MDX language server can run either with or without TypeScript enabled. This can be configured using the typescript.enabled initialize option. This is false by default.

If you enable TypeScript support via the MDX language server, it needs to perform things that the TypeScript language server does as well. It needs to create the same project, process the same files, etc. This option exists for editors that don’t support TypeScript plugins. I don’t know if this is the case for Neovim.

The recommended option is to use @mdx-js/typescript-plugin instead. This adds TypeScript support for MDX based on the TypeScript language server you probably already use. This means less memory usage, and compatibility with other plugins that work the same way, such as the Vue TypeScript plugin.

---

Since this is documented, but you and other Neovim users didn’t find it, do you have suggestions how to improve this? Are there other places that should document these options?

[b0o]

Hi, thanks for getting back to me!

Since this is documented, but you and other Neovim users didn’t find it, do you have suggestions how to improve this?

I did see the documentation about this, but I couldn't get it to work, and it's difficult to debug. Personally, I don't care about using more CPU/memory, I would prefer to just add mdx_analyzer to my LSP config and have it just work.

[wooorm]

AFAIK none of us are Neovim users so it’s an unknown for us, what to do

[haxibami]

Hi, I noticed something weird:

I'm using vtsls (a TS language server on Neovim). I installed and setup @mdx-js/typescript-plugin like this:

setup.lua

require('lspconfig').vtsls.setup({
  settings = {
    vtsls = {
      autoUseWorkspaceTsdk = true,
      tsserver = {
        globalPlugins = {
          {
            name = '@mdx-js/typescript-plugin',
            enableForWorkspaceTypeScriptVersions = true,
            languages = {
              'mdx',
            }
          },
        }
      }
    },
  },
  filetypes = {
    'javascript',
    'javascriptreact',
    'javascript.jsx',
    'typescript',
    'typescriptreact',
    'typescript.tsx',
    'mdx', -- <- Start TS server when you open a .mdx file
  },
  ...
})

In my minimum sample project, I created a tsconfig.json file to enable TS support for .mdx files.

tsconfig.json

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "plugins": [
      {
        "name": "@mdx-js/typescript-plugin"
      }
    ]
  },
  "mdx": {
    "checkMdx": true,
    "plugins": [["remark-frontmatter", ["toml", "yaml"]], "remark-gfm"]
  }
}

And I have a test.mdx file with the following content. When I open this file, I get a lot of errors and hover doesn't work.

test.mdx

---
date: 2024-09-05
---

{/**
  * @typedef Props
  * @property {string} name
  *   Who to greet.
  */}

# Hello {props.name}

errors

So I tried another way: instead of the original .cjs script from @mdx-js/typescript-plugin (which resolves to node_modules/@mdx-js/typescript-plugin/index.cjs), I used the bundled .js script from the VSCode extension (<vscode_extensions_dir>/unifiedjs.vscode-mdx-<version>/node_modules/@mdx-js/typescript-plugin.js). I just removed the .cjs with package.json, and copied the .js to the same dir.

rm node_modules/@mdx-js/typescript-plugin/index.cjs node_modules/@mdx-js/typescript-plugin/package.json
cp <vscode_extensions_dir>/unifiedjs.vscode-mdx-1.8.10/node_modules/@mdx-js/typescript-plugin.js node_modules/@mdx-js/typescript-plugin/index.js

Now everything works like a charm. I can see the hover and the errors are gone.

hover, with no errors

I tested this in another project (which uses ESM) and the result was the same.

[haxibami]

No copying was necessary, just changing this line to "main": "./index.cjs" (or adding) worked.

mdx-analyzer/packages/typescript-plugin/package.json

Line 16 in 284608b

"exports": "./index.cjs",