Codesandbox-client: IE11 Support

[CompuIves]

I believe we are not transpiling a file, which causes IE11 to choke on an arrow expression. This should be an easy fix as soon as we find which files are not being transpiled.

[jseminck]

It fails here. These files are indeed not transpiled.

/***/ "./node_modules/@emmetio/extract-abbreviation/dist/extract-abbreviation.es.js":
/*!************************************************************************************!*\
  !*** ./node_modules/@emmetio/extract-abbreviation/dist/extract-abbreviation.es.js ***!
  \************************************************************************************/
/*! exports provided: default */
/*! exports used: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval("/**\n * Minimalistic backwards stream reader\n */\nclass StreamReader {\n\tconstructor(string) {\n\t\tthis.string = string;\n\t\tthis.pos = this.string.length;\n\t}\n\n\tsol() {\n\t\treturn this.pos === 0;\n\t}\n\n\tpeek(offset) {\n\t\treturn this.string.charCodeAt(this.pos - 1 + (offset || 0));\n\t}\n\n\tprev() {\n\t\tif (!this.sol()) {\n\t\t\treturn this.string.charCodeAt(--this.pos);\n\t\t}\n\t}\n\n\teat(match) {\n\t\tconst ok = typeof match === 'function'\n\t\t\t? match(this.peek())\n\t\t\t: match === this.peek();\n\n\t\tif (ok) {\n\t\t\tthis.pos--;\n\t\t}\n\n\t\treturn ok;\n\t}\n\n\teatWhile(match) {\n\t\tconst start = this.pos;\n\t\twhile (this.eat(match)) {}\n\t\treturn this.pos < start;\n\t}\n}\n\n/**\n * Quotes-related utilities\n */\n\nconst SINGLE_QUOTE = 39; // '\nconst DOUBLE_QUOTE = 34; // \"\nconst ESCAPE       = 92; // \\\n\n/**\n * Check if given character code is a quote\n * @param  {Number}  c\n * @return {Boolean}\n */\nfunction isQuote(c) {\n\treturn c === SINGLE_QUOTE || c === DOUBLE_QUOTE;\n}\n\n/**\n * Consumes quoted value, if possible\n * @param  {StreamReader} stream\n * @return {Boolean}      Returns `true` is value was consumed\n */\nfunction eatQuoted(stream) {\n\tconst start = stream.pos;\n\tconst quote = stream.prev();\n\n\tif (isQuote(quote)) {\n\t\twhile (!stream.sol()) {\n\t\t\tif (stream.prev() === quote && stream.peek() !== ESCAPE) {\n\t\t\t\treturn true;\n\t\t\t}\n\t\t}\n\t}\n\n\tstream.pos = start;\n\treturn false;\n}\n\nconst TAB         = 9;\nconst SPACE       = 32;\nconst DASH        = 45; // -\nconst SLASH       = 47; // /\nconst COLON       = 58; // :\nconst EQUALS      = 61; // =\nconst ANGLE_LEFT  = 60; // <\nconst ANGLE_RIGHT = 62; // >\n\n/**\n * Check if given reader’s current position points at the end of HTML tag\n * @param  {StreamReader} stream\n * @return {Boolean}\n */\nvar isAtHTMLTag = function(stream) {\n\tconst start = stream.pos;\n\n\tif (!stream.eat(ANGLE_RIGHT)) {\n\t\treturn false;\n\t}\n\n\tlet ok = false;\n\tstream.eat(SLASH); // possibly self-closed element\n\n\twhile (!stream.sol()) {\n\t\tstream.eatWhile(isWhiteSpace);\n\n\t\tif (eatIdent(stream)) {\n\t\t\t// ate identifier: could be a tag name, boolean attribute or unquoted\n\t\t\t// attribute value\n\t\t\tif (stream.eat(SLASH)) {\n\t\t\t\t// either closing tag or invalid tag\n\t\t\t\tok = stream.eat(ANGLE_LEFT);\n\t\t\t\tbreak;\n\t\t\t} else if (stream.eat(ANGLE_LEFT)) {\n\t\t\t\t// opening tag\n\t\t\t\tok = true;\n\t\t\t\tbreak;\n\t\t\t} else if (stream.eat(isWhiteSpace)) {\n\t\t\t\t// boolean attribute\n\t\t\t\tcontinue;\n\t\t\t} else if (stream.eat(EQUALS)) {\n\t\t\t\t// simple unquoted value or invalid attribute\n\t\t\t\tok = eatIdent(stream);\n\t\t\t\tbreak;\n\t\t\t} else if (eatAttributeWithUnquotedValue(stream)) {\n\t\t\t\t// identifier was a part of unquoted value\n\t\t\t\tok = true;\n\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\t// invalid tag\n\t\t\tbreak;\n\t\t}\n\n\t\tif (eatAttribute(stream)) {\n\t\t\tcontinue;\n\t\t}\n\n\t\tbreak;\n\t}\n\n\tstream.pos = start;\n\treturn ok;\n};\n\n/**\n * Eats HTML attribute from given string.\n * @param  {StreamReader} state\n * @return {Boolean}       `true` if attribute was consumed.\n */\nfunction eatAttribute(stream) {\n\treturn eatAttributeWithQuotedValue(stream) || eatAttributeWithUnquotedValue(stream);\n}\n\n/**\n * @param  {StreamReader} stream\n * @return {Boolean}\n */\nfunction eatAttributeWithQuotedValue(stream) {\n\tconst start = stream.pos;\n\tif (eatQuoted(stream) && stream.eat(EQUALS) && eatIdent(stream)) {\n\t\treturn true;\n\t}\n\n\tstream.pos = start;\n\treturn false;\n}\n\n/**\n * @param  {StreamReader} stream\n * @return {Boolean}\n */\nfunction eatAttributeWithUnquotedValue(stream) {\n\tconst start = stream.pos;\n\tif (stream.eatWhile(isUnquotedValue) && stream.eat(EQUALS) && eatIdent(stream)) {\n\t\treturn true;\n\t}\n\n\tstream.pos = start;\n\treturn false;\n}\n\n/**\n * Eats HTML identifier from stream\n * @param  {StreamReader} stream\n * @return {Boolean}\n */\nfunction eatIdent(stream) {\n\treturn stream.eatWhile(isIdent);\n}\n\n/**\n * Check if given character code belongs to HTML identifier\n * @param  {Number}  c\n * @return {Boolean}\n */\nfunction isIdent(c) {\n\treturn c === COLON || c === DASH || isAlpha(c) || isNumber(c);\n}\n\n/**\n * Check if given character code is alpha code (letter though A to Z)\n * @param  {Number}  c\n * @return {Boolean}\n */\nfunction isAlpha(c) {\n\tc &= ~32; // quick hack to convert any char code to uppercase char code\n\treturn c >= 65 && c <= 90; // A-Z\n}\n\n/**\n * Check if given code is a number\n * @param  {Number}  c\n * @return {Boolean}\n */\nfunction isNumber(c) {\n\treturn c > 47 && c < 58;\n}\n\n/**\n * Check if given code is a whitespace\n * @param  {Number}  c\n * @return {Boolean}\n */\nfunction isWhiteSpace(c) {\n\treturn c === SPACE || c === TAB;\n}\n\n/**\n * Check if given code may belong to unquoted attribute value\n * @param  {Number}  c\n * @return {Boolean}\n */\nfunction isUnquotedValue(c) {\n\treturn c && c !== EQUALS && !isWhiteSpace(c) && !isQuote(c);\n}\n\nconst code = ch => ch.charCodeAt(0);\nconst SQUARE_BRACE_L = code('[');\nconst SQUARE_BRACE_R = code(']');\nconst ROUND_BRACE_L  = code('(');\nconst ROUND_BRACE_R  = code(')');\nconst CURLY_BRACE_L  = code('{');\nconst CURLY_BRACE_R  = code('}');\n\nconst specialChars = new Set('#.*:$-_!@%^+>/'.split('').map(code));\nconst bracePairs = new Map()\n.set(SQUARE_BRACE_L, SQUARE_BRACE_R)\n.set(ROUND_BRACE_L,  ROUND_BRACE_R)\n.set(CURLY_BRACE_L,  CURLY_BRACE_R);\n\n/**\n * Extracts Emmet abbreviation from given string.\n * The goal of this module is to extract abbreviation from current editor’s line,\n * e.g. like this: `<span>.foo[title=bar|]</span>` -> `.foo[title=bar]`, where\n * `|` is a current caret position.\n * @param {String}  line A text line where abbreviation should be expanded\n * @param {Number}  [pos] Caret position in line. If not given, uses end-of-line\n * @param {Boolean} [lookAhead] Allow parser to look ahead of `pos` index for\n * searching of missing abbreviation parts. Most editors automatically inserts\n * closing braces for `[`, `{` and `(`, which will most likely be right after\n * current caret position. So in order to properly expand abbreviation, user\n * must explicitly move caret right after auto-inserted braces. Whith this option\n * enabled, parser will search for closing braces right after `pos`. Default is `true`\n * @return {Object} Object with `abbreviation` and its `location` in given line\n * if abbreviation can be extracted, `null` otherwise\n */\nfunction extractAbbreviation(line, pos, lookAhead) {\n\t// make sure `pos` is within line range\n\tpos = Math.min(line.length, Math.max(0, pos == null ? line.length : pos));\n\n\tif (lookAhead == null || lookAhead === true) {\n\t\tpos = offsetPastAutoClosed(line, pos);\n\t}\n\n\tlet c;\n\tconst stream = new StreamReader(line);\n\tstream.pos = pos;\n\tconst stack = [];\n\n\twhile (!stream.sol()) {\n\t\tc = stream.peek();\n\n\t\tif (isCloseBrace(c)) {\n\t\t\tstack.push(c);\n\t\t} else if (isOpenBrace(c)) {\n\t\t\tif (stack.pop() !== bracePairs.get(c)) {\n\t\t\t\t// unexpected brace\n\t\t\t\tbreak;\n\t\t\t}\n\t\t} else if (has(stack, SQUARE_BRACE_R) || has(stack, CURLY_BRACE_R)) {\n\t\t\t// respect all characters inside attribute sets or text nodes\n\t\t\tstream.pos--;\n\t\t\tcontinue;\n\t\t} else if (isAtHTMLTag(stream) || !isAbbreviation(c)) {\n\t\t\tbreak;\n\t\t}\n\n\t\tstream.pos--;\n\t}\n\n\tif (!stack.length && stream.pos !== pos) {\n\t\t// found something, remove some invalid symbols from the\n\t\t// beginning and return abbreviation\n\t\tconst abbreviation = line.slice(stream.pos, pos).replace(/^[\\*\\+\\>\\^]+/, '');\n\t\treturn {\n\t\t\tabbreviation,\n\t\t\tlocation: pos - abbreviation.length\n\t\t};\n\t}\n}\n\n/**\n * Returns new `line` index which is right after characters beyound `pos` that\n * edditor will likely automatically close, e.g. }, ], and quotes\n * @param {String} line\n * @param {Number} pos\n * @return {Number}\n */\nfunction offsetPastAutoClosed(line, pos) {\n\t// closing quote is allowed only as a next character\n\tif (isQuote(line.charCodeAt(pos))) {\n\t\tpos++;\n\t}\n\n\t// offset pointer until non-autoclosed character is found\n\twhile (isCloseBrace(line.charCodeAt(pos))) {\n\t\tpos++;\n\t}\n\n\treturn pos;\n}\n\nfunction has(arr, value) {\n\treturn arr.indexOf(value) !== -1;\n}\n\nfunction isAbbreviation(c) {\n\treturn (c > 64 && c < 91)   // uppercase letter\n\t\t|| (c > 96 && c < 123)  // lowercase letter\n\t\t|| (c > 47 && c < 58)   // number\n\t\t|| specialChars.has(c); // special character\n}\n\nfunction isOpenBrace(c) {\n\treturn c === SQUARE_BRACE_L || c === ROUND_BRACE_L || c === CURLY_BRACE_L;\n}\n\nfunction isCloseBrace(c) {\n\treturn c === SQUARE_BRACE_R || c === ROUND_BRACE_R || c === CURLY_BRACE_R;\n}\n\n/* harmony default export */ __webpack_exports__[\"a\"] = (extractAbbreviation);\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/@emmetio/extract-abbreviation/dist/extract-abbreviation.es.js\n// module id = ./node_modules/@emmetio/extract-abbreviation/dist/extract-abbreviation.es.js\n// module chunks = 23 24\n\n//# sourceURL=webpack:///./node_modules/@emmetio/extract-abbreviation/dist/extract-abbreviation.es.js?");

[jsonnull]

yarn why v1.0.1
[1/4] 🤔  Why do we have the module "@emmetio/extract-abbreviation"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
info This module exists because "@emmetio/codemirror-plugin" depends on it.

[CompuIves]

Hmm, we use the module for emmet support in CodeMirror. We can add a webpack config loader for this specific file for now, until we move over to Monaco.

[CompuIves]

Fixed!

[souporserious]

It looks like a similar bug might be back. I'm getting this when trying to test something in IE11:

[lbogdan]

@souporserious IE11 support is back!

[eldyvoon]

still doesn't work for react, unexpected identifier Error.

[AndyOGo]

Still doesn't work for vanilla JS projects too:

IDE: https://codesandbox.io/s/quizzical-darkness-x0i9b
App: https://x0i9b.csb.app/

SCRIPT1002: Syntax error
sandbox-startup.1db63978b.js (1,15784)
SCRIPT1010: Expected identifier
vendors~sandbox.be5921889.chunk.js (1,8878)
SCRIPT1002: Syntax error
default~app~embed~sandbox.ad29a3285.chunk.js (1,16090)
SCRIPT1010: Expected identifier
sandbox.f2591e6b5.js (1,24812)v