When I am writing this, the MDN shows that HTMLDialogElement is supported in all browser except Internet Explorer.
But weirdly enough, while using it, there is a warning which says it's not supported in most of the browsers and marks it depreceted. That was not the problem, until I found that calling showModal() is giving me error:
Property 'showModal' does not exist on type HTMLDialogElement
Am I missing something?
Here is my code:
let elem: HTMLDialogElement = document.getElementById("dlg") as HTMLDialogElement;
elem.showModal(); // this line gives error
According to the type definitions (lib.dom.d.ts) for HTMLDialogElement there is no method showModal(). You could cast elem to any to make the TypeScript Transpiler accept it:
(elem as any).showModal()
However, you should not use deprecated APIs. If you are using Material with Angular you could use the MatDialog service instead.
HTMLDialogElement.showModal is available as of TypeScript 4.8.3.
Run npm install --save-dev typescript#4.8.3.
Related
After creating our new system in Vue with babel, I have started testing compatibility towards older devices. Our babel is transpiling the source down to es2015 together with webpack.
I have now tested with browserstack against both Ios & android. Newer OS works on both platforms. However on android phones that use the default browser, I get an error in sentry stating; Duplicate data property in object literal not allowed in strict mode It does not give me any hints on where this might be thus making the debugging process painfully hard.
The only light in the end of the tunnel I can se now is the ios part. Ios devices that run IOS < 9 states an error Attempted to redefine property 'value'. also in sentry
If I am not mistaking, the ios issue is a reworded error of the same issue?
As I read over here, I suppose 'value' might be defined twice in a object or element.
This all wraps up to the question, how does one go with finding duplicate data properties?
Can you share some of your code (just the area from a few components?)
One thing to check is inside of data(), ensure you are returning an object. This happened to me when I started out with Vue.
Example:
// component a
data () {
a: ''
}
// component b
data () {
a: '' // ERROR! Duplicate
}
This happens because the data is merged on the main Vue instance. So in this case it should look like:
// component a
data () {
return {
a: ''
}
}
// component b
data () {
return {
a: '' // ok now
}
}
Hard to make any other guesses without some code.
I had the same issue reported on a old android device, here's what i did :
We had components with both mapActions(["something"]) and a defined method something() { this.$store.dispatch('something') }
So i removed the methods declaration.
It still didn't work so I check the build main.xxxx.js on eslint
and found some "Attempted to redefine property 'value'" on something like domProps:{value:t.value,value:t.value}
Looked up the code and saw that we had components with both v-model and :value and also some checkbox using v-model and :checked.
I only kept the v-model and it works.
It also seems like the problems could come from repeated props like stated here : https://www.tutorialfor.com/blog-267252.htm
I managed to find out what line the error occurred on and found out that a plugin that I used with name Vue-numeric had created a duplicate value:
domProps: {
value: n.value,
value: n.amount
},
I had accidentally locked the plugin on a older version where this problem was present. The issue was fixed by simply updating.
Thank you #xenetics for taking your time on this issue.
Yes, this is a restriction that was only in effect in ES5 strict mode, which these environments you have apparently use. It absolutely makes sense but was nonetheless loosened in ES6 because of computed properties - see What's the purpose of allowing duplicate property names? for details. That's why babel doesn't complain about it when transpiling.
To find these (valid but nonsensical) duplicate property names in object literals in your code base, you can use a linter such as ESLint with a rule against these.
I'm attempting to build an Angular 2 project, using angular-cli with the --prod and --aot arguments. The build is failing with the following error:
Property 'required' does not exist on type '{ [key: string]: any; }'.
In my HTML, I'm using HTML validation on some of my inputs (required, pattern attributes).
Using JIT compilation, these work as expected. It is only during AoT compilation that the errors occur.
Has anyone seen this before? I was hoping not to have to resort to defining all of my forms using the ReactiveForms method and using the Angular Validators, unless there's no way around it.
The following are some things that will make AoT compile fail.
Don’t use require statements for your templates or styles, use styleUrls and templateUrls, the angular2-template-loader plugin will change it to require at build time.
Don’t use default exports.
Don’t use form.controls.controlName, use form.get(‘controlName’)
Don’t use control.errors?.someError, use control.hasError(‘someError’)
Don’t use functions in your providers, routes or declarations, export a function and then reference that function name
#Inputs, #Outputs, View or Content Child(ren), Hostbindings, and any field you use from the template or annotate for Angular should be public
I have a question about ract-router 2.0 migration in my React app.
I removed every mixin and calls to this.props.history, like explained in the migration guide, but I still have warnings about it in the console :
Warning: [react-router] props.history and context.history are deprecated. Please use context.router
Actually, I found out in the debugger there is one warning for each nested component on the current page : RouterContext, App, and Posts
Any idea where it could come from ?
There's a bug with RC4 and the React DevTools that come from the dev tools attempting to inspect all the props and context. This will be fixed in the new RC.
You can disable this warning by going to /node_modules/react-router/lib/RouterUtils.js and commenting out lines 28-30.
I'm experimenting with the new ES6 Symbols in Google Chrome, and after enabling "Experimental JavaScript" in Chrome Flags, I can use new Symbol() in my code.
However, when I try to run the following code:
var sym = new Symbol();
var obj = {};
obj[sym] = 'Hello, symbols';
I get the following error:
TypeError: Conversion from symbol to string
What's wrong with my code?
Thanks!
Since symbols are values, not objects, they are created by a plain function call to Symbol, not by invoking new on it. In the version of Chrome you are using, new Symbol gives you a wrapper object for such a value (i.e., you can get the actual symbol by invoking .valueOf on the result).
Since this is a common pitfall, the ES6 draft spec recently changed to disallow constructor invocation of Symbol altogether. That is, you already get an exception on the first line of your code. This change has already been implemented in V8, but hasn't made it into Chrome yet.
I am developing a Flash application (Flash Player 11 as target platform) that uses the AS3 Facebook API, which in turn uses as3corelib JSON functionality. Or at least it should do so.
However, in spite of including the latest version (.93) of the as3corelib.swc, I still get the "Error: Access of undefined property JSON". I also tried including the sources directly, to no avail.
Any ideas what I am doing wrong?
As I said, the *.swc is definitely included. As is the source code (all at the correct path).
Edit:
I have a more specific error message:
Error: Can not resolve a multiname reference unambiguously. JSON (from C:\Coding\FlashDevelop\Tools\flexsdk\frameworks\libs\air\airglobal.swc(JSON, Walker)) and com.adobe.serialization.json:JSON (from C:\flash_test\lib\as3corelib.swc)) are available.
I know that JSON is included in AIR, but I do not target AIR, so why does it try include the airglobal.swc?
Your problem is that Flash Player 11 and onwards has native JSON support, so the JSON class you are including is likely colliding with the one from as3corelib. Hence the ambiguity problem.
Try removing as3corelib entirely and see what happens.
Specify the full path to the class. Example, code:
...
var jsonData:Object = JSON.decode(loader.data);
...
will be
...
var jsonData:Object = com.adobe.serialization.json.JSON.decode(loader.data);
...