Module not found: Can't resolve 'antd'

See original GitHub issue

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?

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:15 (2 by maintainers)

github_iconTop GitHub Comments

21reactions
ant-design-botcommented, Sep 10, 2018

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 以方便我们定位错误。谢谢配合!

10reactions
Hamza-Liaqat1commented, Apr 3, 2020

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

2 - Stack Overflow
js Module not found: Can't resolve '~ antd / dist / antd.css', I can not fix it. I tried to put the @import...
Read more >
Module not found: Can't resolve 'antd/dist/antd.css ' - Reddit
Hello guys ! i'm newbie in react and i'm facing this problem where i import " bootstrap.min.css" and "antd.css" like this: import…
Read more >
antd - npm
An enterprise-class UI design language and React components implementation. Latest version: 5.1.0, last published: 4 days ago.
Read more >
Use in create-react-app - Ant Design
We are going to use antd within it and modify the webpack config for some customized needs. ... Jest does not support esm...
Read more >
How to use Ant Design with Next.js - LogRocket Blog
After installation, we can start configuring Ant Design. Import antd/dist/antd.css in the _app ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found