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/"]
}
}
},
...

Next import/no-unresolved eslint nextjs module path

I am using module import from next.
Trying to import a component like so.
import Navbar from '#/components/Navbar/Navbar';
When I run npm run lint. I get the following error.
1:20 Error: Unable to resolve path to module '#/components/Navbar/Navbar'. import/no-unresolved
This is my jsconfig.json
"compilerOptions": {
"baseUrl": ".",
"paths": {
"#/*": ["./src/*"],
"#/components/*": ["components/*"],
"#/pages/*": ["pages/*"],
"#/styles/*": ["styles/*"]
}
}
}
This is eslintrc.json
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 11,
"sourceType": "module"
},
"settings": {
"react": {
"version": "detect"
},
"import/resolver": {
"alias": {
"map": [
["#components", "./components/*"],
["#images", "./public/*"],
["#/pages/*", "pages/*"],
["#/styles/*", "styles/*"]
],
"extensions": [".js", ".jsx"]
}
}
},
"plugins": ["react", "react-hooks", "jest"],
"rules": {
"react/jsx-props-no-spreading": 0,
"react/react-in-jsx-scope": "off",
"import/extensions": "off",
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"react/display-name": 1,
"jest/no-disabled-tests": "warn",
"jest/no-focused-tests": "error",
"jest/no-identical-title": "error",
"jest/prefer-to-have-length": "warn",
"jest/valid-expect": "error",
"import/no-unresolved": [2, { "caseSensitive": false }]
}
}
I have tried many solutions from here and here here. Does not seem to work.

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 ?

Visual Studio Code "Cick-Through / Go-To" does not work with path aliases in jsconfig.json (and Next.js)

I am running a next.js project, as the project grew my imports became harder and harder to read.
Which is why I really love the path aliasing in jsconfig.json. Makes everything so much cleaner.
However, and that's a big however, I used to be able to click on any variable (or import) holding cmd and would be directly taken to the final definition. Same with getting a peek ("Code Peek") into the module/variable that I was importing.
This functionality did not seem to work with aliases. Installing module-resolver helped on the top level. I.e. click-through through is now possible for everything starting with #/Components but not the lower level aliases. Any Idea how to fix that?
Caveats:
I know I should, but I am currently not yet using es-lint,
nor am I explicitly using webpack (I know next.js uses it under the hood)
Plain Javascript (no typescript)
Those tools are surely useful, but I want to keep the additional tooling to a minimum right now.
Configs:
This is my jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"#/Components/*": ["components/*"],
"#/Concepts/*": ["components/Concepts/*"],
...
}
}
}
this is my .babelrc
{
"presets": ["next/babel"],
"plugins": [
["styled-components", { "ssr": true }],
["module-resolver", {
"root": ["."],
"alias": {
"#/Components": "components",
"#/Concepts": "components/Concepts",
...
}
}]
]
}
I am importing like this (both imports work):
Click-through works:
import { Bold } from "#/Components/styles";
Click-through does not work:
import { DefaultMarginSlider, Formula } from "#/Concepts/utils";
for completeness sake here is my package.json

I got it working with the following config settings
jsconfig.json
{
"compilerOptions": {
"target": "es2020",
"module": "commonjs",
"allowSyntheticDefaultImports": true,
"baseUrl": "src",
"jsx": "react",
"noImplicitAny": false,
"paths": {
"components/*": [
"./components/*"
],
"utils/*": [
"./utils/*"
],
"UI/*": [
"./UI/*"
],
"assets/*": [
"./assets/*"
]
}
},
"exclude": ["node_modules"]
}
my .eslintec file looks like
{
"env": {
"browser": true,
"es6": true
},
"extends": [
"plugin:import/react",
"airbnb"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"settings": {
"import/resolver": {
"alias": {
"map": [
[
"UI",
"./src/UI"
],
[
"components",
"./src/components"
],
[
"assets",
"./src/assets"
]
],
"extensions": [
".js",
".jsx",
".svg",
".png"
]
},
"webpack": {
"config": "config/webpack.config.js"
}
}
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"parser": "babel-eslint",
"plugins": [
"react",
"react-hooks",
"import",
"resolver-alias"
],
"rules": {}
}
And there are the extra plugins I installed to get it working
eslint-import-resolver-alias
eslint-import-resolver-webpack
eslint-plugin-import
And this is my webpack config to resolve while building
resolve: {
modules: ['node_modules', paths.appNodeModules].concat(
modules.additionalModulePaths || []
),
extensions: paths.moduleFileExtensions
.map(ext => `.${ext}`)
.filter(ext => useTypeScript || !ext.includes('ts')),
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-dom': '#hot-loader/react-dom',
'components': path.resolve(__dirname, '../src/components'),
'assets': path.resolve(__dirname, '../src/assets'),
'UI': path.resolve(__dirname, '../src/UI'),
'utils': path.resolve(__dirname, '../src/utils'),
...(isEnvProductionProfile && {
'react-dom$': 'react-dom/profiling',
'scheduler/tracing': 'scheduler/tracing-profiling',
}),
...(modules.webpackAliases || {}),
},
plugins: [
PnpWebpackPlugin,
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
],
},
For next.js you can skip the above webpack config and eslint-import-resolver-webpack npm package. It will work fine.