Parsing Errors: Unterminated JSX contents when using details element

[patricklafrance]

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 The PR at #208 removed the ability to validate JS inside code blocks, such as js or jsx. I would want to validate JS code inside it as well. What's the reason for removing it?

[JounQin]

@JounQin The PR at #208 removed the ability to validate JS inside code blocks, such as js or jsx. I would want to validate JS code inside it as well. What's the reason for removing it?

That PR has been closed.

And code block is intended to be ignored because they're not source code but something like string literal. But if you want to lint code blocks, maybe you can try eslint-plugin-markdown.

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

[satazor]

Let me know if you want me to create a new issue.

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