Задать вопрос
BenderIsGreat34
@BenderIsGreat34
junior front-end

Почему ESLint выдает ошибку import/no-unresolved, а если убрать правило airbnb, то ошибка исчезает?

У меня есть импорты и оба выдают ошибку (вообще-то все импорты выдают ошибку, связано это с алиасами)
ESLint: Unable to resolve path to module 'Containers/settings/profile'.(import/no-unresolved)
. При этом вебшторм нормально понимает пути, все нормальное импортируется, можно ходить по ссылкам. Алисы прописаны в тсконфиге, но сейчас добавил airbnb и начались проблемы с импортами.
import BaseComponent from 'Components/BaseComponent';
import { childRole } from 'Containers/settings/profile';

есть конфигурация для ESLint & tsconfig
ESLint:
spoiler
{
  "root": true,
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript",
    "plugin:jsx-a11y/recommended",
    "airbnb",
    "airbnb/hooks",
    "eslint:recommended",
    "plugin:react/recommended",
    "prettier"
  ],
  "plugins": [
    "react",
    "jsx-a11y"
  ],
  "parser": "babel-eslint",
  "rules": {
    "import/no-unresolved": [
      1,
      {
        "commonjs": false,
        "amd": false
      }
    ]
  },
  "settings": {
    "import/resolver": {
      "node": {
        "path": ["src"]
      }
    }
  }
}

TSConfig
spoiler
{
  "compilerOptions": {
    /* Basic Options */
    // "incremental": true, /* Enable incremental compilation */
    "target": "ES2018"
    /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */,
    "module": "commonjs"
    /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
    "lib": [
      "es2018",
      "dom"
    ]
    /* Specify library files to be included in the compilation. */,
    "allowJs": true
    /* Allow javascript files to be compiled. */,
    "checkJs": false,
    /* Report errors in .js files. */
    "jsx": "react"
    /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
    // "declaration": true, /* Generates corresponding '.d.ts' file. */
    // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
    "sourceMap": true, /* Generates corresponding '.map' file. */
    // "outFile": "./", /* Concatenate and emit output to single file. */
    "outDir": "./build",
    /* Redirect output structure to the directory. */
    // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    // "composite": true, /* Enable project compilation */
    // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */
    // "removeComments": true, /* Do not emit comments to output. */
    // "noEmit": true, /* Do not emit outputs. */
    "importHelpers": true
    /* Import emit helpers from 'tslib'. */,
    "downlevelIteration": true
    /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */,
    // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */

    /* Strict Type-Checking Options */
    "strict": true
    /* Enable all strict type-checking options. */,
    "noImplicitAny": false,
    /* Raise error on expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true, /* Enable strict null checks. */
    // "strictFunctionTypes": true, /* Enable strict checking of function types. */
    // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
    // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
    // "noImplicitThis": true /* Raise error on 'this' expressions with an implied 'any' type. */,
    // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */

    /* Additional Checks */
    "noUnusedLocals": true
    /* Report errors on unused locals. */,
    "noUnusedParameters": true
    /* Report errors on unused parameters. */,
    // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
    // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */

    /* Module Resolution Options */
    "moduleResolution": "node",
    /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */

    "baseUrl": "./src",
    /* Base directory to resolve non-absolute module names. */
    "paths": {
      "Components/*": ["components/*"],
      "Modals/*": ["components/modals/*"],
      "Panels/*": ["components/panels/*"],
      "Services/*": ["services/*"],
      "Actions/*": ["actions/*"],
      "Reducers/*": ["reducers/*"],
      "Widgets/*": ["widgets/*"],
      "Assets/*": ["assets/*"],
      "Containers/*": ["containers/*"],
      "Config/*": ["config/*"]
    },
    /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
    // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
    // "typeRoots": [], /* List of folders to include type definitions from. */
    "types": [
      "jest","node"
    ],
    /* Type declaration files to be included in compilation. */
    "allowSyntheticDefaultImports": true
    /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
    "esModuleInterop": true
    /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
    // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
    // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */

    /* Source Map Options */
    "sourceRoot": "/src",
    /* Specify the location where debugger should locate TypeScript files instead of source locations. */
    // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
    // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */

    "experimentalDecorators": true
    /* Enables experimental support for ES7 decorators. */
    /* Experimental Options */
    // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
  },
  "exclude": [
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "node_modules",
    "obj"
  ],
  "include": [
    "src",
    "src/**/*.ts",
    "src/**/*.tsx",
    "@types/**/*.d.ts",
    "node_modules/axios",
    "node_modules/redux-thunk"
  ]
}


пробовал варианты со стэковерфлоу, добавлять разные eslint-import-resolver, в том числе webpack.
у него настройки с алиасами такие:
spoiler
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-native': 'react-native-web',
      Config: path.resolve(__dirname, paths.appSrc, 'config'),
      Components: path.resolve(__dirname, paths.appSrc, 'components'),
      Panels: path.resolve(__dirname, paths.appSrc, 'components', 'panels'),
      Modals: path.resolve(__dirname, paths.appSrc, 'components', 'modals'),
      Services: path.resolve(__dirname, paths.appSrc, 'services'),
      Actions: path.resolve(__dirname, paths.appSrc, 'actions'),
      Reducers: path.resolve(__dirname, paths.appSrc, 'reducers'),
      Widgets: path.resolve(__dirname, paths.appSrc, 'widgets'),
      Assets: path.resolve(__dirname, paths.appSrc, 'assets'),
      Containers: path.resolve(__dirname, paths.appSrc, 'containers')
    }


Зависимости из package.json связанные с линтером
spoiler
"eslint": "^7.2.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^8.1.0",
    "eslint-config-react-app": "^3.0.8",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-import-resolver-node": "^0.3.4",
    "eslint-import-resolver-typescript": "^2.4.0",
    "eslint-loader": "2.1.1",
    "eslint-plugin-flowtype": "2.50.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
"@babel/core": "^7.12.7",
    "@gmr-fms/react-swipeable-tabs": "^2.4.2",
    "@svgr/webpack": "2.4.1",
    "@types/jest": "^26.0.15",
    "@types/react-router": "^5.1.8",
    "@types/react-router-dom": "^5.1.6",
    "@typescript-eslint/parser": "^4.18.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "9.0.0",
    "babel-jest": "^26.6.3",
    "babel-loader": "8.0.4",
    "webpack": "^4.41.4",
    "webpack-dev-server": "^3.11.0",
     "prettier": "^2.2.1",
  • Вопрос задан
  • 4384 просмотра
Подписаться 4 Простой 14 комментариев
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы