Webpack 无法解析 ant 设计模块答案

【问题标题】：Webpack cannot resolve ant design modulesWebpack 无法解析 ant 设计模块
【发布时间】：2019-10-24 23:06:33
【问题描述】：

我正在尝试在没有 react-create-app 开销的情况下使用 typescript 和 Antdesign 设置 react。当我在 react 组件中导入 Antdesign 组件时，出现错误。

我想知道我的导入不正确，但导入像 import Button from 'antd/es/button'; 这样的模块只会抛出 Error: Can't resolve 'antd/es/button'...

package.json:

  "name": "myName",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "@types/react": "^16.9.9",
    "@types/react-dom": "^16.9.2",
    "source-map-loader": "^0.2.4",
    "ts-loader": "^6.2.1",
    "tslint": "^5.20.0",
    "typescript": "^3.6.4",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9"
  },
  "dependencies": {
    "antd": "^3.24.2",
    "react": "^16.11.0",
    "react-dom": "^16.11.0"
  }
}

webpack.config.js：

    mode: "production",
    devtool: "source-map",
    resolve: {
        extensions: ["js", ".ts", ".tsx"]
    },
    module: {
        rules: [
            {
                test: /\.ts(x?)$/,
                exclude: /node_modules/,
                use: [
                    {   
                        loader: "ts-loader"
                    }
                ]
            },
            {
                enforce: "pre",
                test: /\.js$/,
                loader: "source-map-loader"
            }
        ]
    },
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }
};

index.tsx：

import * as ReactDOM from "react-dom";
import { Button } from "antd";

ReactDOM.render(
    <div>
        <Button>Click Me!</Button>
    </div>,
    document.getElementById("app")
);

index.html:

<html>
    <body>
        <div id="app"></div>
        <script src="./node_modules/react/umd/react.development.js"></script>
        <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
        <script src="./dist/main.js"></script>
    </body>
</html>

当我运行 npx webpack 时，它会遍历所有不同的 ant 设计组件，并且对于每个组件，它都会给我以下错误：

Module not found: Error: Can't resolve './upload' in '/Userpath/node_modules/antd/es'
 @ ./node_modules/antd/es/index.js 66:0-45 66:0-45
 @ ./src/index.tsx```

【问题讨论】：

有人说是antd版本问题造成的：blog.csdn.net/weixin_38514634/article/details/89636696，你可以试试换版本npm i再试。祝你好运

标签： reactjs typescript webpack antd

【解决方案1】：

我遇到了同样的问题，最后通过将 antd 从 3.26.2 升级到 3.26.11 来修复它。

您也可以查看您的package.json。

【讨论】：