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?
Make sure antd
is already installed. Try this in snowpack.config.js
:
module.exports = {
mount: {
public: "/",
src: "/_dist_",
},
installOptions: {
namedExports: ["antd"],
},
};