Uncaught TypeError: Cannot read property 'getParent' of undefined

user_13715122 0
Viewed 1659

the component create (drawer antd):

export default class Cadastrar extends React.Component {
    state = {
        visible: true,
    }


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

    closeDrawer = () => {
        this.setState({
            visible: false,
        })
    }

    render() {
        return (
            <>
                <Drawer
                    title="Create a new account"
                    width={720}
                    onClose={this.closeDrawer}
                    visible={this.state.visible}
                    bodyStyle={{ paddingBottom: 80 }}
                    footer={
                        <div
                            style={{
                                textAlign: 'right',
                            }}
                        >
                            <Button
                                onClick={this.closeDrawer}
                                style={{ marginRight: 8 }}
                            >
                                Cancel
                            </Button>
                            <Button onClick={this.closeDrawer} type="primary">
                                Submit
                            </Button>
                        </div>
                    }
                >
                   teste
                </Drawer>
            </>
        )
    }
}

the index users:

export default class Usuarios extends React.Component {
    render() {
        const columns = [...]

        const data = [...]

        return (
            <React.Fragment>
                <Row gutter={16} className="box-actions">
                    <Col className="gutter-row" span={18} align="start">
                        {' '}
                        <Button
                            type="primary"
                            onClick={() => {
                                this.refs.cadastrar.showDrawer()
                            }}
                        >
                            Cadastrar
                        </Button>
                    </Col>
                    <Col className="gutter-row" span={6}>
                        <Search
                            placeholder="Buscar..."
                            onSearch={value => console.log(value)}
                        />
                    </Col>
                </Row>
                <Table columns={columns} dataSource={data} />
                <Cadastrar ref="cadastrar" />
            </React.Fragment>
        )
    }
}

note: the component:

<Cadastrar ref="cadastrar" />

is called by 

<Button
   type="primary"
   onClick={() => {
     this.refs.cadastrar.showDrawer()
   }}
>

the error:

PortalWrapper.js?d56f:236 Uncaught TypeError: Cannot read property 'getParent' of undefined
    at getDerivedStateFromProps (PortalWrapper.js?d56f:236)
    at applyDerivedStateFromProps (react-dom.development.js:12603)
    at updateClassInstance (react-dom.development.js:13207)
    at updateClassComponent (react-dom.development.js:17107)
    at beginWork (react-dom.development.js:18620)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22154)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at react-dom.development.js:11089
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
    at flushSyncCallbackQueue (react-dom.development.js:11072)
    at discreteUpdates$1 (react-dom.development.js:21893)
    at discreteUpdates (react-dom.development.js:806)
    at dispatchDiscreteEvent (react-dom.development.js:4168)
getDerivedStateFromProps @ PortalWrapper.js?d56f:236
applyDerivedStateFromProps @ react-dom.development.js:12603
updateClassInstance @ react-dom.development.js:13207
updateClassComponent @ react-dom.development.js:17107
beginWork @ react-dom.development.js:18620
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
beginWork$1 @ react-dom.development.js:23203
performUnitOfWork @ react-dom.development.js:22154
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
discreteUpdates$1 @ react-dom.development.js:21893
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168
react_devtools_backend.js:6 The above error occurred in the <PortalWrapper> component:
    in PortalWrapper (created by DrawerWrapper)
    in DrawerWrapper (created by Context.Consumer)
    in Drawer (created by Context.Consumer)
    in withConfigConsumer(Drawer) (at teste.js:23)
    in Teste (at teste/index.js:9)
    in Index (at _app.js:49)
    in main (created by Basic)
    in Basic (created by Context.Consumer)
    in Content (at _app.js:48)
    in section (created by Context.Consumer)
    in BasicLayout (created by Context.Consumer)
    in Layout (at _app.js:30)
    in section (created by Context.Consumer)
    in BasicLayout (created by Context.Consumer)
    in Layout (at _app.js:28)
    in AppLayout
    in ErrorBoundary (created by ReactDevOverlay)
    in ReactDevOverlay (created by Container)
    in Container (created by AppContainer)
    in AppContainer
    in Root

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

I was using it in the same way with razzle, but when I migrated to nextjs, it presented this error

code with next: https://gitlab.com/henriquezolini/next-antdesign (has errors)

code with Razzle: https://gitlab.com/henriquezolini/razzle-ant-design (works)

antd next.js reactjs node.js javascript
2 Answers

Try rm -rf node_modules package-lock.json && npm install.

Just had this same issue, and that fixed it. A dependency of antd was updated to a newer version. Deleting the package-lock.json file and installing again updates for the latest wanted dependencies.

https://github.com/ant-design/ant-design/issues/24858

user_46214970

In some cases this may be caused by the layer trying to be added the stage before it is defined. To fix this you can change this one: 

var width = window.innerWidth;
var height = window.innerHeight;

var stage = new Konva.Stage({
  container: 'area',
  width: width,
  height: height
});
stage.add(layer); // here is the problem
var layer = new Konva.Layer();
to:

var width = window.innerWidth;
var height = window.innerHeight;

var stage = new Konva.Stage({
  container: 'area',
  width: width,
  height: height
});

var layer = new Konva.Layer();
stage.add(layer); // it's solved

user_190005960
Related