Check the render method of `Drawer`. Element type is invalid Error

Question

I'm using react js and antd.design library in my project . i'm trying to use a DRAWER component but i got an error : Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of Drawer.

the problem is with the Drawer Component , when i remove it the project runs perfeclty , when i add it the error appear again

this is my code :

import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import "antd/dist/antd.css";
import React from "react";
import "antd/dist/antd.css";
import { Drawer, Button } from "antd";
import Stepper from "../addExperience/stepper";
import { Icon } from "antd";
import ElementClass from "./DrawerElement"
const IconText = ({ type, text }) => (
  <span>
    <Icon type={type} style={{ marginRight: 8 }} />
    {text}
  </span>
);
 class MyClass extends React.Component {
  state = { visible: false };

  showDrawer = () => {
    this.setState({
      visible: true
    });
  };

  onClose = () => {
    this.setState({
      visible: false
    });
  };

  render() {
    return (
      <div>
        <a style={{ color: "#A6A6A6" }} onClick={this.showDrawer}>
          {" "}
          <IconText type="edit" text="Modifier" />{" "}
        </a>
          <Drawer
          title="Modifier cette experience"
          width={720}
          placement="right"
          onClose={this.onClose}
          maskClosable={false}
          visible={this.state.visible}
          style={{
            height: "calc(100% - 55px)",
            overflow: "auto",
            paddingBottom: 53
          }}
        >
          <Stepper />
          <div
            style={{
              position: "absolute",
              bottom: 0,
              width: "100%",
              borderTop: "1px solid #e8e8e8",
              padding: "10px 16px",
              textAlign: "right",
              left: 0,
              background: "#fff",
              borderRadius: "0 0 4px 4px"
            }}
          >
            <Button
              style={{
                marginRight: 8
              }}
              onClick={this.onClose}
            >
              Cancel
            </Button>
            <Button onClick={this.onClose} type="primary">
              Mettre à jour
            </Button>
          </div>
        </Drawer>  
      </div>
    );
  }
}

MyClass.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles()(MyClass);

Can you remove everything, inside the <Drawer>, keep it only with a <Button>` for example... and see the error comes or not. If no error, then add the inner components one by one, and see addition of which one of them causing error. This is how you can debug. — Arup Rakshit
In this example see how I reproduced it. From RandomComp.js I exported an object {RandomComp}. Now, in the index.js file, I did import RandomComp from "./RandomComp";, so it now points to an object which {RandomComp}, and when I do <RandomComp /> I am getting exactly same error... The fix will be import {RandomComp} from "./RandomComp";. My guess is that Stepper is exporting an object {} of components not a single component.. Check that too.. — Arup Rakshit
@ArupRakshit thank you , but even when i put the body drawer empty like that <Drawer> </Drawer> ,it causes the same error — Maryem Samet
Can you then check if the antd version I have in codesandbox is same as yours? — Arup Rakshit
yours is 3.8.4 , mine is 3.8.0 , i don't think the version is the problem because it appeared once when i wasn't using redux in my application, but since i'm using redux the drawer didn't appear again @ArupRakshit — Maryem Samet

Jesper We Jesper We · Accepted Answer · 2018-08-30T11:31:18

I think your issue is that you are wrapping some of the arguments in {}, which makes the supplied value an object, rather than the expected datatype.

Check the API documentation, which for example says that width wants a datatype which is string|number meaning a string or a number. You have specified {720} which is an object. Make sure all your arguments use the correct data types.

Check the render method of `Drawer`. Element type is invalid Error

1 Answers