Why am I getting `TypeError: Cannot read properties of undefined (reading 'setExtraStackFrame')` in my React component using `@carbon/ibm-products`?

Ask a Question
1

I have a React component using SidePanel from @carbon/ibm-products. When rendering, I get the following error:

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

The error disappears if I remove the SidePanel component, but I need it. I’ve tried matching dependency versions, but the error persists.

Here’s a simplified version of my component:

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 (
      <SidePanel
        className='test'
        onRequestClose={() => onClose()}
        title='Title'
        actions={[
          { label: 'ok', onClick: () => onSubmit(), kind: 'primary' },
          { label: 'cancel', onClick: () => onClose(), kind: 'secondary' }
        ]}
      >
        Hello INSIDE SIDE
      </SidePanel>
    )
  }
}

MyComponent.displayName = 'MyComponent'
MyComponent.propTypes = {
  isOpen: PropTypes.bool,
  onClose: PropTypes.func,
  onSubmit: PropTypes.func
}

export default MyComponent

Why is setExtraStackFrame undefined, and how can I fix this while keeping SidePanel in the component?

2

Ensure a single React version

Check your package.json:

"dependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "@carbon/ibm-products": "latest"
}

Run:

npm ls react

You should see only one version. If @carbon/ibm-products brings its own React, force a single version using resolutions (npm v8+ or yarn):

"resolutions": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
}

Then reinstall:

rm -rf node_modules package-lock.json
npm install
3

Update @carbon/ibm-products to a React 18-compatible version

Check the package’s release notes to confirm React 18 support.

For example:

npm install @carbon/ibm-products@^3.0.0

Versions prior to 3.x may not fully support React 18.

4

Ensure you import SCSS correctly

index-without-carbon.scss is fine, but make sure Carbon base styles are included somewhere, because missing context may cause internal React warnings.

Typically, you should have:

import 'carbon-components/scss/globals/scss/styles.scss'
import '@carbon/ibm-products/scss/index-without-carbon.scss'