获取：“ESLint：无法解析模块‘@vercel/analytics/react’的路径。(import/no-unresolved)”，但内部的包和路径实际上存在

Question

正如标题所示，ESLint 抱怨此错误消息：

ESLint: Unable to resolve path to module '@vercel/analytics/react'.(import/no-unresolved)

在行中：import { Analytics } from '@vercel/analytics/react';

按照此Vercel 快速入门指南中的说明操作时，使用 Next.js。

总而言之，指令是：

1-通过NPM安装包

npm install @vercel/analytics

2-在/pages/_app.tsx文件中，导入它：

import { Analytics } from '@vercel/analytics/react';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Analytics />
    </>
  );
}

export default MyApp;

我使用的包：

    "next": "^12.1.0",
    "react": "17.0.2",

    "@typescript-eslint/eslint-plugin": "^4.33.0",
    "@typescript-eslint/parser": "^4.33.0",
    "eslint": "^7.32.0",
    "eslint-config-next": "^12.2.5",
    "eslint-config-prettier": "^6.15.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-flowtype": "^5.10.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-jest": "^24.7.0",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.27.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "eslint-plugin-testing-library": "^3.10.2",

安装的 NPM 包具有以下文件夹结构：

/node_modules/@vercel
  analytics/
    dist/
      react/
        index.cjs
        index.d.ts
        index.js
      index.cjs
      index.d.ts
      index.js
    package.json
    tsconfig.json
    ...

请注意，node_modules 中的路径实际上是“@vercel/analytics/dist/react”，而不仅仅是“@vercel/anaylitics/react”，正如代码中说明的那样使用它。

但是，当 CTRL+单击导入的变量时Analytics，我的 IDE 会正确导航到 node_modules 中的定义，即文件@vercel/analytics/dist/react/index.d.ts，其定义如下：

// ./node_modules/@vercel/analytics/dist/react/index.d.ts

// ...

declare function Analytics(props: AnalyticsProps): JSX.Element;

export { Analytics };

我与模块相关的 ESLint 配置import/是

ESLint: Unable to resolve path to module '@vercel/analytics/react'.(import/no-unresolved)

如果我将其导入为：

import { Analytics } from '@vercel/analytics/dist/react'

那么ESlint 不会抱怨，但TSC 会抱怨，并显示以下错误消息：

TS2305: Module '"@vercel/analytics/dist/react"' has no exported member 'Analytics'.

这似乎也没有意义，因为 IDE 仍在查找定义，而且我还可以看到该export { Analytics } 行是如何存在的，所以它应该可以工作......

我应该采取哪些不同的 ESlint 配置或步骤才能使这项工作没有任何 lint/编译器错误？

Answer 1

试试这个方法

//tsconfig.json
"compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@vercel/analytics/react": ["./node_modules/@vercel/analytics/dist/react"]
    }
}