Block «list» skipped because of plugins error

[plun1331]

DataCloneError: Failed to execute 'structuredClone' on 'Window': #<Object> could not be cloned.
    at eh (https://app.rcavon.org/_nuxt/D7sPVPPj.js:57:48382)
    at new kt (https://app.rcavon.org/_nuxt/D7sPVPPj.js:57:49528)
    at sn.create (https://app.rcavon.org/_nuxt/D7sPVPPj.js:43:8953)
    at new pe (https://app.rcavon.org/_nuxt/D7sPVPPj.js:10:18986)
    at Sc.composeBlock (https://app.rcavon.org/_nuxt/D7sPVPPj.js:34:54085)
    at https://app.rcavon.org/_nuxt/D7sPVPPj.js:36:26163
    at l (https://app.rcavon.org/_nuxt/Jr2nG2jA.js:10:7725)
    at Array.map (<anonymous>)
    at Wt (https://app.rcavon.org/_nuxt/Jr2nG2jA.js:10:7815)
    at Proxy.map (https://app.rcavon.org/_nuxt/Jr2nG2jA.js:10:6843)
    at https://app.rcavon.org/_nuxt/D7sPVPPj.js:36:25949
    at new Promise (<anonymous>)
    at Rc.render (https://app.rcavon.org/_nuxt/D7sPVPPj.js:36:25849)
    at Gc.render (https://app.rcavon.org/_nuxt/D7sPVPPj.js:44:11706)
    at https://app.rcavon.org/_nuxt/D7sPVPPj.js:44:9102

Code:

onMounted(async () => {
    editor = new EditorJS({
        holder: 'editorjs',
        tools: {
            header: {
                class: Header,
                inlineToolbar: true,
                config: {
                    levels: [2, 3, 4],
                    defaultLevel: 2
                },
            },
            list: {
                class: EditorjsList,
                inlineToolbar: true,
                config: {
                    defaultStyle: 'ordered'
                }
            },
            table: {
                class: Table,
                inlineToolbar: true,
                config: {
                    rows: 1,
                    cols: 1,
                    stretched: false,
                }
            },
            horizontalRule: HorizontalRule,
        },
        data: props.data,
        async onChange(api, event) {
            emit('change', api, event);
        }
    });
})

List data:

            {
                "id": "UzyF_Kf6qA",
                "type": "list",
                "data": {
                    "meta": {},
                    "items": [
                        {
                            "meta": {},
                            "items": [],
                            "content": "test"
                        },
                        {
                            "meta": {},
                            "items": [],
                            "content": "test 2"
                        }
                    ],
                    "style": "unordered"
                }
            },
            {
                "id": "lEMWmg2jf_",
                "type": "list",
                "data": {
                    "meta": {
                        "counterType": "numeric"
                    },
                    "items": [
                        {
                            "meta": {},
                            "items": [],
                            "content": "test"
                        },
                        {
                            "meta": {},
                            "items": [],
                            "content": "test 2"
                        }
                    ],
                    "style": "ordered"
                }
            },

Versioning:
"@editorjs/editorjs": "^2.30.8",
"@editorjs/header": "^2.8.8",
"@editorjs/list": "^2.0.8",
"@editorjs/table": "^2.4.5",
"@sentry/nuxt": "^9.29.0",
"editorjs-html": "^3.4.3",
"nuxt": "^3.17.5",
"nuxt-icons": "^3.2.1",
"vue": "latest",
"vue-router": "latest"

Only happens when loading the data into the editor, not when rendering it as HTML or creating new blocks.

[plun1331]

Downgrading to "@editorjs/list": "^2.0.6" fixes the issue

[petrprikryl]

Same problem here

[NicolasDurant]

Same problem, downgrading doesn't work for me either.

[NicolasDurant]

I was able to make it work, the issue is that, we are using Vue/Nuxt and trying to initialize the editor via a passed prop to the component. Therefore you are initializing your editor with a reactive instance variable.

onMounted(async () => {
    editor = new EditorJS({
        holder: 'editorjs',
        tools: {
            header: {
                class: Header,
                inlineToolbar: true,
                config: {
                    levels: [2, 3, 4],
                    defaultLevel: 2
                },
            },
            list: {
                class: EditorjsList,
                inlineToolbar: true,
                config: {
                    defaultStyle: 'ordered'
                }
            },
            table: {
                class: Table,
                inlineToolbar: true,
                config: {
                    rows: 1,
                    cols: 1,
                    stretched: false,
                }
            },
            horizontalRule: HorizontalRule,
        },
        data: props.data, // the issue
        async onChange(api, event) {
            emit('change', api, event);
        }
    });
})

You can do the good old:

...,
data: JSON.parse(JSON.stringify(props.data)),
...,

Or the nicer toRaw() method by Vue:

...,
data: toRaw(props.data),
...,