ReactJs Getting a styleKeeperContext' of undefined error when using Radium plugin

Question

I am getting the following error : "TypeError: Cannot read property 'styleKeeperContext' of undefined" , when i try to add a hover pseudo Class to a button that i am styling using the Radium plugin

I have tried to exclude the Radium import to see if the Rootstyle Property would still work and it did.The problem occurs whenever I add the Radium Import and export my app component Encapsulated by the Radium Function

My assumption is that the there is something i am not doing correctly either by the way i am useing the hover pseudo class , or something else , I do not understand the term 'styleKeeperContext'

how can i get rid of this error and still use The plugin , while keeping the styles scoped to my component

Screen shots of the code below

my import statement my import statement

my scoped styles

my Component export error message

Answer 1

I started getting this error when I added this.state to a component:

const MyComponent extends Component {
  constructor() {
    super(); // I messed up here
    this.state = { count: 0 };
  }
  // etc.
}

When calling the constructor, I forgot to pass in the component's props to super(). A silly mistake to make, but the Radium error made it difficult to figure out what the root cause was.

Fixing it like this resolved the error:

const MyComponent extends Component {
  constructor(props) { // Add props argument
    super(props); // Pass props to super()
    this.state = { count: 0 };
  }
  // etc.
}

Answer 2

I have faced the same issue and it was resolved after lowering the Radium module version from 0.26.0 to 0.25.2.