Я пытаюсь настроить реакцию с использованием машинописного текста и Antdesign без дополнительных ресурсов реагирования-создания-приложения. Когда я импортирую компонент 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, он проходит через все различные конструкции муравьякомпоненты и для каждого он выдаст мне следующую ошибку:
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```