How To Use Import Inside Eslintrc File?

I'm trying to use imported object to setup some restrictions for globals inside .eslintrc.js file, but import doesnt work. How can i make dynamic eslint config? import {loadedGlob

Solution 1:

How to use import inside eslintrc file?

ESLint currently doesn't support a configuration file by the name of eslintrc so I'm going to assume you mean .eslintrc.js.

ESLint currently does not support ES Modules as you can see from the JavaScript (ESM) bullet item on their configuration file formats documentation.

If you are willing to install another dependency here is how you can use import inside of .eslintrc.js:

1. Install the esm module, npm i esm -D (Here I'm choosing as a devDependency).
2. Create a new file as a sibling to .eslintrc.js called .eslintrc.esm.js.
3. Inside of .eslintrc.esm.js include your ESLint configuration. Here you can use import and you should export your configuration as export default { // Your config }.
4. Inside .eslintrc.js include the following code:

const _require = require('esm')(module)
module.exports = _require('./.eslintrc.esm').default

Now you should be able to run eslint as usual. A bit clunky with the extra file, but you can organize them in a directory if you like and use the --config option of eslint to point to the new location.

Solution 2:

You might notice that you are using the old syntax when exporting your object. You could try using require() instead of import.

Alternatively, you could look into Shareable Configs.