导入 AntDesign 组件的打字稿警告“找不到模块”

Posted 2023-02-22

【中文标题】导入 AntDesign 组件的打字稿警告“找不到模块”

【英文标题】：Typescript warning "Cannot find module" importing AntDesign components

【发布时间】：2019-07-08 10:19:24

【问题描述】：

我的环境包含在 Webpack 4.16、React 16.4、TypeScript 3.3 和 AntDesign 3.13 中

一切正常，我可以从 AntD 导入每个组件，以更好地优化我的文件和最终大小。

我还使用 webpack-bundle-analyzer 来检查我正在执行的每个导入的大小。

我的问题是我的编辑器收到警告：

如何添加我的 node_modules 库以免收到警告？为什么找不到模块也能正常工作？

---

更新 1

为了更好地理解它，我正在应用一些WebPack配置，看看是否有任何结果：

const getResolves = 
  extensions: ['.ts', '.js', '.tsx', '.less'],
  modules: ['src/less', 'src/ts', 'src', 'node_modules'],
  alias: 
    antd: path.resolve(__dirname, './node_modules/antd'),
  
;

我尝试为 antd 库添加别名。它像以前一样正常工作，但警告仍然存在。

---

更新 2

好消息！我可以找到一种让它工作的方法，这篇文章更新了一个答案。我会让这个问题打开，看看是否有其他人对此有不同的方法或更好的解释。

---

谢谢！

【问题讨论】：

你用的是什么版本的 Ant Design？

在我的帖子里... 3.13

【参考方案1】：

我在这里找到了这个人提出的解决方案：https://github.com/Microsoft/vscode/issues/25312#issuecomment-449609664

我刚刚在我的 tsconfig 文件中添加了一个新属性 "moduleResolution": "node"。

  "compilerOptions": 
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./src",
    "moduleResolution": "node",
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true
  ,
  "exclude": [
    "node_modules"
  ]

【参考方案2】：

如果你使用的是 webpack 最新版本（alpha 版本）那么你会发现这个问题，在使用 webpack 稳定版本之前不要更新 react 脚本。

antd lib 有一定的局限性，不兼容 vite 直到没有

另一个建议如果你想在 react 中集成 vite 那就等待 webpack 的最新稳定版本，并且 react 是在 18 或更高版本中引入该功能