Parsing Errors: Unterminated JSX contents when using details element

Subject of the issue

In VSCode, when using a details element I get the following error: “Parsing Errors: Unterminated JSX contents”.

I am pretty sure this is because of this plugin since it goes away if I remove the plugin from my ESLint config (bug then I have other errors 😉).

Here’s my ESLint config:

module.exports = {
    overrides: [
        {
            globals: {
                "props": true
            },
            files: ["*.mdx"],
            extends: ["plugin:mdx/recommended"],
            rules: {
                "semi": "off",
                "react/jsx-tag-spacing": "off",
                "max-len": "off",
                "react-hooks/rules-of-hooks": "off"
            }
        }
    ]
};

All the tags are closed. I try to paste the code but it doesn’t format well becaise it contains markdown.

The file is available here: https://github.com/gsoft-inc/sg-orbit/blob/master/packages/react-components/src/button/stories/custom-color-hover.mdx

Thank you for your help,

Patrick

Your environment

• OS: Windows 10
• Packages: “eslint”: “7.1.0”, “eslint-plugin-mdx”: “1.7.0”
• Env: node v13.11.0 yarn v1.22.4

Steps to reproduce

Tell us how to reproduce this issue. Please provide a working and simplified example.

🎉 BONUS POINTS for creating a minimal reproduction and uploading it to GitHub. This will get you the fastest support. 🎉

Expected behaviour

No error when using <details><summary>

Actual behaviour

What happens instead?

A Parsing Error

[satazor]

@JounQin it seems that both plugins are incompatible. I’ve tried to setup both with this config:

// .eslintrc.js
const markdownRecommended = require('eslint-plugin-markdown').configs.recommended;

module.exports = {
    root: true,
    env: {
        browser: true,
        node: true,
    },
    extends: [
        'eslint:recommended',
        'plugin:react/recommended',
    ],
    overrides: [
        {
            files: ['*.mdx'],
            extends: ['plugin:mdx/recommended'],
            plugins: ['markdown'],
            processor: 'markdown/markdown',
            parserOptions: markdownRecommended.overrides[0].parserOptions,
            rules: markdownRecommended.overrides[0].rules,
        },
    ],
};

However, only errors coming from eslint-plugin-markdown are reported. Once I comment the line with processor, only errors coming from eslint-mdx are reported. It seems both are incompatible.

Is there anything I’m missing?

[JounQin]

@satazor Sorry markdown code in jsx is not supported and not going to happen in v1, but it should be possible in v2.

And I tried to fix part of this issue in #273. What means the following will be able to be parsed.

<details><summary >Override element states</summary>

The previous code sample show how to specify a custom color for a `naked` button by using a `style` attribute. It works great to provide a basic property like a `background-color`. What about [element states](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) though? You can't specify an hover state with a `style` attribute.

Here's another technique to specify a custom color by using a few CSS classes and a [CSS variable](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). This technique leverage the ability to override a CSS variable of a stylesheet from the `style` attribute.

In the following example a React component render a button with a custom color `background-color` and a darker hover state by overriding the `--color` CSS variable from the `style` prop.

</details>