Cannot import Drawer component from antd react library

Question

I am using antd components in my react app. Out of all components, I am facing difficulty in importing and using only the Drawer component. All other components are working fine. My code is rather straightforward.

import React from 'react';
import { Layout, Menu, Button, Drawer } from 'antd';

export class MyDesign extends React.Component {
  ...
  render() {
    return (
      <div>
        <Button />                              <-- works fine
        <Drawer title="Test" visible={true}>    <--- doesn't work
          <p>Some contents...</p>
        </Drawer>
      </div>
    );
  }
}

This causes the following console warning, issued from within webpackHotDevClient

'antd' does not contain an export named 'Drawer'.

which indicates that the issue is with how my app imports antd, and definitely not with antd itself. I was unable to reproduce the issue on a small testcase on codepen, using the same latest stable version of "antd": "^3.7.3".

What might be going on? Is there some sort of selective project-wide import happening that I need to override?

Answer 1

It looks like you have an older version of antd in your node_modules, and that you have only updated the package.json to contain the newest version without reinstalling it.

You can remove node_modules and reinstall everything to get all the versions of every dependency listed in package.json:

rm -rf ./node_modules && npm install