IE11 Support on 1.0

Trying to run anything on IE11 results in unhappy life, we know that.

But, the main issue to have Chakra running on IE looks to be related to framer-motion not supporting IE11.

I was able to have most stuff working, apart from few components, following this suggestion: https://github.com/framer/motion/issues/364#issuecomment-723137822

My polyfills at begin of my entrypoint (note that proxyDefined has to be included BEFORE proxy-polyfill - as explained in the above link):

import 'core-js/stable'
import { proxyDefined } from './clientState'
import 'proxy-polyfill'
import 'whatwg-fetch'

clientState.js

const hasProxy = (scope) => !!scope.Proxy
export const proxyDefined = hasProxy(window)

framer-motion-wrapper.js

import { motion as origMotion, createDomMotionComponent } from '../node_modules/framer-motion';
import { proxyDefined } from './clientState';

// fragile copied from internal framer-motion supported-elements.ts
import { htmlElements, svgElements } from './framer-motion-supported-elements';

// Adapted from https://github.com/framer/motion/commit/b4319c78fb4bde28ce0d2a8008df48d7e3fd1c8b
const createNonProxyMotion = () => {
  let motionProxy = {
    custom: (component) => {
      createDomMotionComponent(component);
    },
  };
  motionProxy = htmlElements.reduce((acc, key) => {
    acc[key] = createDomMotionComponent(key);
    return acc;
  }, motionProxy);
  motionProxy = svgElements.reduce((acc, key) => {
    acc[key] = createDomMotionComponent(key);
    return acc;
  }, motionProxy);
  return motionProxy;
};

export const motion = proxyDefined ? origMotion : createNonProxyMotion();
export * from '../node_modules/framer-motion';

I’m still having issues with the icon loaded from AlertIcon in Alert component:

I know it’s sub optimal to still support IE, but if that’s anything easy might be worth a try.

Thanks everyone!

[with-heart]

Gonna investigate this when I have some time!

[goethel]

Hey @hanseltime ,

Thank you so much! I was able to get my project running successfully on IE11 without the patch above with your plugins. Checkboxes&Toasts no longer flicker, but Toasts still dont work in IE (they are added to the chakra toast portal div in the DOM successfully, but the end user’s screen doesn’t see them).

However, this is now a styling problem and not a “IE11 wont work at all” problem, so it’s one I can likely solve.

Thanks again!