We Keep Coding

#types/react cannot find name 'HTMLDialogElement'

I am encountering a weird build issue with typescript and #types/react. I have two typescript config files: one for files which use react, and one for those that don't. When building the portion of my project which doesn't use react, I see the following error:
node_modules/#types/react/index.d.ts(3508,58): error TS2304: Cannot
find name 'HTMLDialogElement'.
node_modules/#types/react/index.d.ts(3508,78): error TS2304: Cannot
find name 'HTMLDialogElement'.
node_modules/#types/react/index.d.ts(3782,72): error TS2304: Cannot
find name 'HTMLDialogElement'.
node_modules/#types/react/index.d.ts(3782,92): error TS2304: Cannot
find name 'HTMLDialogElement'.
I was able to reproduce the error with a minimal example:
node_modules/typescript/bin/tsc typescript/foo.ts --outDir static/js/src --module none
The file typescript/foo.ts is a minimal file I used to reproduce the problem, and is deliberately short:
function printNumber(n: number) {
console.log(n);
}
let x = 3;
x *= 4;
printNumber(x);
Note that foo.ts does not have any references to react whatsoever. The weirdest part of this is when I uninstall #types/react, the error messages go away.
What's going on?
EDIT: I found this issue which manifests when tsc version > 2.3.2. I downgraded tsc to version 2.3.2 but the problem persists.

As fair as I understand the typescript's policies, this is relative to the version you are using. When typescript 2.3.2 was out the definition for HTMLDialogElement was not included in #types/react, so you see this error. You can read more about this in this github issue.
Probably, even if you don't include React on your foo.ts, the typescript compiler will include and check all the definitions that you've got, even those in node_modules. This will explain why you have this error even without including React.
Now that I think about it, I don't event include the definitions that I wrote - but they're used by the transpiler.
I had the same issue on a project recently cloned yesterday; I fixed it by updating typescript to ^2.7.0.

I had the same problem. tried all the upgrades and downgrades mentioned here.but, nothing worked for me. finally ended up commenting out the 'dialog' from line number 3782 and 3508 in node_modules/#types/react/index.d.ts
This is only a quick fix.

I had the same issue (latest create-react-app, with typescript version 2.5.3) and after I ejected the app (npm run eject) and updated typescript by hand to current version in package.json to current 2.7.2 this works again.
Seems to be some very strange bug (on Windows) cause my college (same installation) doesn't have this bug. When searching for this, you will find it appearing every 2 month or so, so that I guess, that it is not only this issue ( https://github.com/Microsoft/TypeScript/issues/16880 ) Duma pointed to, cause the project we're working on started somewhere in December.

Error "SCRIPT 1028 Expected identifier, string or number" with IE11

I'm using Browserify to transpile my JS code to be sure the final code is compatible with most browsers, and all is working perfectly with Chrome and Firefox.
But I'm using a package (dot-prop) that IE11 does not seem to like due to the name of some functions like get in get(obj, path, value) (https://github.com/sindresorhus/dot-prop/blob/master/index.js) and generate the classic error:
SCRIPT 1028 Expected identifier, string or number
Yet I'm using a whole bunch of transpilation tools:
browserify --extension=.jsx --transform [babelify --presets=es2015,stage-2,react --plugins=[babel-plugin-transform-es3-member-expression-literals,babel-plugin-transform-es3-property-literals]] --transform [es3ify] GUI/index.jsx --outfile dist/GUI/bundle.js
But as far as I understand the tools consider the code as valid, which it is for most browsers indeed.
I'm probably missing a transpilation component who might transform the get(...) in something like "get": function(...).
Am I missing something?
If the issue is real, can it be fixed with such a component?
Or should I fix the code myself, and if so what is the best way of doing so?

The issue was more subtle: as dot-prop is a dependency stored in node_modules by default it is ignored by Browserify hence not passed to Babel through Babelify for transpilation.
Until I find a clean way of asking Browerify to handle only this dependency I've found a simple workaround: pre-generating a transpiled version of the dependency.
I have a dedicated NPM script in my package.json:
"scripts": {
"precompile": "babel node_modules/dot-prop/index.js --out-file precompiled/dot-prop.js",
And I reference the resulting transpiled module in place of the original one.
e.g. in someModule.js:
const dotProp = require("../precompiled/dot-prop");
Hopefully it will help someone else. :-)

Sharepoint - Angular 2 App using CLI Webpack

I was trying to deploy a Angular 2 CLI App to a SharePoint 2013 site.
When I embed the app via a Content Editor Webpart, the app seems to work for.
Looking at the console reveals the following exception:
zone.js:158 Uncaught Error: Sys.ParameterCountException: Parameter count mismatch.(…)
Error$create # ScriptResource.axd?d=vGEzwRDnzucQkv59macWaabQYp5RLWFMwrgR1osi9VE8xnWRibgXoL_U0e3xLpsQRNiQ4MJkoONvpt…:237
Error$parameterCount # ScriptResource.axd?d=vGEzwRDnzucQkv59macWaabQYp5RLWFMwrgR1osi9VE8xnWRibgXoL_U0e3xLpsQRNiQ4MJkoONvpt…:413
Function$_validateParameterCount # ScriptResource.axd?d=vGEzwRDnzucQkv59macWaabQYp5RLWFMwrgR1osi9VE8xnWRibgXoL_U0e3xLpsQRNiQ4MJkoONvpt…:118
Function$_validateParams # ScriptResource.axd?d=vGEzwRDnzucQkv59macWaabQYp5RLWFMwrgR1osi9VE8xnWRibgXoL_U0e3xLpsQRNiQ4MJkoONvpt…:70
String$startsWith # ScriptResource.axd?d=vGEzwRDnzucQkv59macWaabQYp5RLWFMwrgR1osi9VE8xnWRibgXoL_U0e3xLpsQRNiQ4MJkoONvpt…:491
startsWith # es6.string.starts-with.js:15Sys$UI$DomEvent # ScriptResource.axd?d=vGEzwRDnzucQkv59macWaabQYp5RLWFMwrgR1osi9VE8xnWRibgXoL_U0e3xLpsQRNiQ4MJkoONvpt…:3986
browserHandler # ScriptResource.axd?d=vGEzwRDnzucQkv59macWaabQYp5RLWFMwrgR1osi9VE8xnWRibgXoL_U0e3xLpsQRNiQ4MJkoONvpt…:4052
ZoneDelegate.invokeTask # zone.js:265Zone.runTask # zone.js:154ZoneTask.invoke # zone.js:335
Where I got so far on my own is, this error is cased by SharePoints AJAX library and the ES6 shims. More accurate the string's startsWith function.
I can't remember having any issues when using angular 2 RC with the systemJS module loader. Even though I used the ES6 shims as well.
I also found out, I used the ES6-Shim directly and the angular cli uses the core-js package from NPM.
Currently I am stuck, so hoping anyone has any input on this matter.
Thanks.

I got a little further. It actually works now. I can't say it works all the way but I got no error so far.
I did remove the following line from the "polyfills.ts":
import 'core-js/es6/string';
This removes the string startsWith function causing the error. Keep in mind this only works if you include the Microsoft Ajax library, so the function is available in general.
If anyone has a better solution I would appreciate it :)
Thanks

I had the same issue in a Sharepoint feature, what worked was adding other and es6 shims before any other js packages are referenced in my master page.
My solution references ended up as:
-node_modules/core-js/client/shim.min.js
-node_modules/es6-shim/es6-shim.min.js
Hope this helps!

Building Chart.js master - generated .js gives errors

I am getting an error when I work with a version of Chart.js master that I compiled myself. I must be missing some kind of dependency that I've missed in the documentation. I have no clue what .js I need to include.
When I move my mouse-cursor over the chart I get a bunch of errors related to a missing Color library. Which one am I missing exactly?
TypeError: i.color(...).saturate is not a function
Edit:
I have created a JSFiddle here: http://jsfiddle.net/o9ebb5sq/
This piece of code does not show the problem (using Chart 2.0.0-Beta). This is why I copied this release into my software and tried again. The problem I am describing disappears.
I am running a master build (created using 'gulp build') Which makes me think the problem is either present in git master, or it is caused by my build environment.
I have installed the following npm packages before I ran gulp build
gulp 3.9.0
gulp-concat 2.6.0
gulp-connect 2.2.0
gulp-html-validator 0.0.5
gulp-jshint 1.12.0
gulp-karma 0.0.5
gulp-replace 0.5.4
gulp-size 2.0.0
gulp-uglify 1.4.2
gulp-util 3.0.7
semver 5.0.3
karma 0.13.14
inquirer 0.11.0
I expect that maybe I am missing something here or that one of the packages I've used to build Chart.js has an issue.

In the package.json on 2.0 they have included a new dependency "color": "git://github.com/chartjs/color" you will also need to include this. Odd thing is they alias this to a helper
color = helpers.color = function(color) {
if (!window.Color) {
console.log('Color.js not found!');
return color;
}
return window.Color(color);
},
So I would have expected for you to see the log unless you already have something in the global namespace named Color.

How to do JSLint in Vim

I spend my days in vim, currently writing a lot of JavaScript. I've been trying to find a way to integrate JSLint or something similar into vim to improve my coding. Has anyone managed to do something like this?
I tried this: Javascript Syntax Checking From Vim, unfortunately the output is very crude.

The best-practice way IMO is:
Install Syntastic Vim plugin - Best syntax-checker around for plenty of languages, plus it integrates with Vim's location-list (==quickfix) window.
I recommend cloning from the GitHub repo and installing using a plugin manager like Vundle or Pathogen, since it's more frequently updated.
Choose one of the two options below:
JSLint
Install jsl (JSLint executable) using your favorite package manager (Ubuntu's apt-get, Mac's home brew, etc.).
Community-driven jshint.com (better than JSLint)
Install node.js using your favorite package manager.
Install Node Package Manager: 'curl https://npmjs.org/install.sh | sh' EDIT: npm IS PART OF node.js NOW
See http://npmjs.org for more info.
Install jshint globally: 'npm install jshint -g'
Put your jshint config file in your $HOME dir: '~/.jshintrc'
Here's JSHint-Node's example configuration file, they pulled from mine and added more stuff.
Here's my original copy, which you can also start from.
Overwrite Syntastic's syntax_checkers/javascript.vim file with this one - EDIT: NO LONGER NECESSARY WITH NEWEST SYNTASTIC VERSION.
Script copied from FactorayLab's really helpful Vim GitHub page, which I recommend every Vim user to check out.
Enjoy! :)

You can follow the intructions from JSLint web-service + VIM integration or do what I did:
Download http://jslint.webvm.net/mylintrun.js and http://www.jslint.com/fulljslint.js
and put them in a directory of your choice.
Then add the following line to the beginning of mylintrun.js:
var filename= arguments[0];
and change last line of code in mylintrun.js ("print( ...)") to:
print ( filename + ":" + (obj["line"] + 1) + ":" + (obj["character"] + 1) + ":" + obj["reason"] );
This makes in mylintrun.js output a error list that can be used with the VIM quickfix window (:copen).
Now set the following in VIM:
set makeprg=cat\ %\ \\\|\ /my/path/to/js\ /my/path/to/mylintrun.js\ %
set errorformat=%f:%l:%c:%m
where you have to change /my/path/to/js to the path to SpiderMonkey and /my/path/to/mylintrun.js to the path where you put the JS files.
Now, you can use :make in VIM and use the quickfix window (:he quickfix-window) to jump from error to error.

Another option is jslint.vim from Jesse Hallet. It's available on GitHub and works with or without Vim's QuickFix window. It's a nice plugin!

I've been very happy using node-lint
sudo npm -g install jslint
Then whack this somewhere in your .vim
set makeprg=jslint\ %
set errorformat=%-P%f,
\%E%>\ #%n\ %m,%Z%.%#Line\ %l\\,\ Pos\ %c,
\%-G%f\ is\ OK.,%-Q
Now a :make will run jslint. Errors appear in the quickfix window.

Here are the Mac OS instructions updated for Nov. 2012. Assumes you have Homebrew installed in order to get Node.js, and that you've already installed Syntastic for Vim (I use https://github.com/carlhuda/janus which provides this automatically):
$ brew install node.js
$ npm install -g jshint
Then add '/usr/local/share/npm/bin' to your PATH (probably in ~/.bashrc). For example, add the line:
export PATH="$PATH:/usr/local/share/npm/bin"
restart your Terminal and check that
$ jshint
is executable from the command line. Syntastic will discover jsHint automatically. Restart MacVim and enjoy!

Much better is to pipe the results through Lynx to deal with JSLint's unfortunate choice of HTML for output format. I have a blog post on how to do it here:
http://www.fleegix.org/articles/2008-09-06-jslint-in-vim-through-lynx