Error "Cannot read properties of null (reading `removeChild`)" on moveable resize

[chenxeed]

Environments

• Framework name: Vue
• Framework version: 2.6
• Moveable Component version: 0.30.0
• Testable Address(optional):

Description

Hello!

I am trying to debug an error that has been triggered quite a lot from our user whenever the user is trying to resize the moveable handler. Based on the sentry log, it came from moveable. Here's the log:

The weird thing here is, I cannot reproduce it simply on my own. I am not sure what went wrong, but from the debugging, it seems like the error possibly comes from the _unmount function triggered on removing the custom able element.

I have a custom able element setup which is basically similar to dimensionLabel setup. The only thing I missed to do was to name the element with class starting with prefix moveable-. I am wondering why the prefix is required, wish to know more about it 🙏

As I mentioned that I can't reproduce this on my own, so the sentry screenshot above is what I can only provide, no code sample available 🙏 Hope to hear back from you. Thanks!

[daybrush]

@chenxeed

May I know how to use it? There seems to be a process of creating an instance of moveable and dragging it. Can i check the code?

[chenxeed]

Sure, here's the piece of the code. Note that this is not the exact code, but the gist of it to toggle the dimension-label. The main idea is, to only show the dimension-label when user is resizing the item.

// dimension-label.ts

import { MoveableManagerInterface, Renderer } from 'react-moveable/declaration/types'

export default {
  // name is encourage to be written as camel case
  // as it will be used as moveable option property
  name: 'dimensionLabel',
  props: {},
  events: {},
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  render (moveable: MoveableManagerInterface<any, any>, React: Renderer) {
    const rect = moveable.getRect()
    const label = `${Math.round(rect.offsetWidth)} \u00D7 ${Math.round(rect.offsetHeight)}`

    return React.createElement('div', {
      className: 'handler-dimension-label',
      key: 'handler-dimension-label',
      style: {
        position: 'absolute',
        left: `${rect.width / 2}px`,
        top: `${rect.height + 12}px`,
        background: 'var(--secondary)',
        borderRadius: '4px',
        padding: '4px',
        color: 'white',
        fontSize: '11px',
        whiteSpace: 'nowrap',
        fontWeight: 'bold',
        transform: 'translate(-50%, 0px)'
      }
    }, [label])
  }
}

// file to initiate the moveable
const moveableConfig = {
    // Config
    edge: false,
    target: [],
    rootContainer,
    keepRatio: true,
    origin: true,
    className: `my-moveable`,
    throttleRotate: 1,
    passDragArea: true,

    props: {
      dimensionLabel: false
    },

    // Ables
    draggable: true,
    resizable: true,
    rotatable: true,
    scrollable: true,
    snappable: true,
    ables: [DimensionLabel],

    // Scrolling
    scrollContainer: rootContainer || undefined,

    // Snapping
    // Ref: https://github.com/daybrush/moveable/releases/tag/0.27.0
    snapDirections: { center: true, middle: true },
    elementSnapDirections: { center: true, middle: true },
    snapGap: true,
    snapDistFormat: () => '',
    snapThreshold: 2
  }

const moveable = new Moveable(container, moveableConfig)

moveable.on('resizeStart', (event) => {
      const { inputEvent: userEvent, setMin, setMax } = event
      // show size label
      event.currentTarget.setState({
        props: {
          dimensionLabel: true
        }
      })
    })
    .on('resizeEnd', (event) => {
      // hide size label
      event.currentTarget.setState({
        props: {
          dimensionLabel: false
        }
      })
    })

[daybrush]

@chenxeed

• lit-moveable 0.12.1
• moveable 0.35.1
• preact-moveable 0.37.1
• react-compat-moveable 0.23.1
• react-moveable 0.38.1
• svelte-moveable 0.27.1
• vue-moveable 2.0.0-beta.33
• vue3-moveable 0.10.1
• ngx-moveable 0.32.1

moveable's new version is released.

I'm not sure, but try updating the version? I recently modified react-simple-compat.