'TypeError: Cannot read properties of undefined (reading 'setExtraStackFrame')

I am currently facing issue below mentioned. Tried many changes to fix it but didn't got a perfect solution for this.

    at setCurrentlyValidatingElement (react-jsx-runtime.development.jss:574:1)
    at checkPropTypes (react-jsx-runtime.development.jss:618:1)
    at validatePropTypes (react-jsx-runtime.development.jss:1072:1)
    at jsxWithValidation (react-jsx-runtime.development.jss:1192:1)
    at jsxWithValidationDynamic (react-jsx-runtime.development.jss:1209:1)
    at MyComponent.render (MyComponent.jss:85:35)
    at Ho (935.js:2:72533)
    at Qo (935.js:2:72332)
    at Hu (935.js:2:113091)
    at Pi (935.js:2:99309) {componentStack: '\n    at MyComponent (http://localhost:800…://localhost:8000/777.js:1:17479)\n    at Suspense'}

MyComponent.jss:85 has a different component from a module which is throwing method error, when tried removing the component the error vanishes, but the component is needed. I tried with matching the common versions of dependencies. It throws same error.

import React from 'react'
import { SidePanel } from '@carbon/ibm-products'
import '@carbon/ibm-products/scss/index-without-carbon.scss'

class MyComponent extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      error: {}
    }
  }
  componentDidMount () {
    this.setState({
      error: ''
    })
    
  }
  render () {
    const { onSubmit, isOpen, onClose } = this.props
    return (
      <div>
        <SidePanel
          className='test'
          onRequestClose={() => onClose()}
          title='Title'
          actions={[
            {
              label: 'ok',
              onClick: () => onSubmit(),
              kind: 'primary'
            },
            {
              label: 'cancel',
              onClick: () => onClose(),
              kind: 'secondary'
            }
          ]}
        >
          Hello INSIDE SIDE
        </SidePanel> 
      </div>
    )
  }
}

MyComponent.displayName = 'MyComponent'

MyComponent.propTypes = {
  isOpen: PropTypes.bool,
  onClose: PropTypes.func,
  onSubmit: PropTypes.func
}
export default MyComponent


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source