Develop Reference

Unable to resolve path to module (import/no-unresolved) in eslint

I'm having mix codebase of Typescript and Javascript with monorepo configuration with Lerna in create-react-app. I'm importing TS files in my JS files with tsconfig.json setup, but getting an error with eslint.
Currently, my .eslintrc.json looks like this, I've newly added the settings here, but it didn't seem to work
{
"env": {
"browser": true,
"es2021": true,
"jest": true
},
"extends": [
"plugin:react/recommended",
"airbnb",
"prettier",
"plugin:prettier/recommended",
"plugin:import/typescript"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": ["react", "prettier"],
"rules": {
"react/react-in-jsx-scope": "off",
"react/jsx-filename-extension": [
1,
{ "extensions": [".js", ".jsx", ".ts", ".tsx"] }
],
"prettier/prettier": "error",
"jsx-a11y/click-events-have-key-events": "off",
"import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
"react/function-component-definition": [
2,
{
"unnamedComponents": "arrow-function"
}
],
"import/no-relative-packages": "off"
},
"ignorePatterns": ["config-overrides.js", "*.json", "*.md", "*.css"],
"settings": {
"import/resolver": {
"typescript": true,
"node": true
},
"import/parsers": {
"#typescript-eslint/parser": [".ts", ".tsx"]
}
}
}

try adding
#typescript-eslint/eslint-plugin, #typescript-eslint/parser plugins
update .eslintrc.json
...
"parser": "#typescript-eslint/parser",
"parserOptions": {
"project": "tsconfig.json",
"sourceType": "module"
},
"plugins": ["eslint-plugin-import", "#typescript-eslint", "react", "react-hooks", "react-native", "jsx-a11y"],
"settings": {
"import/extensions": [".js", ".jsx", ".ts", ".tsx"],
"import/parsers": {
"#typescript-eslint/parser": [".ts", ".tsx"]
},
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"],
"moduleDirectory": ["node_modules", "src/"]
}
}
},
...

eslint import aliases not working eslint-plugin-import

my .eslintrc.json file located at ./
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:import/errors",
"plugin:import/warnings"
],
"overrides": [
],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"rules": {
},
"settings": {
"import/resolver": {
"alias": {
"root": ["./"],
"map": [
["#", "./src"]
],
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
}
}
My foo.js file located in ./src. As you can see it is not suggesting any files. Why?

A rule from .eslintrc.json isn't being respected, but the same rule in an eslint comment is

The rule "react-redux/useSelector-prefer-selectors" isn't being respected when I put it in my .eslintrc.json, but other rules are. However, when I put
/* eslint react-redux/useSelector-prefer-selectors: "off" */
At the top of the offending file, the error goes away.
My .eslintrc.json file (In my root directory):
{
"env": {
"browser": true,
"commonjs": true,
"es2020": true,
"node": false
},
"extends": [
"airbnb",
"react-app",
"airbnb/hooks",
"eslint:recommended",
"plugin:react/recommended",
"plugin:react-hooks/recommended",
"plugin:react-redux/recommended"
],
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"plugins": [
"react",
"react-redux"
],
"rules": {
"indent": [
"warn",
"tab"
],
"no-tabs": "off",
"no-unused-vars": "warn",
"consistent-return": "warn",
"no-mixed-spaces-and-tabs": 0,
"react/prop-types": 0,
"unused-imports/no-unused-imports": "off",
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"react-redux/useSelector-prefer-selectors": "off",
"react/jsx-indent": "off",
"react/jsx-filename-extension": "off",
"react/jsx-no-useless-fragment": "warn"
}
}

Figured it out thanks to a comment by #guiwme5. While I don't use vscode, I do use WebStorm - and it seems they both have the same issue - they don't reload .eslintrc.* files when they change.
So if you stumble across this trying to figure out why your IDE isn't respecting your eslint rules, try restarting the IDE.

How to resolve "import/no-unresolved" in ESLint for import files! for javascript and nodejs?

THIS is my problems
Eslint cannot find the file's location?
This is the error!
Thank You in advance for the help!

I was having this problem!
Eslint cannot find the file's location because the path of the file is not fully defined, we must specify them in the configuration file.
The reference exists and it works, the problem is that eslint cannot find it. I fix it as follows!
Unable to resolve the module path './Board'. note that Board does not have an extension, that's the problem! We just need to specify eslint how to resolve the extensions and voila.
I assume eslint installed and has problems integrating express node and react js projects
You can use the automatic configuration of eslint follow the steps and when it is installed configure your .eslint.json file add the description of settings
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx"],
"moduleDirectory": ["node_modules", "src/"]
}
}
}
.eslintrc.json the full file look like:
{
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": ["plugin:import/recommended", "plugin:react/recommended", "standard"],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": ["react"],
"rules": {
"semi": [2, "always"],
"comma-dangle": [
"error",
{
"arrays": "only-multiline",
"objects": "only-multiline",
"imports": "only-multiline",
"exports": "only-multiline",
"functions": "only-multiline"
}
],
"space-before-function-paren": 0,
"spaced-comment": [
"error",
"never",
{
"line": {
"markers": ["/"],
"exceptions": ["-", "+"]
},
"block": {
"markers": ["!", "-", "+"],
"exceptions": ["*"],
"balanced": true
}
}
]
},
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx"],
"moduleDirectory": ["node_modules", "src/"]
}
}
}
}
https://eslint.org/docs/user-guide/getting-started

How to fix import/order error with tslint's

I have the following imports in my file nodejs:
import config from 'config';
import { PassportStatic } from 'passport';
import rootPath from './handlers/rootPath';
import SSOCallback from './handlers/SSOCallback';
import authFailure from './handlers/authFailure';
import ensureAuthenticated from '../modules/auth/ensureAuthenticated';
import APIConnect from './handlers/apiConnect';
import express = require('express');
This is the tslint.json file I am using:
{
"parser": "#typescript-eslint/parser",
"env": {
"es6": true,
"node": true,
"jest/globals": true,
"browser": true
},
"parserOptions": {
"sourceType": "module",
"ecmaVersion": 2019,
"project": "tsconfig.json",
"ecmaFeatures": {
"jsx": true
}
},
"extends": [
"airbnb-base",
"plugin:#typescript-eslint/recommended",
"prettier/#typescript-eslint",
"plugin:prettier/recommended",
"plugin:#typescript-eslint/recommended-requiring-type-checking",
"plugin:import/errors",
"plugin:import/warnings",
"plugin:import/typescript",
"plugin:react/recommended"
],
"plugins": ["prettier", "jest"],
"rules": {
"no-console": 0,
"no-param-reassign": 0,
"prettier/prettier": "error",
"no-underscore-dangle": [
"error",
{
"allow": ["__get__", "__set__"]
}
],
"import/extensions": [
"error",
"ignorePackages",
{
"js": "never",
"jsx": "never",
"ts": "never",
"tsx": "never"
}
]
},
"settings": {
"react": {
"version": "detect"
}
}
}
when i run npm run lint command i get the following Error:
8:1 error `express` import should occur before import of `./handlers/rootPath` import/order
i tried to move line 8 before import `./handlers/rootPath, but when i save it automatically git back to line 8.
Any idea how to fix it ?