Conflicting plug ins?

[aronchick]

I've been hammering my head against this for a few days now:

❯ npm run lint:fix

> webui@0.1.0 lint:fix
> eslint . --fix

Oops! Something went wrong! :(

ESLint: 8.56.0

ESLint couldn't determine the plugin "@typescript-eslint" uniquely.

- /Users/daaronch/code/bacalhau/webui/node_modules/eslint-config-wesbos/node_modules/@typescript-eslint/eslint-plugin/dist/index.js (loaded in ".eslintrc » eslint-config-wesbos/typescript")
- /Users/daaronch/code/bacalhau/webui/node_modules/@typescript-eslint/eslint-plugin/dist/index.js (loaded in ".eslintrc » eslint-config-wesbos/typescript » eslint-config-airbnb-typescript » /Users/daaronch/code/bacalhau/webui/node_modules/eslint-config-airbnb-typescript/lib/shared.js")

Please remove the "plugins" setting from either config or remove either plugin installation.

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

Here's the package.json:

{
  "name": "webui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@babel/plugin-transform-class-properties": "^7.23.3",
    "@babel/plugin-transform-nullish-coalescing-operator": "^7.23.4",
    "@babel/plugin-transform-numeric-separator": "^7.23.4",
    "@babel/plugin-transform-optional-chaining": "^7.23.4",
    "@babel/plugin-transform-private-property-in-object": "^7.23.4",
    "@faker-js/faker": "^8.3.1",
    "@fontsource/open-sans": "^5.0.17",
    "@jest/globals": "^29.7.0",
    "@jridgewell/sourcemap-codec": "^1.4.15",
    "@rollup/plugin-terser": "^0.4.4",
    "@testing-library/jest-dom": "^6.1.5",
    "@testing-library/react": "^14.1.2",
    "@types/node": "^20.10.5",
    "@types/react": "^18.2.45",
    "@types/react-dom": "^18.2.18",
    "axios": "^1.6.2",
    "moment": "^2.29.4",
    "or": "^0.2.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-moment": "^1.1.3",
    "react-router-dom": "^6.21.1",
    "react-script": "^2.0.5",
    "react-scripts": "^5.0.1",
    "react-svg": "^16.1.32",
    "sass": "^1.69.5",
    "svgo": "^3.2.0",
    "typescript": "^4.9.5",
    "uuid": "^9.0.1",
    "web-vitals": "^2.1.4",
    "wesbos": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "build-bacalhau": "cd .. && make build && cd -",
    "start-bacalhau": "cd .. && ./bin/$(go env GOOS)/$(go env GOARCH)/bacalhau serve --web-ui --web-ui-port 3000 && cd -",
    "test": "NODE_ENV=test cross-env jest tests/",
    "eject": "react-scripts eject",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\""
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.23.6",
    "@babel/preset-typescript": "^7.23.3",
    "@testing-library/dom": "^9.3.3",
    "@testing-library/user-event": "^14.5.1",
    "@types/jest": "^29.5.11",
    "@types/uuid": "^9.0.7",
    "babel-cli": "^6.26.0",
    "babel-core": "^7.0.0-bridge",
    "babel-jest": "^29.7.0",
    "babel-plugin-module-resolver": "^5.0.0",
    "cross-env": "^7.0.3",
    "eslint": "^8.56.0",
    "eslint-config-wesbos": "^4.0.1",
    "jest": "^29.7.0",
    "jest-css-modules-transform": "^4.4.2",
    "jest-environment-jsdom": "^29.7.0",
    "prettier": "^3.1.1",
    "ts-jest": "^29.1.1",
    "typescript": "^4.9.5",
    "wesbos": "^1.0.1"
  }
}

Here's the .erlintrc

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "extends": ["react-app", "wesbos/typescript"],
  "rules": {
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/ban-ts-ignore": "off",
    "@typescript-eslint/interface-name-prefix": "off",
    "@typescript-eslint/no-unused-vars": [
      "warn",
      { "argsIgnorePattern": "^_" }
    ],
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto",
        "semi": false,
        "singleQuote": false,
        "tabWidth": 2,
        "trailingComma": "es5"
      }
    ],
    "endOfLine": 0,
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off",
    "quotes": ["error", "double"],
    "import/no-extraneous-dependencies": [
      "error",
      {
        "devDependencies": false,
        "optionalDependencies": false,
        "peerDependencies": false
      }
    ]
  },
  "overrides": [
    {
      "files": ["**/*.tsx"],
      "rules": {
        "react/prop-types": "off"
      }
    }
  ],
  "settings": {
    "react": {
      "version": "detect"
    },
    "import/resolver": {
      "typescript": {
        "project": "./tsconfig.json"
      }
    }
  },
  "ignorePatterns": [
    "coverage/",
    "node_modules/",
    "src/serviceWorker.ts",
    "*.config.js",
    "jest.polyfills.js"
  ]
}

I don't even see where the plugins this would be pulling from! :(

[aronchick]

OK - so it looks like the issue was this:

  "extends": ["react-app", "wesbos/typescript"],

Which I now switched to this:

  "extends": ["wesbos/typescript"],

Which led to the following problem (pasted here for google searchers):

   1:1  error  Resolve error: typescript with invalid interface loaded as resolver  import/no-self-import

Which I fixed by updating the settings section:

   "settings": {
    "react": {
      "version": "detect"
    },
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    },
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    }
  },

Resolved!