I am facing this issue with my newly started app.
Error: No Aurelia APIs are defined for the element: "DIV".
This is the call stack:
getAU webpack:///./node_modules/aurelia-binding/dist/native-modules/aurelia-binding.js?:5384
locateAPI webpack:///./node_modules/aurelia-binding/dist/native-modules/aurelia-binding.js?:5415
createBinding webpack:///./node_modules/aurelia-binding/dist/native-modules/aurelia-binding.js?:5401
applyInstructions webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:2527
create webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:2742
create webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:4449
applyInstructions webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:2521
create webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:2742
create webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:2622
addView webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:1228
_standardProcessInstanceChanged webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:632
instanceChanged webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:564
itemsChanged webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:1137
bind webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:1106
bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3819
bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:1763
_show webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:294
bind webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:333
bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3819
bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:1763
bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3811
bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:1763
addView webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:1229
_standardProcessInstanceChanged webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:632
instanceChanged webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:564
itemsChanged webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:1137
bind webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:1106
bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3819
bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:1763
bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3811
bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:1763
_show webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:294
bind webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:333
bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3819
bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:1763
bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3811
bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:1763
bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3811
bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:1763
bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3811
automate webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3756
_createControllerAndSwap webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:4945
promise callback*_createControllerAndSwap/< webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:4944
promise callback*_createControllerAndSwap webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:4942
compose webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:5044
compose webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:5310
setRoot webpack:///./node_modules/aurelia-framework/dist/native-modules/aurelia-framework.js?:538
configure webpack:///./app/bootstrap.ts?:36
__awaiter webpack:///./app/bootstrap.ts?:12
__awaiter webpack:///./app/bootstrap.ts?:8
configure webpack:///./app/bootstrap.ts?:36
promise callback*configure/< webpack:///./app/bootstrap.ts?:36
__awaiter webpack:///./app/bootstrap.ts?:12
__awaiter webpack:///./app/bootstrap.ts?:8
configure webpack:///./app/bootstrap.ts?:24
config webpack:///./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js?:105
promise callback*config webpack:///./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js?:100
p webpack:///./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js?:136
promise callback*bootstrap webpack:///./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js?:135
run webpack:///./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js?:122
promise callback*run webpack:///./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js?:117
<anonymous> webpack:///./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js?:142
<anonymous> webpack:///./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js?:143
b9nV http://localhost:8080/vendors~._node_modules_an.120e77e838c03acac253.chunk.js:83
__webpack_require__ http://localhost:8080/runtime~app.120e77e838c03acac253.bundle.js:80
<anonymous> webpack:///multi_(webpack)-dev-server/client?:5
0 http://localhost:8080/app~._a.120e77e838c03acac253.chunk.js:10
__webpack_require__ http://localhost:8080/runtime~app.120e77e838c03acac253.bundle.js:80
checkDeferredModules http://localhost:8080/runtime~app.120e77e838c03acac253.bundle.js:46
webpackJsonpCallback http://localhost:8080/runtime~app.120e77e838c03acac253.bundle.js:33
<anonymous> http://localhost:8080/app~._app_mocks-temporary_schema.ts~81270b51.120e77e838c03acac253.chunk.js:1
aurelia-bootstrapper.js:127:16
I researched online but I only found a similar issue here: https://github.com/aurelia/webpack-plugin/issues/181 but it's not related as I don't use webpack 5 but 4.
The last log from aurelia debug is this one:
DEBUG [templating] importing resources for app.html
Array []
My app does not reference a div directly, and is fairly simple. I am using a external libraries (that we also develop) and load as follows:
export async function configure (aurelia: Aurelia): Promise<Aurelia> {
aurelia.use
.standardConfiguration()
.plugin(PLATFORM.moduleName('aurelia-validation'), config => {
config.customValidator(AjvValidator);
})
.plugin(PLATFORM.moduleName('web-shared-components'))
.plugin(PLATFORM.moduleName('web-template-designer'))
.feature(PLATFORM.moduleName('views/index'));
if (debugMode) {
aurelia.use.developmentLogging();
}
return aurelia.start().then(async () => await aurelia.setRoot(PLATFORM.moduleName('app')));
}
This is app.html:
<template>
<designer></designer>
</template>
and the designer.html:
<template>
<template-designer record-type-template.two-way="recordTypeTemplate"
schema.bind="schema"
is-valid.two-way="isValid"
is-dirty.two-way="isDirty"
on-save.call="handleSave()"
on-exit.call="handleExit()"
on-preview.call="handlePreview(requestNewTestData)"></template-designer>
</template>
I'm a bit at a loss as to what could be causing this issue so any guidance is welcome.
Thanks
Found the issue, it was a missing dependency in one of the third parties. Aurelia was not able to resolve a custom tag on one of the template divs.
Related
I want to install this popup on the nuxt.js application
My problem is?
if i want to add this script on my page is not work and the error is window is not defined
How I add this pop up to my applications Nuxt.js?
<!-- MailerLite Universal -->
<script>
(function(m,a,i,l,e,r){ m['MailerLiteObject']=e;function f(){
var c={ a:arguments,q:[]};var r=this.push(c);return "number"!=typeof r?r:f.bind(c.q);}
f.q=f.q||[];m[e]=m[e]||f.bind(f.q);m[e].q=m[e].q||f.q;r=a.createElement(i);
var _=a.getElementsByTagName(i)[0];r.async=1;r.src=l+'?v'+(~~(new Date().getTime()/1000000));
_.parentNode.insertBefore(r,_);})(window, document, 'script', 'https://static.mailerlite.com/js/universal.js', 'ml');
var ml_account = ml('accounts', '3587348', 'o8w2i6n0n5', 'load');
</script>
<!-- End MailerLite Universal -->
take my error
WINDOW IS NOT DEFINED
pages/document.js:16:
Object../pages/document.js
webpack/bootstrap:25:
__webpack_require__
pages/index.js:24:76
Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./pages/index.vue?vue&type=script&lang=js&
webpack/bootstrap:25:
__webpack_require__
webpack/bootstrap:25:
__webpack_require__
pages/index.vue:1:
Module../pages/index.vue
webpack/bootstrap:25:
__webpack_require__
async server.js:2289:21
<modal #modal id="modalwindow">
<modal-header [show-close]="true">
Add New School Admin
and i am getting an error:
If 'modal-header' is an Angular component and it has 'show-close' input, then verify that it is part of this module.
If 'modal-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
To allow any property add 'NO_ERRORS_SCHEMA' to the '#NgModule.schemas' of this component. ("
][show-close]="true">
Add New School Admin
"): ng:///AddNewSchoolModule/addSchoolInfo.html#102:18
'modal-header' is not a known element:
If 'modal-header' is an Angular component, then verify that it is part of this module.
If 'modal-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message. ("
[ERROR ->]
Add New School "): ng:///AddNewSchoolModule/addSchoolInfo.html#102:4
'modal' is not a known element:
If 'modal' is an Angular component, then verify that it is part of this module.
To allow any element add 'NO_ERRORS_SCHEMA' to the '#NgModule.schemas' of this component. ("
[ERROR ->]
at syntaxError (webpack-internal:///../../../compiler/esm5/compiler.js:706)
at TemplateParser.parse (webpack->internal:///../../../compiler/esm5/compiler.js:24882)
atJitCompiler._parseTemplate(webpackinternal:///../../../compiler/esm5/compiler.js:34835)
atJitCompiler._compileTemplate(webpackinternal:///../../../compiler/esm5/compiler.js:34810)
at eval (webpack-internal:///../../../compiler/esm5/compiler.js:34711)
at Set.forEach ()
atJitCompiler._compileComponents(webpackinternal:///../../../compiler/esm5/compiler.js:34711)
at eval (webpack-internal:///../../../compiler/esm5/compiler.js:34581)
at Object.then (webpack-internal:///../../../compiler/esm5/compiler.js:695)
atJitCompiler._compileModuleAndComponents(webpackinternal:///../../../compiler/esm5/compiler.js:34580)
Thanks in advance
I'm having to upgrade an application to Angular 5 and ran into this. The author's npm page (https://www.npmjs.com/package/ng2-bs3-modal) shows the elements now have a bs- prefix and the [show-close] attribute is now [showDismiss]:
<bs-modal #modal>
<bs-modal-header [showDismiss]="true">
<h4 class="modal-title">I'm a modal!</h4>
</bs-modal-header>
<bs-modal-body>
Hello World!
</bs-modal-body>
<bs-modal-footer [showDefaultButtons]="true"></bs-modal-footer>
</bs-modal>
I'm using vue#2.1.3 and the vue official webpack template to build an app.
When developing locally, I often see the warning Uncaught TypeError: Cannot read property ... of undefined, but the HTML can be rendered successfully. However, the HTML can't be rendered when it's deployed to Netlify with npm run build command. So I have to treat this warning seriously.
I learned from here that it's because "the data is not complete when the component is rendered, but e.g. loaded from an API." and the solution is to "use v-if to render that part of the template only once the data has been loaded."
There are two questions:
I tried wrap v-if around multiple statements that's generating the warning but personal I think this solution is verbose. Is there a neat approach?
"warnings" in local development turn into "fatal errors"(HTML can't be rendered) in production. How to make them the same? e.g. both of them issue warnings or errors?
Just use v-if on a common parent to all the elements in your template relying on that AJAX call, not around each one.
So instead of something like:
<div>
<h1 v-if="foo.title">{{ foo.title }}</h1>
<p v-if="foo.description">{{ foo.description }}</p>
</div>
Do
<div>
<template v-if="foo">
<h1>{{ foo.title }}</h1>
<p>{{ foo.description }}</p>
</template>
</div>
have you tried to initialize all the data you need? e.g. if you need a b c, you can do:
new Vue({
data: {
a: 1,
b: '',
c: {}
},
created(){
// send a request to get result, and assign the value to a, b, c here
}
})
In this way you wont get any xx is undefined error
Guys are right but I can add something.
If there is possibility that your root element in the condition can be undefined for some reason, it is good practice to use something like that: v-if='rootElement && rootElement.prop'. It will secure you from getting cannot get property prop of undefined as when rootelement is undefined, it will not go further in checking.
2021 vue3
we can use like this
props: {
form: {
type: String,
required: true,
},
setup(props, context) {
console.log(props.form)
Initial Question
How, if at all, can we expose a view/view-model component from a plugin? For instance, we have the following:
// ./open-id/foo-bar.html
<template>
<p>FooBar</p>
</template>
// ./open-id/foo-bar.ts
export class FooBar { }
In the consuming application, we would like to do this:
// ./app.html
<require from="open-id/foo-bar"></require>
<foo-bar></foo-bar>
Edits
Simpler Name
Based on Robinson Collado's answer, we using a simpler name (foo not foo-bar) to reduce complexity.
// ./open-id/foo.html
<template>
<p>Foo</p>
</template>
// ./open-id/foo.ts
export class Foo { }
// ./app.html
<require from="open-id/foo"></require>
<foo></foo>
That approach threw this error:
Unhandled rejection Error: Load timeout for modules: template-registry-entry!open-id/foo.html,text!open-id/foo.html
Global Resource
Based on the Installing Plugins documentations, we tried adding the component as a global resource.
// ./open-id/open-id.ts
function configure(config: FrameworkConfiguration) {
config.globalResources('./foo');
}
That approach threw this error:
GET http://localhost:9000/src/open-id/open-id/foo.js 404 (Not Found)
That means Aurelia is looking for the component in open-id/open-id/, which is one directory too deep.
Loading as a Plugin
During development of the plugin, we're loading the plugin like this, which may be why Aurelia is looking one directory too deep. How can we load the plugin differently during developent?
// ./main.ts
aurelia.use.plugin("./open-id/open-id");
Loading as a Feature
aurelia.use.feature("./aurelia-open-id-connect");
The error now is this for each constructor that receiving an injection from our feature.
Message: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?
Try changing the name of the custom tag <foo-bar></foo-bar> to <foobar></foobar>. The name of the tag should match the name of it's view-model class. Unless, if you use the #customElement decorator to explicitly declare the tag name for the custom element.
I am using Aurelia to build single page application and I am getting an error during view loading for a new route:
ERROR [app-router] TypeError: Cannot read property 'attrToRemove' of
undefined
Make sure that you did not mistype any Aurelia attribute in your view template. (Ex reapet.for instead of repeat.for).