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

Question

I want to use Ant Design with Snowpack. I followed the And Design docs and installed antd but whenever I run my application the dependency can't be resolved.

I get the following error message:

[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.

My 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;

My package.json dependencies:

"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"
  }

Am I missing something?

Answer 1

Make sure antd is already installed. Try this in snowpack.config.js:

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