Importing an external Javascript library for custom Lovelace card

Development
1

I’m trying to create a custom card that will use markdown syntax, and even then not every single markdown ability in the universe. I’ve come across markdown parsers that are about 2kb in size and render the basics of what I need.

What do I need to do in order to get a library like this imported into my custom card? As a starting point, I’m using the custom card example at https://developers.home-assistant.io/docs/en/lovelace_custom_card.html - I’ve heavily modified it with success before, but not with an external library.

I have other custom cards that successfully use syntax similar to

import {function} from "./library.js" before the class definition. However, I’ve tried many variants on this statement, as shown in the second example on the dev-docs page, and get nothing but Red Boxes Of Hate and errors about illegal left-side assignments or unexpected tokens.

Can someone lend a guy a hand and help me include a simple markdown library like Snarkdown or something equally small?

(Alternatively, if someone could help me find the HA source code for the existing Lovelace Markdown card, I could probably expand on that - but I can’t seem to find it.)

Thanks.

1 Like
2

I have a problem similar to yours, but with Vue.js. I get a

Uncaught SyntaxError: Unexpected identifier

when importing it.

When you mention that you successfully imported libraries, could you share an example so that I can test it?

3

Regarding the unexpected identifier, you probably have to change to type in your lovelace config to module, i.e.

  - url: /local/your-card.js
    type: module