Parsing error: <filename.mdx>: Unexpected token

[jjoselv]

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]

Your posted content is unreadable, please format it correctly first, thx.

[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]

With the overrides I managed to make it work via command line, but VS Code MDX extension reports different from command line (basically it appears to be ignoring the yaml config)

[JounQin]

Maybe you just need to reload VSCode.

[jjoselv]

Nope, still "No Problems" in VS Code, when from the command line it says:
42 problems (22 errors, 20 warnings)
12 errors and 5 warnings potentially fixable with the '--fix' option.

[JounQin]

Then I have no idea what is happening, I can't reproduce it, and no helpful information.

[jjoselv]

What can I give you to diagnose it?

[jjoselv]

Hi again
I've spent near 5 hours trying to make eslint extension for VSCode to run in debug mode to be able to pass a log to you, but no luck 😢 I can give you the settings that I have in my settings.json

 "eslint.probe": [
        "markdown",
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact",
        "html",
        "vue",
        "mdx"
    ],
    "eslint.options": {
        "extensions": [".js", ".jsx", ".md", ".mdx", ".ts", ".tsx"],
    },
    "eslint.debug": true

[jjoselv]

Hm, the debug mode works when typing on a js file, but doesn't when doing it on a mdx file 😩

[jjoselv]

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

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

[JounQin]

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

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

Wow, that's weird, it is said eslint.validate is a legacy option.

eslint.validate - an array of language identifiers specifying the files for which validation is to be enforced. This is an old legacy setting and should in normal cases not be necessary anymore. Defaults to ["javascript", "javascriptreact"].

Maybe we should report it in vscode-eslint.

[jjoselv]

True.
Thanks for sticking and for opening the issue! And for the understanding and patience throughout this issue, very much appreciated 👍🏻

[GorvGoyl]

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

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

Doesn't that slow it down when saving file? for me it gets stuck saying Saving 'index.mdx': Getting code actions from ''ESLint', 'Tailwind CSS IntelliSense'' and takes 10-20 seconds to save.

[Halip26]

I have the same problems & I dont know how to fix it :(