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')
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>
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.
Related
One of the vue's instance of my app seems to instantiate too early. Even with a document.addEventListener('DOMContentLoaded', ...). As a consequence, I noticed that the event listeners aren't properly binded. A simple #click="test" (where test references to a console.log) didn't work.
Below, see the code where the #click doesn't work. It is a component located in a vue instance, instanciated on DOMContentReady :
const navBurger = {
template: `
<nav class="burgerNav"">
<button class="burgerNav__icon" #click="test">
</button>
</nav>
`,
methods: {
test: function() {
console.log('test')
}
}
}
export default navBurger
I "solved" the problem by adding a little timeout (200ms) before instanciation to the root instance of this component but it seems a messy and fragile solution. Is there any clean way to instantiate at the exact right time ? I need this instance to be ready as quick as possible because it contains the navigation located in the header.
Below, find the loading order of the js files. Targetted file is assets/js/components/nav/nav.js. However changing this order doesn't solve the problem.
<!--========== VUE ==========-->
<script src="<?= url('assets') ?>/js/libraries/vue.js"></script>
<!--========== SCRIPTS ==========-->
<script src="<?= url('assets') ?>/js/components/nav/nav.js" type="module" defer></script>
<script src="<?= url('assets') ?>/js/shop.js" type="module" defer></script>
<script src="<?= url('assets') ?>/js/script.js" type="module" defer></script>
<script src="https://js.stripe.com/v3/" defer></script>
The Sheety API is great but I cannot make it work with Vue.
The only included example uses jQuery with handlebars.js which, like vue.js, uses double mustache syntax that collides.
<html>
<head>
<title>UK Theme Parks</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.getJSON('https://api.sheety.co/uk-theme-parks', function(data) {
var template = Handlebars.compile($('#item-template').html())
$('#items').html(template(data))
})
})
</script>
<script id="item-template" type="text/x-handlebars-template">
<ul>
{{#each this}}
<li>{{name}}</li>
{{/each}}
</ul>
</script>
</head>
<body>
<div id="items">Loading theme parks...</div>
</body>
</html>
Is there a way to make this example work inside the Vue component? Most preferably, to make it work without having to import the handlebars.js or jQuery?
Please mind that I am an exploratory designer, not a well-versed js coder, so I would greatly appreciate a working example :)
I am using browserify and i want to use bxslider. When i had all the templates in a single file (index.html), it was working. Now i am using browserify to build it so i have vue components. I want to use bx slider in a vue component.
slider.vue
<ul class="bxslider">
<li>
<img src="img/thumb-01.jpg"/>
</li>
</ul>
index.html
<link href="plugins/bxslider/jquery.bxslider.css" rel="stylesheet" />
<div id="app"></div>
<!-- scripts -->
<script src="plugins/jQuery/jQuery-2.2.0.min.js"></script>
<script src="plugins/bxslider/jquery.bxslider.min.js"></script>
<script src="dist/build.js"></script>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>
I couldn't get the bxslider, i try to use it as a function in a component, alse try to use it in a seperate file. Any suggestions please?
The problem is that $(document).ready() is executed before the vue.js code. You need to replace this code
$(document).ready(function(){
$('.bxslider').bxSlider();
});
with
$(document).ready(function(){
setTimeout(function(){
$('.bxslider').bxSlider();
},100);
});
After doing some small apps in angular2 and reactjs, it's my first try with Aurelia.
I have an error in my first app following the Quick Start and just updating the app to show a "hello world":
http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/quick-start/1
I've got an error:
Uncaught (in promise) Error: No view model found in module "src/app".
at aurelia-core.min.js:7
any idea what is happing? the error is not clear for me; aurelia manage well the error messages?
"View model" means html template file?
/index.html
<!DOCTYPE html>
<html>
<head>
<title>Aurelia</title>
</head>
<body aurelia-app="src/main">
<script src="scripts/system.js"></script>
<script src="scripts/config-typescript.js"></script>
<script src="scripts/aurelia-core.min.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
/src/main.ts
import {Aurelia} from 'aurelia-framework';
export function configure(aurelia: Aurelia) {
aurelia.use.basicConfiguration();
aurelia.start().then(() => aurelia.setRoot());
}
UPDATED: the error was app.ts was app.ts was empty !
/src/app.ts
export class App {
heading = "Hello World";
}
/src/app.html
<template>
<h1>${heading}</h1>
</template>
The error was my app.ts was empty , it's produced "No view model found"
On the index.html we bootstrap the app trough main.js or main.ts file (if we are using typescript)
/src/index.html
<!DOCTYPE html>
<html>
<head>
<title>Aurelia</title>
</head>
<body aurelia-app="src/main"> <!-- Bootstrap here -->
<script src="scripts/system.js"></script>
<script src="scripts/config-typescript.js"></script>
<script src="scripts/aurelia-core.min.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
Aurelia have a convention. It tries to find app.js or app.ts and load it as the root module.
/src/app.ts
export class App {
heading = "Hello World";
}
Im trying to run this plugin
https://github.com/jzaefferer/jquery-treeview
In clear html it works, so it means the problem is in my mvc code.
I have following code
<!-- TREEVIEW Plugin -->
<link href="/Content/jquery-treeview/jquery.treeview.css" rel="stylesheet" type="text/css" />
<script src="/Content/jquery-treeview/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="/Content/jquery-treeview/jquery.treeview.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#treeview ul").treeview();
});
</script>
the link addresses are okay, because they are not underlined and i checked the path manually. In clear HTML the plugin works. I also tried
#Scripts.Render("~/Content/jquery-treeview/jquery-1.2.6.min.js")
or
#Url.Content("~/Content/jquery-treeview/jquery-1.2.6.min.js")
At it seems same (not working). Where is the problem ?
But this code works, so JQuery is loaded.
$(document).ready(function () {
alert("ready!");
});
HTML Code
<div id="treeview">
<ul>
<li>Category
<ul><li>SubCategory</li></ul>
</li>
</ul>
</div>
Mystery revealed, in Shared/_Layout.cshtml JQuery was also included by default so the solution was comment it out :-)