React绝对导入组件时lint报找不到模块错误如何解决

我有一个SearchBox组件，代码如下（SearchBox.tsx）：

import React from "react";

import IconButton from "@mui/material/IconButton";
import InputBase from "@mui/material/InputBase";
import Paper from "@mui/material/Paper";
import SearchIcon from "@mui/icons-material/Search";

function SearchBox() {
  return (
    <Paper
      component="form"
      sx={{ p: "2px 4px", display: "flex", alignItems: "center", width: 400 }}
    >
      <IconButton sx={{ p: "10px" }} aria-label="search">
        <SearchIcon />
      </IconButton>
      <InputBase
        sx={{ ml: 1, flex: 1 }}
        placeholder="Search or start new chat"
        inputProps={{ "aria-label": "search or start new chat" }}
      />
    </Paper>
  );
}

export default SearchBox;

使用如下语句导入组件时：

import SearchBox from "src/components/SearchBox";

lint抛出错误：

Cannot find module 'src/components/SearchBox' or its corresponding type declarations.

但项目可以正常编译，所有功能运行均无异常。

tsconfig.json #

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve"
  },
  "include": [
    "src"
  ],
  "extends": "./tsconfig.paths.json"
}

tsconfig.path.json #

注：该文件名和tsconfig.json中extends引用的文件名存在拼写差异

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "src/*": ["*"]
    }
  }
}

package.json #

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.9.3",
    "@emotion/styled": "^11.9.3",
    "@mui/icons-material": "^5.8.4",
    "@mui/material": "^5.8.5",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.11.41",
    "@types/react": "^18.0.14",
    "@types/react-dom": "^18.0.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "^2.1.3",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "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/preset-typescript": "^7.17.12",
    "jest": "^28.1.1",
    "ts-node": "^10.8.1",
    "typescript": "^4.7.4"
  }
}

编译正常但lint报模块找不到，本质是TypeScript/ESLint的路径解析规则和构建工具（react-scripts内置webpack）不一致，webpack能识别别名但TS服务没读到正确配置，按以下步骤修复：

• 先修正文件名拼写：你当前存放路径别名的文件名为tsconfig.path.json，但根目录tsconfig.json中extends字段引用的是./tsconfig.paths.json，二者差了一个s，直接把配置文件名改成tsconfig.paths.json和引用名保持一致。
• 修改tsconfig.paths.json的路径配置：当前把baseUrl设为src是错误的，baseUrl需要指向项目根目录，paths映射也要对应调整，修改后内容如下：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "src/*": ["src/*"]
    }
  }
}

• 配置修改完成后，重启IDE的TypeScript服务即可：VS Code下按快捷键Ctrl+Shift+P（macOS为Cmd+Shift+P），调出命令面板后输入Restart TypeScript Server执行，等待服务重启完成后报错就会消失。如果ESLint缓存没刷新，也可以重启ESLint服务或者直接重启IDE。

补充：如果后续需要跑jest单测，还要在jest配置里添加对应src/*的moduleNameMapper规则，不然测试环境会找不到模块，当前功能不受影响可以暂不处理。

内容的提问来源于stack exchange，提问作者CCCC