[sideToolbarPlugin] : 'Cannot read property 'getBoundingClientRect' of undefined'

i am constantly getting this error and the side toolbar is also not showing up -

import React, { Component } from 'react'
import Editor, { createEditorStateWithText } from 'draft-js-plugins-editor'
import createSideToolbarPlugin from 'draft-js-side-toolbar-plugin'
import 'draft-js-side-toolbar-plugin/lib/plugin.css'

const sideToolbarPlugin = createSideToolbarPlugin()
const { SideToolbar } = sideToolbarPlugin
const plugins = [sideToolbarPlugin]
const text = 'Write Something ...'

class Creator extends Component { 
     state = {
           editorState: createEditorStateWithText(text)
     }

 onChange = (editorState) => { 
      this.setState({
             editorState
      })
  }

  focus = () => { 
     this.main.focus()
 }

 render() { 
    console.log(this.state)
    return (
      <div style={{ marginTop: 20, minHeight: '300px' }} onClick={this.focus}>
        <div>
           <Editor
              editorState={this.state.editorState}
              onChange={this.onChange}
               plugins={plugins}
                ref={(element) => { this.main = element}}  
           />
          <SideToolbar/>  
       </div>
   </div>
 )
}
}
 export default Creator

"draft-js": "^0.10.5", "draft-js-plugins-editor": "^2.0.4", "draft-js-side-toolbar-plugin": "^2.0.1",

error - TypeError: Cannot read property 'getBoundingClientRect' of undefined

[iamawwsome]

I had the same issue.

Try downgrading your draft-js to 0.10.1. That’s how I got the draft-js-side-toolbar-plugin to work.

npm install draft-js@0.10.1 --save

[juliankrispel]

try version the latest version of the plugins please - it’s now fixed