0

I have a monorepo in which I'm utilizing node. When running npx eslint ., I am still getting errors with both my Node server subdir and my React client subdir, like the following:

warning:  Unable to resolve path to module 'react' import/no-unresolved

Ideal behavior is that I am able to run npx eslint --fix . from anywhere in my repo and it will automatically fix any non absolute import paths. I do not want any paths to have import {} from 'client/src' or import {} from 'server/src' etc.

Here is my directory structure:

╭─ mycomputer ~/Documents/code/repo ‹branch*›
╰─➤  tree -L 2
.
├── README.md
├── client
│   ├── Dockerfile
│   ├── README.md
│   ├── package-lock.json
│   ├── package.json
│   ├── public
│   ├── src
│   └── tsconfig.json
├── node_modules
├── package-lock.json
├── package.json
└── server
    ├── Dockerfile
    ├── README.md
    ├── node_modules
    ├── package-lock.json
    ├── package.json
    ├── prisma
    ├── src
    ├── test
    └── tsconfig.json

Here is my .eslintrc located in my root directory repo.

// .eslintrc
{
  "env": {
    "node": true,
    "commonjs": true
  },
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "import", "no-relative-import-paths"],
  "extends": [
    "eslint:recommended",
    "prettier",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:import/recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript"
  ],
  "settings": {
    "import/resolver": {
      "typescript": {
        "project": [
      "server/tsconfig.json",
      "client/tsconfig.json"
    ]
      },
      "node": {
        "moduleDirectory": [
          "client/src/",
          "node_modules/",
          "server/src/",
      "server/node_modules/"
      ],
        "extensions": [".ts", ".tsx", ".native.js"]
      }
    }
  },
  "rules": {
    "import/order": [
      "warn",
      {
        "alphabetize": {
          "caseInsensitive": true,
          "order": "asc"
        },
        "groups": [["builtin", "external"]],
        "newlines-between": "always"
      }
    ],
    "import/no-unresolved": [1, {"commonjs": false, "amd": false}],
    "import/default": "off",
    "import/no-named-as-default": "off",
    "import/no-named-as-default-member": "off",
    "@typescript-eslint/no-non-null-assertion": "off",
    "@typescript-eslint/no-explicit-any": "off",
    "no-relative-import-paths/no-relative-import-paths": [
      "warn",
      { "allowSameFolder": true }
    ]
  },
  "root": true
}

Here is my client/tsconfig.json:

╰─➤  cat client/tsconfig.json
{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": "src",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "lib": ["dom", "dom.iterable", "esnext"],
    "noEmit": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "es5"
  },
  "include": ["src"]
}

Here is my server/tsconfig.json:

╰─➤  cat server/tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src",
    "esModuleInterop": true,
    "lib": ["esnext"],
    "outDir": "dist",
    "sourceMap": true,
    "strict": true
  },
  "include": ["src"]
}

Any thoughts on what I have specified incorrectly?

jlarks32
  • 931
  • 8
  • 20
  • I see 2 problems: 1. imports from node_modules can't be resolved and 2. you want certain style of import paths. As to 2., are you sure you wanna change paths like `'client/src'` to absolute? Or did you mean you wanna change them from "relative to project root" to "relative to file"? – Dan Macak Nov 16 '22 at 07:55
  • @Skocdopole I guess why wouldn't the `node_modules` be resolved? 2. Yes, I want to change them relative to project root? so for example like a file that lives in `client/src/components/myCustomComponent` would just be imported from other client import files as `import myCustomComponent from components/myCustomCponent` ya know? – jlarks32 Nov 16 '22 at 16:16
  • 1. That's what you wrote"Unable to resolve path to module 'react' import/no-unresolved". Per 2., I am afraid the eslint import resolver can't autofix, as per their [docs](https://github.com/import-js/eslint-plugin-import), but if you use text editor like VSCode, you can double check that your module importer prefers relative paths https://stackoverflow.com/a/53137571/4256274 – Dan Macak Nov 18 '22 at 16:13
  • 1. Right... I meant why is it still not able to be resolved when I have specified the path. As in do you know a fix? 2. No, it can fix the import paths automatically. Check out here: https://github.com/import-js/eslint-plugin-import. ` Automatically fixable by the --fix CLI option.` is in the documentation (and I've seen it work before). – jlarks32 Nov 18 '22 at 17:14
  • 1. have you checked [similar issues on SO](https://stackoverflow.com/questions/46208367/how-to-remove-eslint-error-no-unresolved-from-importing-react)? 2. Not so sure, check the [table below](https://github.com/import-js/eslint-plugin-import#static-analysis) – Dan Macak Nov 18 '22 at 17:46
  • 1. Yes, the reasoning for that linked issue was because they were using an old resolver version 2. eslint can for sure automatically fix paths: https://jeffchen.dev/posts/Automatically-Fixing-Relative-Imports-with-ESLint/ – jlarks32 Nov 22 '22 at 22:48
  • Ok I finally got you. The link you posted is from a guy who wrote his own plugin. That way you can do pretty much anything you want ofc, and he is indeed providing functionality that is not present in eslint-plugin-import outta box, as I said. However, his plugin detects only relative paths which is easy by looking up paths starting with `.`. So in your case you can fork his plugin, change it to detect wrong absolute paths and fix them. Or you can say screw it and just run search and replace and configure your IDE's importer to import from correct locations. – Dan Macak Nov 26 '22 at 10:45

0 Answers0