Conflict with BlazorMonaco

[Crazy1van]

When using Apexcharts 2.0 or higher and using BlazorMonaco at the same time, I encounter an error: "SVG is not defined".

I suspect that there is some sort of javascript conflict between these two nuget packages. I know this is very specific, but BlazorMonaco is a fairly popular component.

Steps to reproduce:

• Create a new Blazor Server project.
• Add Apexcharts package and include a chart on main page,
• Add BlazorMonaco package (including the three _content scripts in _Layout.cshtml per instructions).
• Run the project. As soon as the chart tries to draw, it generates an unhandled exception.

It worked fine on version 1.3.0 and below.

[Alexr03]

I am encountering the same issue any help with this would be appreciated. 👍🏼

[Alexr03]

Came across this issue on the BlazorMonaco serdarciplak/BlazorMonaco#59
You can use the solution provided and it fixed my issues.

The prebuilt version only comes with json/yaml support but you can rebuild it with the languages you want.

[Crazy1van]

@Alexr03, thanks for that. That does appear to work, but unfortunately (AFAIK) Microsoft does not support loading Monaco in this manner, so it's more of a workaround rather than a viable solution (at least for us). We will probably just stay on 1.3.0 until this is resolved in BlazorMonaco (hoping). We may need to start looking into other charting solutions, although I do really like ApexCharts.

[Alexr03]

Are you sure they don't support it? They do provide documentation on it. https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md

For us at least, we have forked the repo, modified the webpack config to add the languages we need and serving the built files in our blazor app. Its fixed the issues we were having when using ApexCharts, Monaco & XTerm

[Crazy1van]

I see what you're saying. Yes, it looks like they support using webpack which bypasses the loader method responsible for this conflict. I'll investigate this as an alternative. Honestly, this still doesn't look "clean" since BlazorMonaco is not intended to be used this way, and it introduces additional complexity to our builds (by having to use webpack).

[joadan]

Hello,

I bit late to the party here but is there anything we can do on the Blazor-Apexcharts side to help with this issue?

[Crazy1van]

@joadan, thanks for your reply. I have not troubleshot this (we are so busy), but it appears that Blazor-ApexCharts 2.0 introduced something new that conflicts with BlazorMonaco's loader.js (written by Microsoft). I am hoping that whatever is causing this conflict could be "fixed" (I realize this is not a bug, per se). I described how to reproduce in the OP.

[Alexr03]

Hello,

I bit late to the party here but is there anything we can do on the Blazor-Apexcharts side to help with this issue?

I believe its related to this issue. serdarciplak/BlazorMonaco#20

[joadan]

@Alexr03, thank you.

@Crazy1van, in 2.0 Blazor-Apexcharts started using ECMAScript Modules (ESM) to lazy load the javascript file.
This according to blazor docs https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/?view=aspnetcore-8.0#javascript-isolation-in-javascript-modules.

I believe this issue is on the BlazorMonaco side, a workaround is proposed by @Alexr03 #355 (comment)

Not sure if there is anything more we can do here, or?

[joadan]

I was able to work around by using this fix, serdarciplak/BlazorMonaco#81 (comment)

[StephenOTT]

@joadan are you using the latest versions of each library?

[joadan]

@StephenOTT, sorry I was to fast.. I had to make a custom build in order to make it work.
https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md

[StephenOTT]

@joadan
I was able to make it work with this update to index.html:

<script src="_content/BlazorMonaco/jsInterop.js"></script>
<script src="https://cdn.jsdelivr.net/npm/monaco-yaml-prebuilt/dist/monaco-editor.min.js"></script>