clayui.com Dev mode doesn't work on IE11

[pat270]

Start server using yarn develop -H 0.0.0.0
Connect to site using IE11
Can't view site due to JS error:

File: commons.js, Line: 137496, Column: 70

const getCharacterClassEscapeSet = (character, unicode, ignoreCase) => {

[matuzalemsteles]

🤔 @pat270 if you run yarn build the site and raise the site with yarn serve, do we still have this error?

[pat270]

Nice, it works with

yarn build
yarn serve -H <ip>

[matuzalemsteles]

Okay, weird maybe it's because there is no polyfill for the development environment? maybe updating Gatsby can solve it. but maybe Gatsby doesn't want to support IE 11 for the Dev environment, we may have to run the build and test there.

[pat270]

From https://github.com/gatsbyjs/gatsby/issues/21474:

Hey, you're using an NPM module that doesn't transpile to IE11. If you know which npm package it is you can use https://www.gatsbyjs.org/packages/gatsby-plugin-compile-es6-packages/ to fix it.

[matuzalemsteles]

Hmm okay, now we need to find out which package is this haha

[pat270]

It looks like that code is coming from https://github.com/liferay/clay/blob/master/yarn.lock#L5387. I don't see it in the yarn.lock file on master, but on my local clay/yarn.lock:

react-live@^2.0.1:
  version "2.1.2"
  resolved "https://registry.yarnpkg.com/react-live/-/react-live-2.1.2.tgz#f81a2926d9531563b04a62afe4feee09d78c058c"
  integrity sha512-RAyu0FaFPnSqC3mG3ira0qmAGfPmGKEmGcAkXHwUNTFgbhVa38gbUSz8K1kvLSZ4yi19EbtVEa7LWQwxO5mEsA==
  dependencies:
    buble "0.19.6"
    core-js "^2.4.1"
    create-react-context "0.2.2"
    dom-iterator "^1.0.0"
    prism-react-renderer "^0.1.0"
    prop-types "^15.5.8"
    react-simple-code-editor "^0.9.0"
    unescape "^0.2.0"

[matuzalemsteles]

It looks like that code is coming from https://github.com/liferay/clay/blob/master/yarn.lock#L5387. I don't see it in the yarn.lock file on master, but on my local clay/yarn.lock:

Are you saying that the problem could be the buble package? it seems to be a lib for the node for transform to ES2015...

[pat270]

IE11 throws an error on that line of code:

const getCharacterClassEscapeSet = (character, unicode, ignoreCase) => {

I found that line in clayui.com/public/app-0d7877081af94de7eae1.js.map I looked through node_modules and found that line in buble. :shrug:

[matuzalemsteles]

lol, this is really weird if you add the buble in the https://www.gatsbyjs.org/packages/gatsby-plugin-compile-es6-packages/ plugin, can you get rid of this problem?

[wincent]

I don't think buble is the problem.

rg -uu getCharacterClassEscapeSet -l
clayui.com/public/app-409f6e0d562e87a0ef91.js.map
node_modules/regexpu-core/rewrite-pattern.js
node_modules/buble/dist/buble-browser-deps.umd.js
node_modules/buble/dist/buble-browser-deps.umd.js.map
node_modules/css-selector-tokenizer/node_modules/regexpu-core/rewrite-pattern.js

The culprit is node_modules/regexpu-core/rewrite-pattern.js.

buble, and even node_modules/css-selector-tokenizer/node_modules/regexpu-core/rewrite-pattern.js are fine.

From yarn why:

=> Found "[email protected]"
=> Found "css-selector-tokenizer#[email protected]"

So 4.7.0 is naughty, and 1.0.0 is nice.

[pat270]

Thanks @wincent I had no idea what I was looking at.

[julien]

Just going through the issues and wondering ... do we still want to support IE11? If so, is that because clay 3.x is used on 7.3.x which has limited support for IE11? Maybe it's time to work on clay 4.x :smile:

[matuzalemsteles]

Well I would say to remove IE11 support altogether 🤪 but we still have people using clayui.com on IE11 🤷‍♂️. For this specific case, I would dismiss the idea of having clayui.com in dev mode running on IE11.

[pat270]

If I remember correctly this was created because we were trying to switch 100% of our development over to clayui.com. I couldn't test on my IE11 vm because of this. Since we forgot about it, I agree we should close this before someone notices.

[julien]

:+1: Thanks @pat270 and @matuzalemsteles for the feedback! Matu, feel free to close this if you also agree.

[matuzalemsteles]

Closing it silently...