React + JavaScript + ESM: Issue with Custom Dashboards components

[jacky.wu]

Hi,

I am currently using Highcharts in a React project with JavaScript and ESM (ECMAScript Module). While implementing a custom component based on the official example (YouTubeComponent), I encountered the following error:
https://imgur.com/a/ZNCJzZc

Even though this error is displayed, I closed the error message, and the YouTubeComponent was rendered correctly on the dashboard.
https://imgur.com/a/fkKY13w

What could be the possible reasons for this error? Is there a specific setting or adjustment required for using custom components with ESM in React (JavaScript)?

[dawid.d]

Hello,

Thanks for the question!

As far as I know, no custom adjustments are required. It looks like .catch is being called somewhere on an object that is probably not a Promise. `load()` is an asynchronous method, although I see that it is not marked as async in the documentation. If you add `async` in your code before `load`, will it work correctly?

Best regards

[jacky.wu]

Hi,

Thank you for your suggestion!

I tried adding async to the load method, and it resolved the issue perfectly. The error no longer appears!

I appreciate your quick and insightful response. This has been really helpful!

[dawid.d]

That's good to hear that it resolved the problem!

I raised a ticket to fix it in the docs, to avoid misleading in this aspect. Thanks for your input, it's really valuable!