eslint plugins are not working on the latest version

[iamhaaamed]

Summary:

eslint plugins are not working on the latest version.

this is my eslintrc.js file:

const path = require('path');

module.exports = {
  extends: ['expo', 'plugin:tailwindcss/recommended', 'prettier'],
  plugins: [
    'unicorn',
    '@typescript-eslint',
    'unused-imports',
    'tailwindcss',
    'simple-import-sort',
  ],
  parserOptions: {
    project: './tsconfig.json',
  },
  rules: {
    'unicorn/filename-case': [
      'error',
      {
        case: 'kebabCase',
        ignore: ['/android', '/ios'],
      },
    ],
    'max-params': ['error', 3], // Limit the number of parameters in a function to use object instead
    'max-lines-per-function': ['error', 70],
    'react/display-name': 'off',
    'react/no-inline-styles': 'off',
    'react/destructuring-assignment': 'off', // Vscode doesn't support automatically destructuring, it's a pain to add a new variable
    'react/require-default-props': 'off', // Allow non-defined react props as undefined
    '@typescript-eslint/comma-dangle': 'off', // Avoid conflict rule between Eslint and Prettier
    '@typescript-eslint/consistent-type-imports': [
      'warn',
      {
      prefer: 'type-imports',
      fixStyle: 'inline-type-imports',
      disallowTypeAnnotations: true,
    },
  ], // Ensure `import type` is used when it's necessary
    'import/prefer-default-export': 'off', // Named export is easier to refactor automatically
    'import/no-cycle': ['error', { maxDepth: '∞' }],
    'tailwindcss/classnames-order': [
      'warn',
      {
        officialSorting: true,
      },
    ], // Follow the same ordering as the official plugin `prettier-plugin-tailwindcss`
    'simple-import-sort/imports': 'error', // Import configuration for `eslint-plugin-simple-import-sort`
    'simple-import-sort/exports': 'error', // Export configuration for `eslint-plugin-simple-import-sort`
    '@typescript-eslint/no-unused-vars': 'off',
    'tailwindcss/no-custom-classname': 'off',
    'unused-imports/no-unused-imports': 'error',
    'unused-imports/no-unused-vars': [
      'error',
      {
        argsIgnorePattern: '^_',
        varsIgnorePattern: '^_',
        caughtErrorsIgnorePattern: '^_',
      },
    ],
  },
  overrides: [
    // Configuration for  translations files (i18next)
    {
      files: ['src/translations/*.json'],
      extends: ['plugin:i18n-json/recommended'],
      rules: {
        'i18n-json/valid-message-syntax': [
          2,
          {
            syntax: path.resolve('./scripts/i18next-syntax-validation.js'),
          },
        ],
        'i18n-json/valid-json': 2,
        'i18n-json/sorted-keys': [
          2,
          {
            order: 'asc',
            indentSpaces: 2,
          },
        ],
        'i18n-json/identical-keys': [
          2,
          {
            filePath: path.resolve('./src/translations/en.json'),
          },
        ],
        'prettier/prettier': [
          0,
          {
            singleQuote: true,
            endOfLine: 'auto',
          },
        ],
      },
    },
    {
      // Configuration for testing files
      files: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
      extends: ['plugin:testing-library/react'],
    },
  ],
};

and this is my package.json:

{
  "name": "locator",
  "version": "0.0.1",
  "private": true,
  "main": "expo-router/entry",
  "scripts": {
    "start": "cross-env EXPO_NO_DOTENV=1 expo start",
    "prebuild": "cross-env EXPO_NO_DOTENV=1 pnpm expo prebuild",
    "android": "cross-env EXPO_NO_DOTENV=1 expo run:android",
    "ios": "cross-env EXPO_NO_DOTENV=1 expo run:ios",
    "xcode": "xed -b ios",
    "doctor": "npx expo-doctor@latest",
    "preinstall": "npx only-allow pnpm",
    "start:staging": "cross-env APP_ENV=staging pnpm run start",
    "prebuild:staging": "cross-env APP_ENV=staging pnpm run prebuild",
    "android:staging": "cross-env APP_ENV=staging pnpm run android",
    "ios:staging": "cross-env APP_ENV=staging pnpm run ios",
    "start:production": "cross-env APP_ENV=production pnpm run start",
    "prebuild:production": "cross-env APP_ENV=production pnpm run prebuild",
    "android:production": "cross-env APP_ENV=production pnpm run android",
    "ios:production": "cross-env APP_ENV=production pnpm run ios",
    "build:development:ios": "cross-env APP_ENV=development EXPO_NO_DOTENV=1 eas build --profile development --platform ios",
    "build:development:android": "cross-env APP_ENV=development EXPO_NO_DOTENV=1 eas build --profile development --platform android ",
    "build:staging:ios": "cross-env APP_ENV=staging EXPO_NO_DOTENV=1 eas build --profile staging --platform ios",
    "build:staging:android": "cross-env APP_ENV=staging EXPO_NO_DOTENV=1 eas build --profile staging --platform android ",
    "build:production:ios": "cross-env APP_ENV=production EXPO_NO_DOTENV=1 eas build --profile production --platform ios",
    "build:production:android": "cross-env APP_ENV=production EXPO_NO_DOTENV=1 eas build --profile production --platform android ",
    "prepare": "husky",
    "app-release": "cross-env SKIP_BRANCH_PROTECTION=true np --no-publish --no-cleanup --no-release-draft",
    "version": "pnpm run prebuild && git add .",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "type-check": "tsc  --noemit",
    "lint:translations": "eslint ./src/translations/ --fix --ext .json  ",
    "test": "jest",
    "check-all": "pnpm run lint && pnpm run type-check && pnpm run lint:translations && pnpm run test",
    "test:ci": "pnpm run test --coverage",
    "test:watch": "pnpm run test --watch",
    "install-maestro": "curl -Ls 'https://get.maestro.mobile.dev' | bash",
    "e2e-test": "maestro test .maestro/ -e APP_ID=locator.development"
  },
  "dependencies": {
    "@expo/metro-runtime": "^3.2.3",
    "@gorhom/bottom-sheet": "^4.6.3",
    "@hookform/resolvers": "^3.9.0",
    "@react-native-community/datetimepicker": "^8.0.1",
    "@react-native-community/netinfo": "^11.3.1",
    "@react-native-community/push-notification-ios": "^1.11.0",
    "@react-native-firebase/analytics": "^19.2.2",
    "@react-native-firebase/app": "^19.2.2",
    "@react-native-firebase/crashlytics": "^19.2.2",
    "@react-native-firebase/dynamic-links": "^19.2.2",
    "@react-native-firebase/messaging": "^19.2.2",
    "@shopify/flash-list": "1.6.4",
    "@tanstack/react-query": "^5.52.1",
    "app-icon-badge": "^0.0.15",
    "axios": "^1.7.5",
    "dayjs": "^1.11.10",
    "expo": "~51.0.31",
    "expo-constants": "~16.0.2",
    "expo-dev-client": "~4.0.25",
    "expo-font": "~12.0.9",
    "expo-image": "~1.12.15",
    "expo-linking": "~6.3.1",
    "expo-localization": "~15.0.3",
    "expo-router": "~3.5.23",
    "expo-splash-screen": "0.27.5",
    "expo-status-bar": "~1.12.1",
    "expo-system-ui": "~3.0.7",
    "expo-updates": "~0.25.18",
    "i18next": "^23.14.0",
    "lodash.memoize": "^4.1.2",
    "mime": "^4.0.1",
    "moti": "^0.29.0",
    "nativewind": "^4.0.36",
    "navigation-utilities": "link:@/navigation/navigation-utilities",
    "pusher-js": "8.4.0-rc2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-error-boundary": "^4.0.13",
    "react-hook-form": "^7.53.0",
    "react-i18next": "^15.0.1",
    "react-icomoon": "^2.5.7",
    "react-native": "0.74.5",
    "react-native-audio-recorder-player": "^3.6.7",
    "react-native-biometrics": "^3.0.1",
    "react-native-device-info": "^10.13.2",
    "react-native-element-textinput": "^2.2.0",
    "react-native-flash-message": "^0.4.2",
    "react-native-gesture-handler": "~2.16.2",
    "react-native-gifted-charts": "^1.4.10",
    "react-native-image-crop-picker": "^0.40.3",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-keyboard-controller": "^1.13.2",
    "react-native-linear-gradient": "^2.8.3",
    "react-native-mlkit-ocr": "^0.3.0",
    "react-native-mmkv": "2.12.2",
    "react-native-modal-datetime-picker": "^17.1.0",
    "react-native-push-notification": "^8.1.1",
    "react-native-reanimated": "~3.10.1",
    "react-native-render-html": "^6.3.4",
    "react-native-restart": "0.0.27",
    "react-native-safe-area-context": "4.10.5",
    "react-native-screens": "~3.31.1",
    "react-native-svg": "~15.2.0",
    "react-native-swiper": "^1.6.0",
    "react-native-video": "^6.2.0",
    "react-native-web": "~0.19.12",
    "react-query-kit": "^3.3.0",
    "tailwind-variants": "^0.2.1",
    "zod": "^3.23.8",
    "zustand": "^4.5.5"
  },
  "devDependencies": {
    "@babel/core": "^7.24.5",
    "@commitlint/cli": "^19.2.2",
    "@commitlint/config-conventional": "^19.2.2",
    "@dev-plugins/react-query": "^0.0.7",
    "@expo/config": "~9.0.2",
    "@testing-library/jest-dom": "^6.5.0",
    "@testing-library/react-native": "^12.6.0",
    "@types/i18n-js": "^3.8.9",
    "@types/jest": "^29.5.12",
    "@types/lodash.memoize": "^4.1.9",
    "@types/react": "~18.2.79",
    "@types/react-native-push-notification": "^8.1.4",
    "@types/react-test-renderer": "^18.3.0",
    "@typescript-eslint/eslint-plugin": "^5.62.0",
    "@typescript-eslint/parser": "^5.62.0",
    "babel-plugin-module-resolver": "^5.0.2",
    "cross-env": "^7.0.3",
    "dotenv": "^16.4.5",
    "eslint": "^8.57.0",
    "eslint-config-expo": "^7.1.2",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-i18n-json": "^4.0.0",
    "eslint-plugin-prettier": "^5.2.1",
    "eslint-plugin-simple-import-sort": "^10.0.0",
    "eslint-plugin-tailwindcss": "^3.15.2",
    "eslint-plugin-testing-library": "^6.2.2",
    "eslint-plugin-unicorn": "^46.0.1",
    "eslint-plugin-unused-imports": "^2.0.0",
    "husky": "^9.1.5",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "jest-expo": "~51.0.4",
    "jest-junit": "^16.0.0",
    "lint-staged": "^15.2.9",
    "np": "^10.0.7",
    "prettier": "^3.3.3",
    "tailwindcss": "3.3.2",
    "ts-jest": "^29.1.2",
    "typescript": "^5.3.3"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Nordic-Organisation/Supplier-App-Mob"
  },
  "packageManager": "pnpm@9.8.0",
  "osMetadata": {
    "initVersion": "5.3.0"
  },
  "pnpm": {
    "patchedDependencies": {
      "@gorhom/bottom-sheet@4.6.3": "patches/@gorhom__bottom-sheet@4.6.3.patch"
    }
  }
}

[yjose]

@iamhaaamed how did you test that, the eslint plugins are working as expected in the repo project at least

[iamhaaamed]

@iamhaaamed how did you test that, the eslint plugins are working as expected in the repo project at least

I can not see linting errors in real-time as I code:

[yjose]

Can you run pnpm lint to amke sure if tge issue is related only to cide editor

[iamhaaamed]

after runnuing pnpm lint:

> locator@0.0.1 lint /Users/wayne/Projects/App
> eslint . --ext .js,.jsx,.ts,.tsx

Oops! Something went wrong! :(

ESLint: 8.57.0

ESLint couldn't find the plugin "eslint-plugin-import".

(The package "eslint-plugin-import" was not found when loaded as a Node module from the directory "/Users/wayne/Projects/App".)

It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

    npm install eslint-plugin-import@latest --save-dev

The plugin "eslint-plugin-import" was referenced from the config file in ".eslintrc.js » eslint-config-expo » ./utils/core.js".

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

 ELIFECYCLE  Command failed with exit code 2.

then after running pnpm i eslint-plugin-import@latest -D and then running pnpm lint again:

> locator@0.0.1 lint /Users/wayne/Projects/App
> eslint . --ext .js,.jsx,.ts,.tsx

=============

WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=3.3.1 <5.2.0

YOUR TYPESCRIPT VERSION: 5.5.3

Please only submit bug reports when using the officially supported version.

=============

Oops! Something went wrong! :(

ESLint: 8.57.0

EslintPluginImportResolveError: Error while loading rule 'import/no-cycle': typescript with invalid interface loaded as resolver
Occurred while linting /Users/wayne/Projects/App/src/api/auth/index.ts
    at requireResolver (/Users/wayne/Projects/App/node_modules/eslint-plugin-import/node_modules/eslint-module-utils/resolve.js:110:17)
    at fullResolve (/Users/wayne/Projects/App/node_modules/eslint-plugin-import/node_modules/eslint-module-utils/resolve.js:199:22)
    at Function.relative (/Users/wayne/Projects/App/node_modules/eslint-plugin-import/node_modules/eslint-module-utils/resolve.js:216:10)
    at RemotePath.resolve (/Users/wayne/Projects/App/node_modules/eslint-plugin-import/lib/exportMap/remotePath.js:10:37)
    at captureDependency (/Users/wayne/Projects/App/node_modules/eslint-plugin-import/lib/exportMap/captureDependency.js:35:362)
    at captureDependencyWithSpecifiers (/Users/wayne/Projects/App/node_modules/eslint-plugin-import/lib/exportMap/captureDependency.js:59:3)
    at ImportExportVisitorBuilder.ImportDeclaration (/Users/wayne/Projects/App/node_modules/eslint-plugin-import/lib/exportMap/visitor.js:67:70)
    at /Users/wayne/Projects/App/node_modules/eslint-plugin-import/lib/exportMap/builder.js:189:35
    at Array.forEach (<anonymous>)
    at Function.parse (/Users/wayne/Projects/App/node_modules/eslint-plugin-import/lib/exportMap/builder.js:185:18)
 ELIFECYCLE  Command failed with exit code 2.

then after running pnpm i -D eslint-import-resolver-typescript and then running pnpm lint again, the errors are displayed in the terminal but not in the code editor

[iamhaaamed]

After reopening VS Code, it works. It seems that I just needed to install eslint-import-resolver-typescript and eslint-plugin-import as dev dependencies

[yjose]

Normally, you don't need to install eslint-import-resolver-typescript and eslint-plugin-import as they are dependencies required by eslint-config-expo and should be installed automatically. I am not sure what causing this issue in your side but this issue shouldn't happen, also you can check your npmrc maybe you are missing something

[iamhaaamed]

Thank you for your response. My .npmrc is set up exactly as you described, so I don't think that's where the issue lies. I also tried deleting the pnpm-lock.yaml file and the node_modules directory, but after reinstalling packages, it still required both eslint-import-resolver-typescript and eslint-plugin-import to be installed as dev dependencies...

[yjose]

@iamhaaamed interesting, probably we need another person to try it out and see. @SihamBen, could you please help with the following? Create a new project using Cli and then run pnpm lint to ensure everything is working as expected and we don't need to install those deps manually