Parsing error: unknown jsx node #1433

JohnCasab · 2021-01-05T18:52:04Z

JohnCasab
Jan 5, 2021

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.

Answered by JohnCasab

Jan 8, 2021

Anybody that can help?

View full answer

ChristianMurphy · 2021-01-05T19:36:29Z

ChristianMurphy
Jan 5, 2021
Maintainer

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.

0 replies

JohnCasab · 2021-01-06T16:29:33Z

JohnCasab
Jan 6, 2021
Author

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?

2 replies

ChristianMurphy Jan 6, 2021
Maintainer

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 Jan 6, 2021
Maintainer

/cc @JounQin who may have additional insights.

JohnCasab · 2021-01-06T17:23:50Z

JohnCasab
Jan 6, 2021
Author

@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.

6 replies

JohnCasab Jan 6, 2021
Author

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

ChristianMurphy Jan 6, 2021
Maintainer

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

Then add .js to the first override 🙂

JohnCasab Jan 6, 2021
Author

Sorry @ChristianMurphy can you be more specific?

ChristianMurphy Jan 6, 2021
Maintainer

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 Jan 6, 2021
Author

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 · 2021-01-08T08:47:43Z

JohnCasab
Jan 8, 2021
Author

Anybody that can help?

2 replies

JounQin Jan 8, 2021
Collaborator

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

JohnCasab Jan 8, 2021
Author

Alright 👍

JounQin · 2021-01-08T09:22:16Z

JounQin
Jan 8, 2021
Collaborator

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

1 reply

JohnCasab Jan 8, 2021
Author

I get the same errors with and without it.

Omkar76 · 2023-10-22T13:49:34Z

Omkar76
Oct 22, 2023

Did you ever find a solution?

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

mdx-js

Parsing error: unknown jsx node #1433

{{title}}

Replies: 6 comments 11 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

mdx-js

Parsing error: unknown jsx node #1433

JohnCasab Jan 5, 2021

Replies: 6 comments · 11 replies

ChristianMurphy Jan 5, 2021 Maintainer

JohnCasab Jan 6, 2021 Author

ChristianMurphy Jan 6, 2021 Maintainer

ChristianMurphy Jan 6, 2021 Maintainer

JohnCasab Jan 6, 2021 Author

JohnCasab Jan 6, 2021 Author

ChristianMurphy Jan 6, 2021 Maintainer

JohnCasab Jan 6, 2021 Author

ChristianMurphy Jan 6, 2021 Maintainer

JohnCasab Jan 6, 2021 Author

JohnCasab Jan 8, 2021 Author

JounQin Jan 8, 2021 Collaborator

JohnCasab Jan 8, 2021 Author

JounQin Jan 8, 2021 Collaborator

JohnCasab Jan 8, 2021 Author

Omkar76 Oct 22, 2023

JohnCasab
Jan 5, 2021

Replies: 6 comments 11 replies

ChristianMurphy
Jan 5, 2021
Maintainer

JohnCasab
Jan 6, 2021
Author

ChristianMurphy Jan 6, 2021
Maintainer

ChristianMurphy Jan 6, 2021
Maintainer

JohnCasab
Jan 6, 2021
Author

JohnCasab Jan 6, 2021
Author

ChristianMurphy Jan 6, 2021
Maintainer

JohnCasab Jan 6, 2021
Author

ChristianMurphy Jan 6, 2021
Maintainer

JohnCasab Jan 6, 2021
Author

JohnCasab
Jan 8, 2021
Author

JounQin Jan 8, 2021
Collaborator

JohnCasab Jan 8, 2021
Author

JounQin
Jan 8, 2021
Collaborator

JohnCasab Jan 8, 2021
Author

Omkar76
Oct 22, 2023