no-unused-vars error when using eslint-plugin-mdx without eslint-plugin-react.

[chenxsan]

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

Latest

Link to runnable example

https://stackblitz.com/edit/node-cppxmm?file=index.mdx

Steps to reproduce

1. Open reproducible link
2. run npx eslint ./index.mdx

Expected behavior

No error reported.

Actual behavior

/home/projects/node-cppxmm/index.mdx
  1:8  error  'MyForm' is defined but never used  no-unused-vars

Enabling eslint-plugin-react would fix the error.

Runtime

No response

Package manager

No response

OS

No response

Build and bundle tools

No response

[chenxsan]

All right, here's why eslint-plugin-react would suppress the error:

1. https://github.com/jsx-eslint/eslint-plugin-react/blob/13d23b898de83557861b0e8bd419477f122e4839/lib/rules/jsx-uses-vars.js#L55

According to react/jsx-uses-vars, ESLint has stopped detecting variables used in JSX.

Which means if we're going to use eslint-plugin-mdx without eslint-plugin-react, we will be sured to run into this no-unused-vars error.

Hence I would suggest adding a notice to the readme, e.g.,

It's required to enable `eslint-plugin-react` to use alongside `eslint-plugin-mdx`.
Otherwise you could run into this `no-unused-vars` error.

Another option is to make the rule of react/jsx-uses-vars into mdx/recommended, but I'm not sure it's a good idea.

[kfayelun]

I have this issue, all my Storybook MDX components like Meta, Canvas, Story gives me a no-unused-vars error that I have downgraded to warning in my eslint config. I tried adding eslint-plugin-react to my config as described above, but that did not fix it. Is this the correct way to do that:

module.exports = {
  root: true,
  extends: [
    "eslint:recommended",
    "plugin:storybook/recommended",
    "turbo",
    "prettier",
  ],
  env: {
    browser: true,
    node: true,
    es2021: true,
  },
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  overrides: [
    {
      files: ["*.ts", "*.tsx"],
      parser: "@typescript-eslint/parser",
      extends: [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:storybook/recommended",
      ],
      plugins: ["@typescript-eslint"],
      rules: {
        "@typescript-eslint/no-var-requires": "warn",
      },
    },
    {
      files: ["*.md", "*.mdx"],
      extends: ["plugin:react/recommended", "plugin:mdx/recommended"],
      settings: {
        "mdx/code-blocks": false,
      },
      rules: {
        "no-unused-vars": "warn", // TODO: not sure how to fix this one for MDX
      },
    },
  ],
};

[JounQin]

@kfayelun Please provide a minimal and runnable reproduction.

[JounQin]

Maybe we should mark eslint-plugin-react as an optional peer dependency.

[kfayelun]

Hey! Working on a big monorepo, producing a runnable repro is quite the task so I had to put this on the backlog. And now... when I went back to check, this isn't happening anymore :( I've restructured so much in this repo, so I'm not sure what did it. I'm sorry, I know this is not very helpful.

[levino]

I have this or a very similar issue in one of my repos. PR. Failing CI Job. I guess the best way of action would be to get @typescript-eslint to understand the usage of imports in .mdx files. But I have not idea how complex that would be.

[JounQin]

@levino Sorry I didn't notice your comment previously, did you try to install eslint-plugin-react as this issue described?