EugeneNikulnikov commented 2 years ago

Initial checklist

[X] I read the support docs
[X] I read the contributing guide
[X] I agree to follow the code of conduct
[X] I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

1.17.0

Link to runnable example

https://codesandbox.io/s/mutable-browser-gc2n4q?file=/pages/index.mdx

Steps to reproduce

When I try to add markup as common text in a table the parser fails and won't continue finding issues on the rest of the document. I tried different options. All of these variants will give an error:

<td>`<div>`</td>

<div><p></div>

<td><HelloWorld></td>

<td>`<HelloWorld>`</td>

<td>\<HelloWorld></td>

My table I want to add:

<table>
  <tbody>
    <tr>
      <td>**Name**</td>
      <td>**Type**</td>
    </tr>
    <tr>
      <td>`<div>`</td>
      <td>block</td>
    </tr>
    <tr>
      <td>`<HelloWorld>`</td>
      <td>custom component</td>
    </tr>
  </tbody>
</table>

Eslint Config

My .eslintrc.json (I use overrides for all settings and rules for mdx files)

Overrides:

  "overrides": [
    {
      "files": "*.mdx",
      "parser": "eslint-mdx", // enable `eslint-mdx` manually if it does not work
      "extends": "plugin:mdx/recommended",
      "settings": {
        // optional, if you want to lint code blocks at the same time
        "mdx/code-blocks": true,
        "mdx/no-unused-expressions": true,
        "mdx/no-jsx-html-comments": false,
        // optional, if you want to disable language mapper, set it to `false`
        // if you want to override the default language mapper inside, you can provide your own
        "mdx/language-mapper": {}
      },
      "plugins": ["prettier", "mdx"],
      "rules": {
        "semi": 0,
        "max-len": "off",
        "react/jsx-max-props-per-line": "off",
        "no-tabs": "off",
        "react/jsx-no-undef": "off",
        "react/jsx-tag-spacing": [
          "error",
          {
            "closingSlash": "never",
            "beforeSelfClosing": "allow",
            "afterOpening": "never",
            "beforeClosing": "never"
          }
        ]
      },
      "parserOptions": {
        "ignoreRemarkConfig": false
      },
      "ecmaFeatures": {
        "jsx": true
      }
    }
  ],

Extends:

  "extends": [
    "eslint:recommended",
    "airbnb",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:import/warnings",
    "plugin:jsx-a11y/recommended",
    "next/core-web-vitals",
    "plugin:mdx/recommended"
  ],

Expected behavior

To be able to add a markup as text and the parser shouldn't try to parse them as content.

Actual behavior

Eslint fails and doesn't continue linting the file when it encounters a code block with a nested tag in backquotes.

8:12  error  Parsing error: JSX element 'div' has no corresponding closing tag

Runtime

Node v16

Package manager

yarn v1

OS

macOS

Build and bundle tools

Next.js

JounQin commented 2 years ago

Please try latest v2.0.0.next.1