.vue files cause parsing error after enabling plugin:mdx/recommended

[scscgit]

Subject of the issue

After enabling "plugin:mdx/recommended" extension in .eslintrc.js, .vue files of a Vue project suddenly start incorrectly reporting syntax error during eslint --ext .js,.ts,.vue,.mdx --ignore-path .gitignore ., even though this extension shouldn't affect .vue files at all (at least I wasn't able to find anything similar in provided documentations after hours of searching).

/sandbox/components/IconLink.vue
  22:8  error  Parsing error: '}' expected

/sandbox/components/Logo.vue
  3:4  error  Parsing error: Identifier expected

/sandbox/layouts/default.vue
  9:13  error  Parsing error: '}' expected

/sandbox/pages/about.vue
  15:14  error  Parsing error: '}' expected

/sandbox/pages/index.vue
  4:12  error  Parsing error: Identifier expected

✖ 5 problems (5 errors, 0 warnings)

Your environment

• OS: Windows 10, reproducible in codesandbox environment
• Packages:

"devDependencies": {
    "@nuxt/typescript-build": "^2.0.3",
    "@nuxtjs/eslint-config-typescript": "^5.0.0",
    "@nuxtjs/eslint-module": "^3.0.1",
    "eslint": "^7.14.0",
    "eslint-config-prettier": "^6.15.0",
    "eslint-plugin-mdx": "^1.8.2",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-prettier": "^3.1.4",
    "prettier": "^2.2.1"
  }

• Env: yarn --version is 1.22.4

Steps to reproduce

1. Open https://codesandbox.io/s/modest-bird-4p917?file=/.eslintrc.js
   -> A sample Nuxt project with minor modifications and additional (eslint) dependencies
2. Run yarn lint in a new terminal

Expected behaviour

Documentation of this library claims that it only affects .mdx files, so there should be no new sudden errors.

• (Unrelated note: is there any chance you could provide a recommended setup example for Nuxt projects that use storybook module, to let new users benefit from immediate compatibility with zero-configuration project and pre-configured TS/eslint/prettier or even remark-lint? A working example would immensely help us with debugging; plus it'd be also nice if you had a CI test that lints a sample project, so that we could send a repro PR and have GitHub Actions execute it.)

Actual behaviour

The valid .vue files fail on lint. If you remove "plugin:mdx/recommended" from .eslintrc.js and try again, this time there's no error.

[JounQin]

.vue and .mdx requires different parsers, use overrides of eslint instead then.

[scscgit]

Is this the correct setup then, without including 'plugin:mdx/recommended' under eslintrc.js-level extends, or should extends: 'plugin:mdx/overrides', be used instead under overrides (because no current example mentions recommended under overrides this way)?

  overrides: [
    {
      files: ['*.mdx'],
      extends: 'plugin:mdx/recommended',
    },
  ],

Could you please also elaborate on that by pointing me to the place in documentation where this is explained? I haven't found it in README#usage except some mentions of older versions, and I'd really appreciate if this could be covered for new users in some quick start section to serve as a reference, as the guide seems to assume at the moment that we don't combine multiple eslint extensions. Also is there a reason why anyone would prefer the extends usage as illustrated by the first README (Usage 1. i.) example, and are you sure that the inclusion of .vue files by default is indeed a correct behavior? (Plus I'm getting a Definition for rule 'react/jsx-no-undef' was not found with this configuration, so I can't use it anyway.) Thanks very much for your time!

[JounQin]

Sorry for your confusing, the document could be improved in favor of cases like yours.

When you are using some other parsers, you'd better to use overrides to separate them without conflicts, what means you can only enable plugin:mdx/recommended for .mdx files, and plugin:vue/recommended for .vue files.

[jackkrone]

@scscgit to answer your question: yes that's what you need to do. If it doesn't work, perhaps also install eslint-mdx and specify it as the parser in the overrides settings.

If you are using typescript and specifically the plugin @typescript-eslint/recommended-requiring-type-checking, then you will need to add a second object to the overrides array with the following:

    {
      "files": [".tsx", ".ts"],
      "extends": "plugin:@typescript-eslint/recommended-requiring-type-checking"
    },

In doing so, be sure to remove "plugin:@typescript-eslint/recommended-requiring-type-checking" from your top level "extends" statement. Check out this issue for more context: #92 (comment)