使用 Ant Design 的 Snowpack：无法解析导入 "antd"

Question

我想将 Ant Design 与 Snowpack 一起使用。我遵循了 And Design 文档并安装了 antd，但是每当我运行我的应用程序时，依赖项就无法解决。

我收到以下错误消息：

[snowpack] Import "antd" could not be resolved.
If this is a new package, re-run Snowpack with the --reload flag to rebuild.
If Snowpack is having trouble detecting the import, add "install": ["antd"] to your Snowpack config file.

我的App.tsx:

import React from 'react';
import './App.css';
import { Button } from 'antd';

function App(): JSX.Element {
    return (
        <div className="App">
            <Button type="primary">Button</Button>
        </div>
    );
}

export default App;

我的 package.json 依赖项：

"dependencies": {
    "antd": "^4.6.2",
    "axios": "^0.20.0",
    "postcss": "^7.0.32",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-hook-form": "^6.7.0",
    "tailwindcss": "^1.7.6"
  },
  "devDependencies": {
    "@snowpack/app-scripts-react": "^1.10.0",
    "@testing-library/jest-dom": "^5.5.0",
    "@testing-library/react": "^10.0.3",
    "@types/react": "^16.9.35",
    "@types/react-dom": "^16.9.8",
    "@types/snowpack-env": "^2.3.0",
    "@typescript-eslint/eslint-plugin": "^4.0.1",
    "@typescript-eslint/parser": "^4.0.1",
    "eslint": "^7.8.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.20.6",
    "eslint-plugin-react-hooks": "^4.1.0",
    "jest": "^26.2.2",
    "postcss-cli": "^7.1.2",
    "prettier": "^2.0.5",
    "snowpack": "^2.9.0",
    "typescript": "^3.9.7"
  }

我是不是漏掉了什么？

Answer 1

确保 antd 已经安装。在 snowpack.config.js 试试这个：

module.exports = {
  mount: {
    public: "/",
    src: "/_dist_",
  },
  installOptions: {
    namedExports: ["antd"],
  },
};

使用 Ant Design 的 Snowpack：无法解析导入 "antd"

Snowpack with Ant Design: Import "antd" could not be resolved

reactjs

antd

snowpack