Custom UI Plugin: Cannot add property __, object is not extensible

Hello,

I’m trying to create a new UI plugin and whenever I’m trying to use it, by that specifying a target or add it as an option in DashboardModal, I’m getting this error:

Unhandled Rejection (TypeError): Cannot add property __, object is not extensible

I tried multiple ideas similar with ProgressBar and StatusBar but nothing workable so far. What I’m aiming is to replace progress bar in Dashboard with another content section for advanced details (ex: a table).

So far, one of my trying plugins is like this:

const { UIPlugin } = require('@uppy/core')

export default class CsvUi extends UIPlugin {
    // eslint-disable-next-line global-require

    constructor (uppy, opts) {
        super(uppy, opts)
        this.type = 'progressindicator'
        this.id = this.opts.id || 'csvui'
        this.title = 'CsvUi'

        const defaultOptions = {}

        this.opts = { ...defaultOptions, ...opts }
    }

    render = (state) => {
        return (
            <div style={{backgroundColor: 'red'}}>testing this plugin</div>
        )
    }

    install () {
        const { target } = this.opts
        if (target) {
            this.mount(target, this)
        }
    }

    uninstall () {
        this.unmount()
    }
}

Note: if you’re trying to add a target like ‘.Dashboard’ or ‘body’ or you’re using it in your React app like this, is gonna give you the mentioned error:

            <DashboardModal
                uppy={uppy}
                closeModalOnClickOutside
                open={modalOpen}
                id="dashboard"
                onRequestClose={handleClose}
                doneButtonHandler={false}
                plugins={['csvui']}
                showProgressDetails={false}
            />

[goto-bus-stop]

A UI plugin’s render function must return Preact elements, not React elements, I think that might be what’s wrong here. If you do this at the top of your plugin file it might do the trick:

/** @jsx h */
import { h } from 'preact'

(and add preact as a dependency in your project.)

If so we could probably detect React elements in our ui plugin code and throw a more helpful error.

[Murderlon]

Closing this to keep the issue count maintainable. Feel free to continue the discussion here if the issue persists and we’ll help.