IE11 Support for amazon-connect-chatjs

I recently built a chat widget that supports Amazon Connect Chatbot with amazon-connect-chatjs. It turned out the library does not support IE11 (see the issue I raised here). The good news is that if we add polyfills, we can make it work. AWS will probably update the library with IE support in the future. But for now, you need to include polyfills below.

If you want to include it in the bundle, you can just install core-js.

import 'core-js/features/promise';
import 'core-js/features/array/from';
import 'core-js/features/object/assign';
import 'core-js/features/object/values';
import 'core-js/es/set';

The hardest one to figure out was Array.from. In IE11, if you do Array.from(new Set([1, 2, 3]), it gives back the empty array without error. This is what is used to get the message in onMessage().

I personally think being able to support IE is one of the most critical front end skills. It is probably more important than using cutting-edge JS tricks that only work for Chrome because a lot of companies still want to support IE11. Some people hate it, but I had a lot of fun figuring this out!

For further information regarding adding polyfills in TypeScript bundle, check out this post

Front-End
TypeScript: type aliases to check type equality

This post is to analyse how the type equality check by using type aliases proposed by Matt Pocock in his twitter post. These type aliases allow us to elegantly express type equality checks in unit tests. All we need to do is to pass the output and expected types in …

Front-End
Fixing it.only type error in Jest

If you are getting a type error with it.only in Jest, it could be due to incorrect TypeScript typings or incompatible versions of Jest and TypeScript. To resolve this issue, you can try the following steps: Make sure you have the latest versions of Jest and its TypeScript typings installed …

Front-End
yup conditional validation example

Here’s an example of a Yup validation logic where the first input field is optional but, if filled, it must contain only alphabetic characters, and the second input field is required: import * as Yup from “yup”; const validationSchema = Yup.object().shape({ firstField: Yup.string().matches(/^[A-Za-z]*$/, { message: “First field must contain only …