[Allignment + Image plugin]: Cannot read property 'getBoundingClientRect' of null

[tenrocket]

Getting a fun error while using allignment and image plugin.

createDecorator.js:58 Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null at BlockAlignmentDecorator._this.componentDidUpdate (createDecorator.js:58)

It looks like it's trying to find the dom node but unable to. Not sure quite why.

componentDidUpdate = () => {
    if (this.props.blockProps.isFocused && this.props.blockProps.isCollapsedSelection) {
      // TODO figure out if and how to achieve this without fetching the DOM node
      // eslint-disable-next-line react/no-find-dom-node
      const blockNode = ReactDOM.findDOMNode(this);

Heres my setup:

  constructor(props) {

    this.AlignmentPlugin = createAlignmentPlugin();
    this.FocusPlugin =  createFocusPlugin();
    this.DndPlugin = createDndPlugin();

    //Images and styles
    const decorator = composeDecorators(
      this.AlignmentPlugin.decorator,
      this.FocusPlugin.decorator,
    );

    this.ImagePlugin = createImagePlugin({decorator});


    this.plugins = [
      ...
      this.ImagePlugin,
      this.AlignmentPlugin,
      this.FocusPlugin,
    ];

const { AlignmentTool } = this.AlignmentPlugin;
const { MentionSuggestions, plugins } = this;

return (
          <div key={this.props.id}>
            <div onClick={this.focus}>
              <Editor
                  editorState={editorState}
                  onChange={this.onChange.bind(this)}
                  plugins={plugins}
                  handleKeyCommand={this.handleKeyCommand.bind(this)}
                  ref={(element) => { this.editor = element; }}
                  placeholder="Make your dreams come true."
                />
              <AlignmentTool />
....

Thoughts? Anyone experienced something similar?

[myyellowshoe]

Also very weird, as I dive into this, I noticed the class name getting applied for the alignment /image plugin seems off:

<img src="https://mylocation/image.png" role="presentation" class="draftJsEmojiPlugin__image__192TI draftJsEmojiPlugin__focused__3Mksn" data-reactid=".0.1.2.0.1.0.2.0.0.$editor0.0.0.$ov7r.$ov7r">

<div class="draftJsEmojiPlugin__alignmentTool__2mkQr" data-reactid=".0.1.2.0.1.0.2.0.1" style="transform: translate(-50%) scale(0);"></div>

"draftJsEmojiPlugin__alignmentTool__2mkQr" err wha?

Could this be a cache thing? Could that be why I'm getting such a weird error?

(changed my github account, but same person)

[ismyrnow]

Those class names are a result of the css build process, so they're normal. I suspect they do change on each release though.

[freedomlang]

@tenrocket can not reproduce the error you mentioned above at the online documentation, can you please update to the latest version and have a try

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[fatjan]

I have the same issue, could this issue be reopened? index.esm.js:49 Uncaught TypeError: wrapper.current.getBoundingClientRect is not a function

Thank you

[fxOne]

Sure, can you provide a reproducible example and a solution?

[github-actions[bot]]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days.