What Does Import/Resolver Do In. Eslintrc. Js File?

Question

I have implemented yarn berry in my project instead of using node_modules.

After I migrate yarn berry (yarn-3.1.1 version), the eslint error below started to occur in a file, at the top of import statement which is import react from 'React'

Resolve error: unable to load resolver "node".eslintimport/namespace
Resolve error: unable to load resolver "node".eslintimport/no-extraneous-dependencies
Resolve error: unable to load resolver "node".eslintimport/default
Resolve error: unable to load resolver "node".eslintimport/no-duplicates
Resolve error: unable to load resolver "node".eslintimport/order
Resolve error: unable to load resolver "node".eslintimport/no-self-import
Resolve error: unable to load resolver "node".eslintimport/no-cycle
Resolve error: unable to load resolver "node".eslintimport/no-relative-packages
Resolve error: unable to load resolver "node".eslintimport/no-named-as-default

Before I migrate yarn berry, these errors have never been occurred.

However, when I added typescript object has project: 'tsconfig.json' inside of import/resolver like this:

  settings: {
    'import/resolver': {
      typescript: { // here
        project: 'tsconfig.json', 
      },
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
    },
    'import/parsers': {
      '@typescript-eslint/parser': ['.ts', '.tsx'],
    },
    react: {
      version: 'detect',
    },
  },

The errors are gone.

I have solved the issue but I have question.

What does typescript option inside import/resolver do with yarn berry?

Accepted Answer

The import/resolver is for letting ESLint understand the project's setup in regard to paths etc.

If I'm not mistaken, it is used by this dependency:

Answer 2

It's used by the import plugin (and more generally, x/y in ESLint config means x is the plugin name) and documented at :

With the advent of module bundlers and the current state of modules and module syntax specs, it's not always obvious where import x from 'module' should look to find the file behind module.

...

However, webpack allows a number of things in import module source strings that Node does not, such as loaders (import 'file!./whatever') and a number of aliasing schemes, such as externals: mapping a module id to a global name at runtime (allowing some modules to be included more traditionally via script tags).

In the interest of supporting both of these, v0.11 introduces resolvers.

typescript is another resolver, already linked in the other answer:

This plugin adds TypeScript support to eslint-plugin-import (Or maybe you want to try eslint-plugin-i for faster speed)

This means you can:

import/require files with extension .cts/.mts/.ts/.tsx/.

Use paths defined in tsconfig.json

Prefer resolving @types/* definitions over plain .js/.jsx

Multiple tsconfigs support just like normal imports/exports fields support in package.json

What Does Import/Resolver Do In. Eslintrc. Js File?

2 Answers

Must Read

Your Answer

James H. Sterling

What Does Import/Resolver Do In. Eslintrc. Js File?

2 Answers

Must Read

Your Answer

Sign up or log in

Post as a guest

James H. Sterling