gpt4 book ai didi

reactjs - Webpack 无法解析 ant design 模块

转载 作者:行者123 更新时间:2023-12-03 14:30:31 29 4
gpt4 key购买 nike

我正在尝试使用 typescript 和 Antdesign 设置 React,而无需使用 React-create-app 开销。当我在 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 design组件,并且对于每个组件都会给出以下错误:

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

最佳答案

我遇到了同样的问题,最终通过将 antd3.26.2 升级到 3.26.11 来修复它。

您也可以检查您的package.json

关于reactjs - Webpack 无法解析 ant design 模块,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58550229/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com