我正在尝试使用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```
答案 0 :(得分:1)
我遇到了同样的问题,最后通过将antd
从3.26.2
升级到3.26.11
来解决了这个问题。
您也可以检查package.json
。