Error with connecting any custom plugin

[AleksMelkov]

Example in documentation:

class customImage {
    static get toolbox() {
        return {
            title: 'Image',
            icon: '<svg width="17" height="15" viewBox="0 0 336 276" xmlns="http://www.w3.org/2000/svg"><path d="M291 150V79c0-19-15-34-34-34H79c-19 0-34 15-34 34v42l67-44 81 72 56-29 42 30zm0 52l-43-30-56 30-81-67-66 39v23c0 19 15 34 34 34h178c17 0 31-13 34-29zM79 0h178c44 0 79 35 79 79v118c0 44-35 79-79 79H79c-44 0-79-35-79-79V79C0 35 35 0 79 0z"/></svg>'
        };
    }
    constructor({data}){
        this.data = data;
    }
    render(){
        return document.createElement('input');
    }
    save(blockContent){
        return {
            url: blockContent.value
        }
    }
}

And then i connecting my plugin in Vue component like this:

    import EditorJS from '@editorjs/editorjs';
    import customImage from '../../../editor/custom-image'
    export default {
        data: function () {
            const editor = new EditorJS({
                holderId: 'editorjs',
                autofocus: true,
                tools: {
                    image: customImage,
                },
            });
            return {
                editor:editor,
            }
        },
        mounted() {
            this.editor.isReady
                .then(() => {
                    console.log('Editor.js is ready to work!')
                })
                .catch((reason) => {
                    console.log(`Editor.js initialization failed because of ${reason}`)
                });
        },
        methods: {
            save: function () {
                this.editor.save().then((outputData) => {
                    console.log('Article data: ', outputData)
                }).catch((error) => {
                    console.log('Saving failed: ', error)
                });
            }
        }
    }

But in the console, an errors awaits me Module Tools was skipped because of Error: Tool «image» must be a constructor function or an object with function in the «class» property And app.js:224 Uncaught (in promise) TypeError: Cannot read property 'firstInput' of undefined What wrong with my code or me...

[gohabereg]

Hi @AleksMelkov, Make sure you export your Tool properly, so when importing it, import contains Tool's class

[ageddesi]

I am getting the same error, did you manage to resolve your issue?

[ageddesi]

Hey @AleksMelkov I managed to get my plugin working but importing it like this

import {Speech} from '../Plugins/Speech';

and I have the class being export like

export class Speech{

    static get toolbox() {
        return {
          title: 'Speech',
          icon: '<svg id="Layer_1" enable-background="new 0 0 512 512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><g><g><g><path d="m309.333 341.333c29.419 0 53.333-23.936 53.333-53.333v-192c0-29.397-23.915-53.333-53.333-53.333h-256c-29.418 0-53.333 23.936-53.333 53.333v192c0 29.397 23.915 53.333 53.333 53.333h32v53.333c0 4.032 2.283 7.723 5.888 9.536 1.493.747 3.136 1.131 4.779 1.131 2.261 0 4.523-.725 6.4-2.133l82.496-61.867z"/><path d="m458.667 106.667h-64c-5.888 0-10.667 4.779-10.667 10.667v170.666c0 41.173-33.493 74.667-74.667 74.667h-113.77c-2.304 0-4.565.747-6.4 2.133l-17.685 13.269c-2.731 2.048-4.309 5.248-4.267 8.64.043 3.392 1.685 6.571 4.459 8.555 9.173 6.592 19.904 10.069 30.997 10.069h124.437l82.496 61.867c1.877 1.408 4.117 2.133 6.4 2.133 1.621 0 3.264-.384 4.779-1.131 3.605-1.813 5.888-5.504 5.888-9.536v-53.333h32c29.418 0 53.333-23.936 53.333-53.333v-192c0-29.397-23.915-53.333-53.333-53.333z"/></g></g></g><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/></svg>'
        };
      }

    render(){
        return document.createElement('input');
    }

    save(blockContent){
        return {
            url: blockContent.value
        }
    }
}

you could also default export to make it easier

[akshayrathodar]

Got the Same Error Not Able to Create Custom Plugin