Parsing error: unknown jsx node

[JohnCasab]

Hello mdx community,
I have just startet using storybook, and to document the different components i'm using mdx files, so I figured that I should use eslint-mdx for linting.

Describe the Issue
Im getting thse errors when running yarn lint

Users/user/sys/sys2/design-system/src/button/button.stories.mdx
  3:1  error  Parsing error: unknown jsx node: " <Meta title=\"Building blocks/Components/Button\"/>"

/Users/user/Desktop/sys/sys2/src/table/basic.stories.mdx
  4  -1  error  Parsing error: Unexpected token <

/Users/user/Desktop/sys/sys2/src/table/multi.stories.mdx
  5  -1  error  Parsing error: Unexpected token <

.eslintrc.json:

{
    "env": {
        "node": true,
        "browser": true,
        "es2020": true,
        "commonjs": true,
        "jquery": true
    },
    "extends": [
        "airbnb-base",
        "plugin:mdx/recommended"
    ],
    "parserOptions": {
        "ecmaVersion": 7,
        "sourceType": "module"
    },
    "rules": {
    }
}

package.json:

{
  "name": "storybook",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "lint": "./node_modules/.bin/eslint '**/*.js' . --ext mdx"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^4.5.3",
    "html-react-parser": "^0.14.0",
    "jquery": "^3.5.1",
    "popper.js": "^1.16.1",
    "sass": "^1.29.0",
    "yarn": "^1.22.10"
  },
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@storybook/addon-actions": "^6.1.9",
    "@storybook/addon-docs": "^6.1.9",
    "@storybook/addon-essentials": "^6.1.9",
    "@storybook/addon-links": "^6.1.9",
    "@storybook/html": "^6.1.9",
    "@storybook/preset-scss": "^1.0.3",
    "babel-loader": "^8.1.0",
    "css-loader": "^5.0.1",
    "eslint": "^7.2.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-mdx": "^1.8.2",
    "react-is": "^16.13.1",
    "sass-loader": "^10.1.0",
    "storybook-addon-run-script": "^0.1.4",
    "style-loader": "^2.0.0"
  }
}

What I have tried
I tried to follow add this to my .eslintrc.json

"parserOptions": {
    "ecmaFeatures": {
        "jsx": true,
        "modules": true
    }
}

Then I get these errors:

/Users/user/Desktop/sys/sys2/src/button/button.stories.mdx
   1:1   error  Definition for rule 'react/jsx-no-undef' was not found                                       react/jsx-no-undef
   1:10  error  'Meta' is defined but never used                                                             no-unused-vars
   1:16  error  'Preview' is defined but never used                                                          no-unused-vars
   1:23  error  Unexpected trailing comma                                                                    comma-dangle
   1:32  error  '@storybook/addon-docs' should be listed in the project's dependencies, not devDependencies  import/no-extraneous-dependencies
   1:32  error  Strings must use singlequote                                                                 quotes
   3:50  error  Missing semicolon                                                                            semi
  40:11  error  Missing semicolon                                                                            semi
  47:11  error  Newline required at end of file but not found                                                eol-last
  47:11  error  Missing semicolon                                                                            semi

Which to me doesn't seem right, because Meta and Preview is used and asking me to put semicolon wierd places.

[ChristianMurphy]

This sounds like it is configuration related for the former error see mdx-js/eslint-mdx#230
for the latter see mdx-js/eslint-mdx#251 (comment) for react/jsx-no-undef, and mdx-js/eslint-mdx#182 for semi, the rest are likely tied to the former issue and having the parser configured.

[JohnCasab]

Hi @ChristianMurphy,
Thank you the answer.

So I changed my .eslintrc.json according to the 3 links you sent me.

From this:

{
    "env": {
        "node": true,
        "browser": true,
        "es2020": true,
        "commonjs": true,
        "jquery": true
    },
    "extends": [
        "airbnb-base",
        "plugin:mdx/recommended"
    ],
    "parserOptions": {
        "ecmaVersion": 7,
        "sourceType": "module"
    },
    "rules": {
    }
}

To this:

{
    "env": {
        "node": true,
        "browser": true,
        "es2020": true,
        "commonjs": true,
        "jquery": true
    },
    "extends": [
        "airbnb-base",
        "plugin:mdx/recommended"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true,
            "modules": true
        }
    },
    "overrides": [
        {
            "files": "*.mdx",
            "rules": {
                "semi": 0
            },
            // "parser": "eslint-mdx", // enable `eslint-mdx` manually if it does not work
            "extends": "plugin:mdx/recommended"
        }
    ],
    "rules": {
    }
}

But im still getting these errors:

/Users/user/Desktop/sys/sys2/src/button/button.stories.mdx
  1:1   error  Definition for rule 'react/jsx-no-undef' was not found                                       react/jsx-no-undef
  1:10  error  'Meta' is defined but never used                                                             no-unused-vars
  1:16  error  'Preview' is defined but never used                                                          no-unused-vars
  1:23  error  Unexpected trailing comma                                                                    comma-dangle
  1:32  error  '@storybook/addon-docs' should be listed in the project's dependencies, not devDependencies  import/no-extraneous-dependencies
  1:32  error  Strings must use singlequote                                                                 quotes

Did I miss something?

[ChristianMurphy]

You probably want to have AirBnB and MDX each only for specific filetypes

{
    "env": {
        "node": true,
        "browser": true,
        "es2020": true,
        "commonjs": true,
        "jquery": true
    },
    "overrides": [
        {
            "files": "*.jsx",
            "extends": "airbnb-base",
            "parserOptions": {
               "ecmaFeatures": {
               "jsx": true,
               "modules": true
            }
          },
        },
        {
            "files": "*.mdx",
            // "parser": "eslint-mdx", // enable `eslint-mdx` manually if it does not work
            "extends": "plugin:mdx/recommended"
        }
    ]
}

[ChristianMurphy]

/cc @JounQin who may have additional insights.

[JohnCasab]

@ChristianMurphy

When I substitute your eslintrc.json file with mine, I get the following error:

❯ yarn lint
yarn run v1.22.10
$ ./node_modules/.bin/eslint . --ext mdx

/Users/user/Desktop/sys/sys2/src/button/button.stories.mdx
  3  -1  error  Parsing error: Unexpected token <

/Users/user/Desktop/sys/sys2/src/table/basic.stories.mdx
  4  -1  error  Parsing error: Unexpected token <

/Users/user/Desktop/sys/sys2/src/table/multi.stories.md
  5  -1  error  Parsing error: Unexpected token <

✖ 3 problems (3 errors, 0 warnings)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[JohnCasab]

Yes I did, did not help. And I can see it dosent lint my .js files properly also, when I did substitution. :(

[ChristianMurphy]

And I can see it dosent lint my .js files properly also, when I did substitution

Then add .js to the first override 🙂

[JohnCasab]

Sorry @ChristianMurphy can you be more specific?

[ChristianMurphy]

https://eslint.org/docs/user-guide/configuring#disabling-rules-only-for-a-group-of-files
overrides apply only to matched files

"files": "*.jsx",

matches JSX, which I assumed you were using.
If you are also using JS and JSX, then match both

"files": ["*.jsx", "*.js"],

[JohnCasab]

alright I changed my eslintrc.json file from this to

{
    "env": {
        "node": true,
        "browser": true,
        "es2020": true,
        "commonjs": true,
        "jquery": true
    },
    "extends": [
        "airbnb-base"
    ],
    "parserOptions": {
        "ecmaVersion": 7,
        "sourceType": "module"
    },
    "rules": {
    }
}

To this:

{
    "env": {
        "node": true,
        "browser": true,
        "es2020": true,
        "commonjs": true,
        "jquery": true
    },
    "extends": [
        "airbnb-base",
        "plugin:mdx/recommended"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true,
            "modules": true
        }
    },
    "overrides": [
        {
            "files": ["*.jsx", "*.js","*.mdx"],
            "rules": {
                "semi": 0
            },
            // "parser": "eslint-mdx", // enable `eslint-mdx` manually if it does not work
            "extends": "plugin:mdx/recommended"
        }
    ],
    "rules": {
    }
}

More or less I get the same errors:

❯ yarn lint
yarn run v1.22.10
$ ./node_modules/.bin/eslint . --ext mdx

/Users/user/Desktop/sys/sys2/src/button/button.stories.mdx
  1:1   error  Definition for rule 'react/jsx-no-undef' was not found                                       react/jsx-no-undef
  1:10  error  'Meta' is defined but never used                                                             no-unused-vars
  1:16  error  'Preview' is defined but never used                                                          no-unused-vars
  1:23  error  Unexpected trailing comma                                                                    comma-dangle
  1:32  error  '@storybook/addon-docs' should be listed in the project's dependencies, not devDependencies  import/no-extraneous-dependencies
  1:32  error  Strings must use singlequote                                                                 quotes

/Users/user/Desktop/sys/sys2/src/table/basic.stories.mdx
  1:1   error  Definition for rule 'react/jsx-no-undef' was not found                                       react/jsx-no-undef
  1:8   error  Expected a line break after this opening brace                                               object-curly-newline
  1:10  error  'Meta' is defined but never used                                                             no-unused-vars
  1:16  error  'Canvas' is defined but never used                                                           no-unused-vars
  1:24  error  'Preview' is defined but never used                                                          no-unused-vars
  1:33  error  'Story' is defined but never used                                                            no-unused-vars
  1:39  error  Expected a line break before this closing brace                                              object-curly-newline
  1:46  error  '@storybook/addon-docs' should be listed in the project's dependencies, not devDependencies  import/no-extraneous-dependencies
  1:46  error  Strings must use singlequote                                                                 quotes
  2:8   error  'parse' is defined but never used                                                            no-unused-vars
  2:19  error  Strings must use singlequote                                                                 quotes

/Users/user/Desktop/sys/sys2/src/table/multi.stories.md
  1:1   error  Definition for rule 'react/jsx-no-undef' was not found                                       react/jsx-no-undef
  1:8   error  Expected a line break after this opening brace                                               object-curly-newline
  1:10  error  'Meta' is defined but never used                                                             no-unused-vars
  1:16  error  'Canvas' is defined but never used                                                           no-unused-vars
  1:24  error  'Preview' is defined but never used                                                          no-unused-vars
  1:33  error  'Story' is defined but never used                                                            no-unused-vars
  1:39  error  Expected a line break before this closing brace                                              object-curly-newline
  1:46  error  '@storybook/addon-docs' should be listed in the project's dependencies, not devDependencies  import/no-extraneous-dependencies
  1:46  error  Strings must use singlequote                                                                 quotes
  2:8   error  'parse' is defined but never used                                                            no-unused-vars
  2:19  error  Strings must use singlequote                                                                 quotes
  3:8   error  Unexpected use of file extension "js" for "./table-collapse.js"                              import/extensions
  3:8   error  Strings must use singlequote                                                                 quotes

✖ 30 problems (30 errors, 0 warnings)
  11 errors and 0 warnings potentially fixable with the `--fix` option.

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[JohnCasab]

Anybody that can help?

[JounQin]

You should post a new issue to eslint-mdx with a minimal reproduction.

[JohnCasab]

Alright 👍

[JounQin]

I noticed that there is leading whitespace at <Meta title="Building blocks/Components/Button"/>.

[JohnCasab]

I get the same errors with and without it.

[Omkar76]

Did you ever find a solution?