TechQA.

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

452 views Asked by At

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/[email protected]/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')

riot.js
Original Q&A
2

There are 2 answers

0
Ricardo Malias On

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/[email protected]/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>
0
chriscauley On

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/[email protected]/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.

Related Questions in RIOT.JS

Popular Questions

Trending Questions