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?
2 Answers
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: https://www.npmjs.com/package/eslint-import-resolver-typescript
It's used by the import plugin (and more generally, x/y in ESLint config means x is the plugin name) and documented at https://github.com/import-js/eslint-plugin-import/tree/main?tab=readme-ov-file#resolvers:
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: https://www.npmjs.com/package/eslint-import-resolver-typescript
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/.d.cts/.d.mts/.d.ts
- 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
ncG1vNJzZmirpJawrLvVnqmfpJ%2Bse6S7zGiorp2jqbawutJobmltZGuAdYGOsJ%2BarF2ZvKa%2FjKKkqaeiqXqzsdKoo6%2BdomKxsHnIp2Seq5yeu7W%2BwmahrGWWnrmm