Parsing error: <filename.mdx>: Unexpected token

Subject of the issue

I am receiving this error with a file as simple as this:

`

Menu List

Let’s define a story for our TableRowMenu component: error: #####/stories/TableRowMenu.stories.mdx 1:0 error Parsing error: #####/TableRowMenu.stories.mdx: Unexpected token (1:0)

1 | # Menu List | ^ 2 | 3 | Let’s define a story for our TableRowMenu component: 4 | `

Additionaly, I cannot manage to set VSCode to read the mdx files

Version of the plugin: v0.2.2

Settings: “eslint.options”: { “lintFiles”: [“./src/", "./stories/”], “extenstions”: [“.js”, “.jsx”, “.md”, “.mdx”, “.ts”, “.tsx”] }, “eslint.probe”: [ “javascript”, “javascriptreact”, “typescript”, “typescriptreact”, “html”, “vue”, “markdown”, “mdx” ]

Your environment

• OS: Mac BigSur
• Packages: eslint: ^7.13.0, eslint-plugin-mdx: ^1.8.2, @babel/core: ^7.12.3, @babel/parser: ^7.12.5
• Env: node: v12.18.2, npm: v6.14.5

Steps to reproduce

I launch this command: eslint --config .eslintrc.yml --ext .js,.jsx,.mdx "src/" "stories/"

The .eslintrc.yml:

`

extends:

• plugin:react/recommended
• airbnb-base
• plugin:mdx/recommended
• plugin:jsx-a11y/recommended
• plugin:react-hooks/recommended
• plugin:jest-dom/recommended env: browser: true amd: true jquery: true es6: true node: true jest: true

settings: react: version: latest

parser: ‘@babel/eslint-parser’

parserOptions: ecmaVersion: 6 sourceType: ‘module’ ecmaFeatures: jsx: true experimentalDecorators: true

globals: DEV: true SERVER: true

plugins:

• react
• jest
• jest-dom rules: max-len: [ 1, 120, 2, { ignoreComments: true, ignoreUrls: true, ignoreRegExpLiterals: true, ignoreStrings: true, ignoreTemplateLiterals: true, }, ] quote-props: [2, ‘as-needed’] radix: 0 space-infix-ops: 1 default-case: 0 no-else-return: 0 no-param-reassign: 0 semi: [2, ‘always’] func-names: 0 object-shorthand: [1, ‘always’] quotes: [2, ‘single’, { avoidEscape: true, allowTemplateLiterals: true }] indent: [2, 2, { SwitchCase: 1 }] no-tabs: 0 no-template-curly-in-string: 0 no-undef: 2 eqeqeq: [2, ‘smart’] no-useless-concat: 0 no-plusplus: 0 no-empty: 2 one-var-declaration-per-line: 0 one-var: 0 comma-dangle: 0 prefer-arrow-callback: 1 eol-last: 1 no-underscore-dangle: 0 consistent-return: 0 no-shadow: 2 prefer-const: 1 no-loop-func: 1 no-continue: 0 prefer-rest-params: 1 no-nested-ternary: 1 no-prototype-builtins: 0 no-restricted-properties: 0 no-unused-expressions: [1, { allowTernary: true, allowShortCircuit: true }] no-multi-assign: 0 no-case-declarations: 1 guard-for-in: 0 no-restricted-syntax: 0 strict: 0 no-mixed-operators: [2, { allowSamePrecedence: false }] global-require: 0 import/no-dynamic-require: 0 newline-per-chained-call: 0 spaced-comment: 1 class-methods-use-this: 0 no-cond-assign: 2 no-unused-vars: [2, { ‘vars’: ‘local’, ‘args’: ‘none’, ‘ignoreRestSiblings’: true }] react/prop-types: [2, { ‘ignore’: [‘children’] }] curly: 2 jsx-quotes: [1, ‘prefer-single’] no-constant-condition: 2 valid-typeof: 2 no-catch-shadow: 2 import/no-extraneous-dependencies: 0 import/first: 0 import/prefer-default-export: 0 import/no-webpack-loader-syntax: 0 import/no-unresolved: 0 import/extensions: 0 import/no-duplicates: 0 import/no-named-as-default: 0 arrow-parens: 0 object-curly-newline: 0 operator-linebreak: 0 implicit-arrow-linebreak: 0 function-paren-newline: 0 space-before-function-paren: 0 no-warning-comments: [1, { ‘terms’: [‘fixme’]}] `

Expected behaviour

I think it should not through an error

Actual behaviour

The error happens

[JounQin]

I can imagine this is a usage question.

.mdx files require eslint-mdx as parser, but other preset overrides mdx’s recommended config, so the following should do the trick:

{
  overrides: [
    {
      files: '*.mdx',
      parser: 'eslint-mdx'
    }
  ]
}

[jjoselv]

OH! It started working when I added this to the settings.json:

"eslint.validate": [
        "mdx",
        "markdown",
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact",
        "html",
        "vue"
    ],