Marko Dynamic Tag with Component

Question

I have a marko website where I have some dynamic components being called via a for loop:

/pages/note/index.marko

import layout from "../../layouts/base"

<${layout} title="test">
    <for|card| of=input.cards>
        <${card} />
    </for>
</>

this is given a set of "notes" (just other marko files with the content) that I want to fill the page with dynamically based on the request (this is handled in the server just fine). It is loading these notes fine.

However, when I have the card marko file use a component, the component ony half works.

note1/index.marko

<math>5x+1=11</math>

math/index.marko

class {
    onCreate() {
        console.log("CREATED") // runs
    }

    onMount() {
        console.log("MOUNTED") // doesn't run
        // eventually I plan to run some math rendering code here
    }
}

<span><${input.renderBody} /></span>

The issue is that the browser side of things never run. Also, I am getting this inexplicable error in the browser edit: changed the rendering in the routing. somehow the error went away

routes.js

...
app.get("/note.html", async (req, res, next) => {
    let title = req.query.title || "" // get the requested card
    let dependencies = request(`./notes/${title}/dependencies.json`) || [] // get all of the linked cards to the requested card
    let cards = [title, ...dependencies].map(note => request(`./notes/${note}`)) // get the marko elements for each card
    // by this point, "cards" is a list with marko templates from the /notes/ directory

    // render
    let page = request(`./pages/note`, next)
    let out = page.render({"title": title, "cards": cards}, res)
}
...

---

My file structure is set up like this:

server.js
routes.js
pages/
    note/
        index.marko
notes/
    note1/
        index.marko
    note2...
components/
    math/
        index.marko
layouts/
    base/
        index.marko

Using: node, express, marko, & lasso.

Answer 1

Your custom tag of <math> is colliding with the native MathML <math> element, which is why you’re getting that error only in the browser.

Try naming it something else, like <Math> or <my-math>.