[eslint-mdx] Make ESLint aware of common components of MDXProvider

[kelvindecosta]

Hello!

I am using an MDXProvider with a few components which are exported from a shortcodes local module.

Here is an example .mdx file using one of the components, Link:

<Link to="/">Click here to go back home</Link>

I get the following error:

    error  'Link' is not defined  react/jsx-no-undef

Clearly, ESLint has no idea about Link and the other shortcodes.
For the time being, I have set this rule to "warn" instead.

Is there a way I can add the components from the shortcodes module to my .eslintrc?
The react/jsx-no-undef rule has a allowGlobals option, so I am assuming this is possible.

Any help is greatly appreciated!

[JounQin]

Just add globals setting for those files.

https://eslint.org/docs/user-guide/configuring/language-options#using-configuration-files-1

If you're using mutilate components for some package, you can use the helper like following.

const { getGlobals } = require('eslint-plugin-mdx/lib/helpers')

module.exports = {
  overrides: [
    {
      files: '*.mdx',
      globals: getGlobals(require(path of package of components'), {
        // other globals
      })
    }
  ]
}

You can check the helper source at https://github.com/mdx-js/eslint-mdx/blob/master/packages/eslint-plugin-mdx/src/helpers.ts

[kelvindecosta]

Thank you, this is exactly what I was looking for!

[kelvindecosta]

Hello again @JounQin

I can't seem to fix it with getGlobals.
eslint-plugin-mdx/lib/configs/helpers is using ES6 exports and I get this error:

SyntaxError: Unexpected token 'export'

Moreover, I am using ES6 exports in my shortcodes.ts.
I hope that I can still use globals with it.

Again, any help is greatly appreciated!

[JounQin]

The location is eslint-plugin-mdx/lib/helpers in latest version and has been changed to commonjs format.

For shortcodes.ts, it's a ts problem.

[kelvindecosta]

Hey @JounQin

I decided to give this another attempt.

Your suggestion worked perfectly!

I had to make a few minor changes to how I imported the components into my .eslintrc.js.
It kept complaining about errors that are usually caused by importing files with es6 syntax.
Furthermore, I was using typescript and react, which meant I had to instruct require to use babel.

This is my final solution:

// Allows importing `es6`, `tsx`  etc. using `babel`
require("@babel/register")({
  presets: ["babel-preset-gatsby", "@babel/preset-typescript"], // Gatsby preset handles `react`
  extensions: [".js", ".jsx", ".ts", ".tsx"],
})

const { components } = require("./src/mdx-components") // an Object of all components

module.exports = {
  overrides: [
    {
      files: "*.mdx",
      globals: getGlobals(components),
    },
  ],
}

Thank you again for your help!