ant-design: Module not found: Can't resolve 'antd'

I’ve created a project by using create-react-app and started getting some problems, at first i thoght i’ve done something wrong with the project, so decided to start from scratch and did everything according to your doccumentation. In my app.js file i have the following code

import React, { Component } from 'react';

import './App.css';
import { Menu, Icon } from 'antd';

const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

class App extends Component {
  state = {
    current: 'mail',
  }

  handleClick = (e) => {
    console.log('click ', e);
    this.setState({
      current: e.key,
    });
  }

  render() {
    return (
      <div >
        <Menu
        onClick={this.handleClick}
        selectedKeys={[this.state.current]}
        mode="horizontal"
      >
        <Menu.Item key="mail">
          <Icon type="mail" />Navigation One
        </Menu.Item>
        <Menu.Item key="app" disabled>
          <Icon type="appstore" />Navigation Two
        </Menu.Item>
        <SubMenu title={<span className="submenu-title-wrapper"><Icon type="setting" />Navigation Three - Submenu</span>}>
          <MenuItemGroup title="Item 1">
            <Menu.Item key="setting:1">Option 1</Menu.Item>
            <Menu.Item key="setting:2">Option 2</Menu.Item>
          </MenuItemGroup>
          <MenuItemGroup title="Item 2">
            <Menu.Item key="setting:3">Option 3</Menu.Item>
            <Menu.Item key="setting:4">Option 4</Menu.Item>
          </MenuItemGroup>
        </SubMenu>
        <Menu.Item key="alipay">
          <a href="https://ant.design" target="_blank" rel="noopener noreferrer">Navigation Four - Link</a>
        </Menu.Item>
      </Menu>
      </div>
    );
  }
}

export default App;

and in App.css i have the following

@import '~antd/dist/antd.css';

However it gives me errors like

1)
Uncaught Error: Cannot find module "-!../node_modules/css-loader/index.js?{"importLoaders":1}!../node_modules/postcss-

2)./src/App.js
Module not found: Can't resolve 'antd' in

Is there a decent documentation on how to get started with this package?

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 15 (2 by maintainers)

Most upvoted comments

Hello @StanislavBerezin, your issue has been closed because it does not conform to our issue requirements. Please use the Issue Helper to create an issue, thank you!

你好 @StanislavBerezin,为了能够进行高效沟通,我们对 issue 有一定的格式要求,你的 issue 因为不符合要求而被自动关闭。你可以通过 issue 助手 来创建 issue 以方便我们定位错误。谢谢配合!

I had same issue but i solved it, just add ~ before this line ‘antd/dist/antd.css’; in your css file, so finally this will be @import '~antd/dist/antd.css';

I also have same issue

just add in your css file @import '~antd/dist/antd.css';

Add in App.js

import 'antd/dist/reset.css';

Just install antd with this command npm i antd

I had the same issue, got it solved by installing react-router-dom by npm install react-router-dom

step1:confirm your code is “@import ‘~antd/dist/antd.css’;” step2:reInstall “npm i”

My situation is step2,and successful