Not working in IE11

[SassNinja]

Help us to manage our issues by answering the following:

1. Describe your issue:

I'm trying to use riot v4 with IE11 and added all required polyfills.
However even with it the code throws an error:

Unable to get property 'removeAttribute' of undefined or null reference

Any idea how to fix this or rather is riot v4 supposed to be used with IE11?

Here's my code

index.html

<my-list></my-list>
<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=Object.values%2CArray.from%2CObject.assign%2CCustomEvent%2CSymbol%2CObject.entries"></script>
<script src="index.js"></script>

index.js

import MyList from './my-list.riot'
import {component} from 'riot'

component(MyList)(document.querySelector('my-list'), {
    items: ['apple', 'orange', 'banana']
})

my-list.riot

<my-list>
    <ul if={ props.items }>
        <li each={ item in props.items }>{ item }</li>
    </ul>
</my-list>

2. Can you reproduce the issue?

see above

3. On which browser/OS does the issue appear?

IE11, Win7

4. Which version of Riot does it affect?

Any

5. How would you tag this issue?

• Question
• Bug
• Discussion
• Feature request
• Tip
• Enhancement
• Performance

[Elastic1]

you need webcomponents template polyfill .

[SassNinja]

@Elastic1 thanks for the hint!

I've installed that polyfill. Now I get another error which comes from a function called morph

function morph(sourceElement, targetElement) {
  var sourceWalker = createWalker(sourceElement);
  var targetWalker = createWalker(targetElement); // recursive function to walk source element tree

  var walk = function walk(fn) {
    return sourceWalker.nextNode() && targetWalker.nextNode() && fn() && walk(fn);
  };

  walk(function () {
    var currentNode = sourceWalker.currentNode;
    var targetNode = targetWalker.currentNode;

    if (currentNode.tagName === targetNode.tagName) {
      sync(currentNode, targetNode);
    }

    return true;
  });
}

Precisely it's sourceWalker.nextNode() which throws the error Exception occurred.
(sourceWalker is a TreeWalker what's actually supposed to work in IE11)

Any idea how to fix this one?

[GianlucaGuarini]

I had to polyfill many native browser features and create a bundle via babel only for IE11 but Riot.js 4 can definitely work on ie11 it's just not supported out of the box:

https://plnkr.co/edit/DLGFc6W0vUZcWqsnbfsR?p=preview

[lxndrdagreat]

@GianlucaGuarini I unfortunately have to support IE 11 for a few clients, so I am continuing to use Riot 3. I would love to be using Riot 4 at work (using it in personal projects and loving it). I use Rollup and Babel as part of my workflow for for both Riot 3 and 4, precompiling instead of using "+compiler" in the browser.

I've been trying to replicate your plunkr locally, by cloning the Riot repo and altering the rollup config to change the target to "ie 11". When I build riot+compiler, my end result JS doesn't work in any browser.

Can you elaborate on what you're changing to get your IE11 riot build?

[GianlucaGuarini]

I will create a working IE11 example with Riot.js 4 I think it's the easiest path to take here

[lxndrdagreat]

Thank you so much! I absolutely love what you've been doing with Riot 4 and would like to have my team using it.

[hairlesshobo]

I had to polyfill many native browser features and create a bundle via babel only for IE11 but Riot.js 4 can definitely work on ie11 it's just not supported out of the box:

https://plnkr.co/edit/DLGFc6W0vUZcWqsnbfsR?p=preview

OK.. this saved me!!

I've been struggling for two days to get my app to work in IE11 (for corp intranet compatibility) and getting riot to play nice was the last issue I was encountering. That example with the web components template was exactly what I was missing!!

Thank you very much!!