IE11 Compatibility?

[fudgeboy2000]

Describe your question

Bit of a long shot - any idea on IE11 compatibility for ChartJS.Blazor for server-side? I'm using daddoon's Blazor/Polyfill which covers most basic scenarios, but I get a SCRIPT1002 Syntax Error on ChartJsBlazorInterop.js (3,1) in IE11's console. Are there any extra polyfills I might need?

Which Blazor project type is your question related to?

• Server-Side

Which charts is this question related to?

All charts

[Joelius300]

As far as I understand, IE11 doesn't support js-classes (source). Since we're using classes, you might need to add support for those or rewrite the js. However, I don't know how you would achieve the first option and I understand that the second option isn't much more desirable.

Sadly, I don't think I can help you directly (I'm simply not experienced enough with this stuff) but I think these links might help you:

• Support for ES6 in Internet Explorer 11 (StackOverflow)
• IE11 gives SCRIPT1002 error when defining class in javascript (StackOverflow)

[SeppPenner]

IE11

Just. Let. It. Die. 🤣 🤣 🤣 🤣

[fudgeboy2000]

As far as I understand, IE11 doesn't support js-classes (source). Since we're using classes, you might need to add support for those or rewrite the js. However, I don't know how you would achieve the first option and I understand that the second option isn't much more desirable.

Sadly, I don't think I can help you directly (I'm simply not experienced enough with this stuff) but I think these links might help you:

• Support for ES6 in Internet Explorer 11 (StackOverflow)
• IE11 gives SCRIPT1002 error when defining class in javascript (StackOverflow)

Many thanks! I'll take a good look at these this week and see how far I get. If I achieve anything I'll report back here.

IE11

Just. Let. It. Die. 🤣 🤣 🤣 🤣

Hahha mate, I'll be the first in line with the baseball bat to put IE11 out of its misery. But legacy support for legacy software on legacy hardware used by legacy (near retirement, surely) users means I have to cover all bases. Even if those bases are constructed from termite-infested plywood.

[SeppPenner]

Hahha mate, I'll be the first in line with the baseball bat to put IE11 out of its misery. But legacy support for legacy software on legacy hardware used by legacy (near retirement, surely) users means I have to cover all bases. Even if those bases are constructed from termite-infested plywood.

I know, I already had the same problem with another project ;)

[fudgeboy2000]

Looking good so far.

Thanks to the pointers above about the use of ES6 class() and the SO threads, I looked into using Babel to transpile ChartJSBlazorInterop.js down to ES5. I gave that a go, and then changed the script tag in _host to be conditional:

<!-- This is the glue between the C# code and the ChartJs charts --> <script type="text/javascript"> if (/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) { document.write('<script src="ChartJsBlazorInterop.js" type="text/javascript" language="javascript"><\/script>'); } else { document.write('<script src="_content/ChartJs.Blazor/ChartJsBlazorInterop.js" type="text/javascript" language="javascript"><\/script>'); } </script>

So an IE11 user will use the transpiled version (which I've stuffed into wwwroot), everyone else takes the original one from the nuget package. And it seems to work - I can see charts in IE11, blazor, server-side. I'll be back to moan if I hit any snags further down the line.

I know it's debatable if this effort is worth it for IE11's sake. And I'll have to use babel to transpile each time the Interop.js file changes in an update to keep them synchronised. But it's an option for those of us who are stuck in the dim and distant past.

[Joelius300]

I'm glad you got it working! I think for now this is the best you can do.

@mariusmuntean Would you consider not using ES6 features in order to make it compatible with IE11 and below or should we just leave it as is and let people transpile if necessary? I don't know how many ES6 features we use apart from classes and I also don't know how much effort it would be considering we're using typescript, not javascript. I'd be fine with leaving it as is and letting people transpile (sorry @fudgeboy2000) since not many people rely on it and also since the ts-interop shouldn't change too often (if it does, we should definitely consider making it compatible).

[fudgeboy2000]

I was surprised by how easy it was to get babel setup and doing its thing - it's a small extra build step for devs in my unfortunate position considering how easy the ChartJS.Blazor package makes adding charts. A small price to pay, and hopefully this thread will help others who have to put up with IE11 in their lives.

[mariusmuntean]

@fudgeboy2000 great job! I'm really glad you got it working and then documented it here.

In my opinion it should work even easier than using Babel. Nothing against Babel, but there's no need for an extra step. Instead, just do this:

• In the tsconfig.json adjust the target to ES5
• Reference something like core-js in you _Host.cshtml BEFORE referencing the updated ChartJs interop file.
• Profit!

If anyone has a Windows machine at hand and is willing to test this out, I'd appreciate if they can document the results here.

@Joelius300 you're right, I wouldn't downgrade the traspilation target that much. After consulting a colleague on this issue, I think that the added complexity, increased download size and/or loss of performance aren't worth it. On the other hand, if it turns out that there are many people who need this, I would be willing to add a second CD pipeline that publishes another Nuget package for supporting older browsers.

[Joelius300]

Should we leave this issue open? Maybe link to it in the readme where we mention what browsers we support (we do that right 🙄) and then close?

The wiki has been long dead so until we have proper documentation, this would have to go into the readme. Or we just leave it and people will search for it and find it.

Opinions?