Question

我正在尝试使用typescript和Antdesign设置react，而没有react-create-app的开销。将Antdesign组件导入React组件时，会出现错误。

我想知道我的导入不正确，但是像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时，它会遍历所有不同的蚂蚁设计组件，并且每个组件都会给我以下错误：

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```

Answer 1

我遇到了同样的问题，最后通过将antd从3.26.2升级到3.26.11来解决了这个问题。

您也可以检查package.json。

Webpack无法解析蚂蚁设计模块

1 个答案: