How to use "props" with eslint-mdx?

[PaulRBerg]

Suppose you have some code like this:

### {props.foo}

{props.foo} is a foo.

### {props.bar}

{props.bar} is a bar.

ESLint will throw the following errors:

  1:6  error  'props' is not defined  no-undef
  3:2  error  'props' is not defined  no-undef
  5:6  error  'props' is not defined  no-undef
  7:2  error  'props' is not defined  no-undef

How can I fix the linting errors?

[fauziralpiandi]

here are several approaches to solve this:

1. convert to a react component

export default function MyMdxComponent({foo, bar}) {
  return (
    <>
      ### {foo}

      {foo} is a foo.

      ### {bar}

      {bar} is a bar.
    </>
  )
}

this way, your variables are properly defined and eslint won't complain.

2. tells eslint that props is a valid global variable in mdx files:

// .eslintrc.js
module.exports = {
  // ...
  overrides: [
    {
      files: ['*.mdx'],
      globals: {
        props: 'readonly',
      },
    },
  ],
};

3. you can add eslint comments:

{/* eslint-disable no-undef */}

### {props.foo}

{props.foo} is a foo.

### {props.bar}

{props.bar} is a bar.

4. if you're using mdx-eslint-parser, you can disable the no-undef rule for mdx:

// .eslintrc.js
module.exports = {
  // ...
  overrides: [
    {
      files: ['*.mdx'],
      parser: 'mdx-eslint-parser',
      rules: {
        'no-undef': 'off'
      }
    }
  ]
}

i personally recommend approach 1 or 2, as they provide cleaner solutions while maintaining eslint's ability to detect other errors.

[remcohaszing]

Approach 1 is incorrect. You can’t embed MDX content inside a custom component.

The other approaches are all ok, but they are workarounds, not solutions. It’s ok to use props inside MDX. It’s a function-local variable, not a global. If this doesn’t work out of the box, it’s a bug. Feel free to report it to https://github.com/mdx-js/eslint-mdx/issues.

[JounQin]

if you're using mdx-eslint-parser, you can disable the no-undef rule for mdx

No idea what is mdx-eslint-parser, maybe you mean eslint-mdx?

[fauziralpiandi]

Approach 1 is incorrect. You can’t embed MDX content inside a custom component.

The other approaches are all ok, but they are workarounds, not solutions. It’s ok to use props inside MDX. It’s a function-local variable, not a global. If this doesn’t work out of the box, it’s a bug. Feel free to report it to https://github.com/mdx-js/eslint-mdx/issues.

I get it