We Keep Coding

SCRIPT5005: String expected - Rxjs crashes on IE 11 symbol polyfill

At work we have (sigh!) to support IE 11 for the current project I'm working on.
The project uses RxJS 6.
To support most of the features we've included, we used Webpack with Babel and core-js (as suggested by Babel itself) as polyfiller.
If we try to import RxJS, our application loading get stuck on a specific line:
Observable.prototype[_symbol_observable__WEBPACK_IMPORTED_MODULE_2__["observable"]] = function () {
return this;
};
with the error SCRIPT5005: String Expected.
We are using the es5 transpiled version of RxJS. So the code original typescript code should be this one.
I know symbols are not supported in IE 11, as per Kangax's Ecmascript compatibility table and that core-js includes a polyfill for Symbols, and we are importing all the polyfills.
In fact, if I try to run this with the polyfill after the error through the console, it works perfectly.
var obj = {};
Object.defineProperty(obj, Symbol.for("test"), {
value: 5
});
What's weird is that if I try to set a breakpoint on the line that give us the error, I can access singularly to these components without problems.
Observable.prototype
_symbol_observable__WEBPACK_IMPORTED_MODULE_2__
_symbol_observable__WEBPACK_IMPORTED_MODULE_2__["observable"]
The second and the third lines returns me an object.
If I do manually Observable.prototype[_symbol_observable__WEBPACK_IMPORTED_MODULE_2__["observable"]] it still returns me the error.
Accessing to Object.prototype through an Object is not allowed (as using an object as index makes the container object automatically call .toString() on the key). Therefore IE returns me that error. Or, at least, I think that might be the reason.
What's more weird is that Symbol.for("test") returns an object that is the same as _symbol_observable__WEBPACK_IMPORTED_MODULE_2__["observable"] (with description: test instead of observable). And if I do obj[Symbol.for("test")] it works perfectly.
Also, it seems like I'm unable to create variables or such while I'm stopped on a breakpoint in IE 11 console, so I cannot even export that symbol to test that later (it allows me to do var x = {}; or var x = 5, but if I call 'x', it throws me 'x' is undefined).
Any clues about this problem and how we might solve this?
Might this be a problem of the polyfill?
I'm attaching here below my webpack config and my .babelrc
module.exports = {
module: {
rules: [
{
test: /\.jsx?$/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env', '#babel/preset-react', '#babel/preset-flow'],
},
},
exclude: /node_modules\/(core-js|(react.+)|(rxjs.+))/,
},
...
]
}
}
{
"presets": [
"#babel/preset-react",
"#babel/preset-flow",
["#babel/preset-env", {
"targets": {
"browsers": [
"last 2 versions",
"safari >= 7",
"Explorer 11"
]
},
"useBuiltIns": true
}]
],
"plugins": [
"#babel/plugin-proposal-object-rest-spread",
"#babel/plugin-transform-runtime"
],
"env": {
"test": {
"presets": ["#babel/preset-env", "#babel/preset-react", "#babel/preset-flow"]
}
}
}
Thank you.

TL;DR
Since we have a monorepo with multiple projects (a "sample app" that loads another project on its inside), I was including the core-js polyfill both on the sample app and in that project.
They were somehow conflicting, I'm still not sure why and how. This wasn't concerning rxjs but affecting it.
Also, I wrote a wrong regex on the webpack.config.js on babel-loader, but I'm not sure this was really affecting all.
It was: /node_modules\/(core-js|(react.+)|(rxjs.+))/
It should have been: /node_modules\/(core-js|rxjs|react[^\s+]*)/
Since I had to target the packages, not the files as I was thinking. I added a more complex regex on react to match also react-dom or other react-things (if any).
I was able to create a sample application that could work without problems.
I discovered RxJS has somehow its own polyfill for symbols.
In fact, running that sample with React, webpack, babel, rxjs but not core-js, wasn't giving any problem. (Note: the sample has core-js installed).
Setting a breaking point on
Observable.prototype[_symbol_observable__WEBPACK_IMPORTED_MODULE_2__["observable"]], reveals this:
While using core-js, it reveals this:
Although this difference, both with and without the sample, it works perfectly on that sample. So I thought how it was possible and thought that I read somewhere that the polyfill should have been loaded only once in the most global object.
Since we are developing a project in a mono-repo that has React-based Website and another complex React component that gets imported on runtime, and that website seemed to need also polyfills, I added core-js import on both the projects.
By removing the one on the website, the error changed (it got stuck on another point not concerning this one).
Moreover, as said in the TL;DR, I think there was a problem with the regex applied on babel-loader.

Emmet JS snippets in VS Code

Has anyone ever succeeded in getting Emmet JS snippets to work in VS Code or even in Sublime?
The solution from https://stackoverflow.com/a/16943996/2012407 did not work for me.
These are my settings:
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"vue-html": "html",
"plaintext": "html"
},
This is my snippets.json:
{
"javascript": {
"abbreviations": {
"cl": "console.log",
"va": "var"
},
"snippets": {
"cl": "console.log",
"va": "var"
}
},
"css": {
"snippets": {
"cb": "color: black",
"bsd": "border: 1px solid ${1:red}"
}
}
}
There's no problem with CSS, SCSS, HTML, and all the rest - only JS. I've tried abbreviations or snippets, but the Emmet expansion puts HTML tags around what I write: cl becomes <cl> in Javascript & javascriptreact files.
I also tried js and javascriptreact in the snippets definition for the language with no luck.

No need to add JS snippets in Emmet: the new concept of Emmet 2.0 (already available in VS Code; v2.0 in beta and not publicly released yet) works as autocomplete provider so you can simply use native VS Code snippets instead

So I will put an example here for the built-in VS Code snippets, which are still not my favorite.
Open the command prompt with cmd+shift+p and type user snippets. There is already an example in there. Uncomment it, save, and you can use it straight away by typing the prefix.
I had to create the same snippet file named javascriptreact.json as well for it to work in most of my JS files - Javascript React (babel)
Ex:
{
"Test": {
"prefix": "ts",
"body": [
"console.log('test')",
"$1"
],
"description": "Prints test"
}
}
Now I have Emmet mapped to ctrl+e and having the built-in snippets limited to the intellisense is not great. I'd like a key binding like ctrl+e, and I am a big fan of Emmet.
I am still keen on having it working with Emmet using the same key binding if anyone knows.

This article solve issue in my case
https://medium.com/#eshwaren/enable-emmet-support-for-jsx-in-visual-studio-code-react-f1f5dfe8809c

Sencha cmd, closure compiler error: how to locate the offending code

When running Sencha cmd 6.5, and I get the following error:
[ERR] C2001: Closure Compiler Error (Parse error. undefined label "f") -- compression-input:1:4095
How can I locate the code at compression-input:1:4095 ?
This happens when I include a custom javascript file in app.json using:
"js": [
{
"path": "app.js",
"bundle": true
},{
"path": "custom.js",
"includeInBundle": true
}
],
The error disapears when I remove the reference to custom.js in app.json.
If I interpret the error correctly, it means that closure compiler finds an error on line 1, character 4095 of the compression-input. But the first line of custom.js is not such long.
How can I locate the offending code ?
And by the way, what is an undefined label in closure compiler ?

I had the same issue a year ago, and I was told you cannot locate it from the error message.
Assuming that you have already tried to open your uncompiled project directly in the browser, and not getting a syntax error, there's not much you can do except narrowing it down further by splitting the custom.js content in two parts and check these independently.
In my case it was Ext.define where should have been Ext.create, and the syntax error is thrown because usage of Ext.define is rewritten into other commands during generation of the compression-input. Maybe if you look for this specifically, you can find it.

I faced similar problems too.
I disabled compression in app.json file:
"testing": {
"compressor": {
//"type": "closure",
"type": "none",
"warningLevel": "quiet"
},
"output": "...."
}
And I separately checked the output app.js file with the compiler (which can be downloaded):
java -jar closure-compiler-v20210302.jar --js app.js --js_output_file compiled_output.js

Grunt Concat same file multiple times

I'd like to use grunt-contrib-concat for application frontend HTML templating purposes and this would be useful for me.
I'd like to define page partials and and concatenate them inside an output file that is going to be compiled by handlebars.
I've got everything set up, however Concat doesn't allow me to use the same file more than once.
Basically concat is filtering the sources so they don't occur more than once. The second partial1.hbs will not be concatenated.
pageconcat: {
src: [
'app/templates/partial1.hbs',
'app/templates/partial2.hbs',
'app/templates/partial1.hbs'
],
dest: 'app/result.hbs'
}
Is there any way to do this?
Update 1
After playing around with grunt's console output function, I was able to debug (of some sort) the concat plugin. Here's what I found out: The input array is deduplicated by grunt for some reason.
Update 2
The deduplication occurs in the foreach file loop that grunt uses. I've managed to bypass that (see answer). I do not know how reliable my solution is but it's a workaround and it works well if you don't put the wrong input.

You may be able to use the file array format to set up two different source sets. Something like this:
{
"files": [{
"src": [
"app/templates/partial1.hbs",
"app/templates/partial2.hbs"
],
"dest": "app/result.hbs"
}, {
"src": [
"app/result.hbs",
"app/templates/partial1.hbs"
],
"dest": "app/result.hbs"
}]
}
added "app/result.hbs" to second source set, as was pointed out in the comments.
Thanks.

Solution
After some debugging I came up with a solution. Certainly not the best, but it works fine, as it should.
I edited the concat.js plugin file inside the node_modules folder the following way:
grunt.registerMultiTask('concat', ...){
var self = this;
//several lines of code
//...
//replace f.src.filter(..) wtih
self.data.src.filter(..);
}

Suppress "Unknown global symbol" warnings in qooxdoo with coffeescript

I'm using qooxdoo in combination with the google maps API. I'm actually using it in combination with coffeescript, but I had the same problem before I moved over to coffeescript (although I suspect coffeescript isn't helping).
When I build the project, I get a lot of lines like this:
- Warning: myproj.App (22,50): Unknown global symbol used: 'google'
- Warning: myproj.App (22,76): Unknown global symbol used: 'google.maps'
- Warning: myproj.App (23,21): Unknown global symbol used: 'google'
- Warning: myproj.App (23,47): Unknown global symbol used: 'google'
- Warning: myproj.App (23,74): Unknown global symbol used: 'google.maps'
- Warning: myproj.App (15,18): Unknown global symbol used: 'google.maps.LatLng'
I've found lots of references to #ignoreUndefined or #ignore to get rid of this, all supposed to be placed in a javadoc comment like this:
/**
* #ignore(google.*)
*/
However, I've been unable to get this to work. I've tried #ignoreUndefined and #ignore, with and without brackets, with google on it's own, with google. with google*, with google.*, with google.maps.LatLng explicitly (and all the other ones) and a few other variations. In the coffeescript I've tried having it all in a ### block and also in a block at the top of the file that looks like this:
`/**
* #ignoreUndefined google
*/`
or
`/** #ignore(google) */`
(the backticks stick it straight into the javascript source unmolested).
What I really want to do is put something in config.json that tells it to stop complaining about google.* (this would be simpler than per-file as it will be in every file), but I can't find a way to do this. It's starting to be a problem as I'm missing genuine mistakes amongst the pages of Unknown global symbol used: 'google...
Please can anyone tell me what I'm doing wrong?
Edit
Thanks to Richard, I now have it working. In case it's of use to anyone else, my config.json looks like this (irrelevant bits removed):
{
...
"config-warnings" :
{
"job-shadowing": ["common", "lint", "source-all", "build"]
},
"jobs" :
{
"build" :
{
"run" :
[
"coffee-compile",
"build-resources",
"build-script",
"build-files"
]
},
"source-all" :
{
"run" :
[
"coffee-compile",
"source-all-script"
]
},
"common":
{
"lint-check": {
"allowed-globals": [
"google"
]
}
},
"lint":
{
"lint-check": {
"allowed-globals": [
"google"
]
}
},
"coffee-compile" :
{
"extend": ["common"],
"shell" :
{
"command": "coffee --bare --compile --output ./source/class/myapp/ ./coffee/myapp/*.coffee"
}
}
}
}

I assume you are using qooxdoo 3.0 (the current github master branch - not yet released but very soon) which introduces the #ignore syntax (superseding the old #ignore syntax). I got it working like this in my config.json:
{
"config-warnings" :
{
"job-shadowing" : ["source"],
},
...
"jobs" :
{
...
"source" :
{
"lint-check" : {
"allowed-globals" : [
"google"
]
}
}
}
}
Changing the config.json like that should also work in qooxdoo 2.1.1.
Read on:
http://manual.qooxdoo.org/3.0/pages/development/api_jsdoc_at_ignore.html
http://manual.qooxdoo.org/3.0/pages/development/api_jsdoc_ref.html#ignore
http://manual.qooxdoo.org/3.0/pages/tool/generator/generator_config_ref.html#config-warnings
http://manual.qooxdoo.org/3.0/pages/tool/migration/migration_guide.html#compiler-hints