react components plugin breaks obsidian new canvas feature box

[mayankkalbhor]

Open new canvas. Click on drag to card. Observe it gives error "Error in comonent "const Headercomponent = plugininternalnoteheadercompnent

[MeepTech]

Seems to be related to this renderer: https://github.com/elias-sundqvist/obsidian-react-components/blob/c90d943964d71287aca0eae990c5ced21d54cc76/src/header.tsx#L14

[MeepTech]

I sadly can't get the plugin to build to provide a fix myself, but editing this line: https://github.com/elias-sundqvist/obsidian-react-components/blob/c90d943964d71287aca0eae990c5ced21d54cc76/src/header.tsx#L17

To this: https://github.com/MeepTech/obsidian-react-components-canvas-fix/blob/master/src/header.tsx#L17

Seems to fix it for me

(since i can't build it I edited it in the main.js file in the plugins folder manually as well to check)

[mayankkalbhor]

Where did you make this change @MeepTech I dont see this file. I only see main.js in my obsidian vault where i am using this plugin

[MeepTech]

Where did you make this change @MeepTech I dont see this file. I only see main.js in my obsidian vault where i am using this plugin

@mayankkalbhor look for the registerHeaderProcessor function, and then inside that the call to registerMarkdownPostProcessor like in the code surrounding my change.

[mayankkalbhor]

@MeepTech The tsx file gets converted to js file and hence its not similar to what you have posted above. This is what i am seeing in main.js file in that portion that you suggested.

registerHeaderProcessor() {
    this.registerMarkdownPostProcessor((_, ctx) => __awaiter(this, void 0, void 0, function* () {
        var _a, _b;
        if (!((_a = ctx.containerEl) === null || _a === void 0 ? void 0 : _a.hasClass('markdown-preview-section'))) {
            return;
        }
        const viewContainer = ctx.containerEl.parentElement;
        const existingHeader = (_b = viewContainer === null || viewContainer === void 0 ? void 0 : viewContainer.getElementsByClassName('reactHeaderComponent')) === null || _b === void 0 ? void 0 : _b[0];
        const previousContext = this.renderedHeaderMap.get(existingHeader);
        if (!previousContext || previousContext != ctx) {
            if (existingHeader) {
                this.ReactDOM.unmountComponentAtNode(existingHeader);
                existingHeader.remove();
            }
            const container = document.createElement('div');
            container.addClasses(['reactHeaderComponent', 'markdown-preview-sizer', 'markdown-preview-section']);
            this.renderedHeaderMap.set(container, ctx);
            viewContainer === null || viewContainer === void 0 ? void 0 : viewContainer.insertBefore(container, ctx.containerEl);
            this.attachComponent('const HeaderComponent = pluginInternalNoteHeaderComponent; <HeaderComponent/>', container, ctx);
        }
    }));
}

Can you tell where i need to make this change now?

[MeepTech]

Place it on a new line before var _a, _b; @mayankkalbhor

[mayankkalbhor]

@MeepTech Thanks for the help. I tested it working fine. Let me put in all my vaults. This is good workwround until fixed by the dev team.

[fireflysss]

open main.js and do like this ... registerHeaderProcessor() { this.registerMarkdownPostProcessor((_, ctx) => __awaiter(this, void 0, void 0, function* () { if (!ctx.sourcePath || (!ctx.containerEl?.hasClass('markdown-preview-section'))) return; var _a, _b; if (!((_a = ctx.containerEl) === null || _a === void 0 ? void 0 : _a.hasClass('markdown-preview-section'))) { return; } ...