How to add (mount) 2 riot.js component on html page

Question

When I add (mount) 2 components on HTML page I receive "Uncaught TypeError: Cannot read property 'class' of undefined at mount$1" error

<body>
<script src="https://cdn.jsdelivr.net/npm/riot@3.13/riot+compiler.js"> 
</script>
<script type="riot/tag">
<dict2-app>dict2-app</dict2-app>
</script>
<dict2-app></dict2-app>
<script>
riot.mount('dict2-app')
</script>
<script type="riot/tag">
<dict3-app>dict3-app</dict3-app>
</script>
<dict3-app></dict3-app>
<script>
riot.mount('dict3-app')
</script>
</body>

The code works properly when I comment one of //riot.mount('dict{X}-app')

score 0 · Answer 1 · answered Jul 26 '19 at 15:39

You don't need to call multiple riot.mount, you need only one like below:

riot.mount('*')

Your code will be:

<body>
    <script src="https://cdn.jsdelivr.net/npm/riot@3.13/riot+compiler.js"> 
    </script>
    <dict2-app>dict2-app</dict2-app>
    <dict2-app></dict2-app>
    <dict3-app>dict3-app</dict3-app>
    <dict3-app></dict3-app>
    <script>
        riot.mount('*')
    </script>
</body>

chriscauley · Answer 2 · 2019-07-30T17:55:22.333

Uncaught TypeError: Cannot read property 'class' of undefined at mount$1 is the unhelpful error message meaning "riot doesn't know of a component with this name". Check to make sure you're including both templates. Add console.log files to each file and read the compiled source files. If the logs don't appear or appear after the error, that's your problem.

And the worst, which is something I'm wrestling with, is if you're somehow including riot twice. Basically the first copy gets the tags registered with it and the second copy unregisters them (or more accurately, replaces window.riot with a copy that has no knowledge of your tags).

EDIT:

I tried your code sample and got the same error. It works with the other answer (riot.mount('*')) and also works fine with:

  <script>
    riot.mount('dict2-app')
    riot.mount('dict3-app')
  </script>

It also works with putting the script tags all at the end.

<body>
  <script src="https://cdn.jsdelivr.net/npm/riot@3.13/riot+compiler.js">
  </script>
  <script type="riot/tag">
    <dict2-app>dict2-app</dict2-app>
  </script>
  <dict2-app></dict2-app>
  <script type="riot/tag">
    <dict3-app>dict3-app</dict3-app>
  </script>
  <dict3-app></dict3-app>
  <script>
    riot.mount('dict2-app')
  </script>
  <script>
    riot.mount('dict3-app')
  </script>
</body>

No clue as to why this is an issue.

How to add (mount) 2 riot.js component on html page

2 Answers2

EDIT: