Unable to get applyPolyfills && defineCustomElements to import / work properly

I’m looking for some advice on where i’m possibly going wrong when trying to apply the polyfills to get the duet date picker working in IE11 using basic HTML.

I think i am either trying to import it wrong or misunderstanding how i’m supposed to bundle the loader and import it into html.

This is how i am pulling the dependancies into the html head and my initial attempt at getting the polyfill working.

<script type="module" src="https://cdn.jsdelivr.net/npm/@duetds/date-picker@1.1.0/dist/duet/duet.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@duetds/date-picker@1.1.0/dist/duet/duet.js"></script>

<script>
  // applyPolyfills & defineCustomElements are both undefined
  applyPolyfills().then(function () {
    defineCustomElements(window);
  })
</script>

I have additionally tried to use browserfy to bundle the dependencies into a single standalone UMD js file and import that instead.

var loader = require("@duetds/date-picker/dist/loader");

module.exports = {
  applyPolyfills: loader.applyPolyfills,
  defineCustomElements: loader.defineCustomElements,
};

browserify --standalone duetLoader -r ./assets/javascript/duet-non-bundled.js -o assets/javascript/duet-bundled.js

<script type="text/javascript" src="/assets/javascript/duet-bundled.js"></script>
<script>
  var applyPolyfills = duetLoader.applyPolyfills;
  var defineCustomElements = duetLoader.defineCustomElements;
  applyPolyfills().then(function () {
     defineCustomElements(window);
  })
</script>

The above approach resolves the issue with the methods being undefined but i get the following stack trace on runtime when the <duet-date-picker> tags are rendered and the date picker becomes unusable / non responsive to on click events.

duet-bundled.js:1422 Error: Cannot find module './duet-date-picker.cjs.entry.js'
    at o (duet-bundled.js:1)
    at duet-bundled.js:1
    at duet-bundled.js:1432
    at async initializeComponent (duet-bundled.js:1163) undefined

Prior to trying to get the poly fills to work i have encountered no issues with the date picker.

Any advice or a point in the right direction would be much appreciated. If it’s something missing in the docs that could be improved i’d be happy to contribute to improving them once i’ve managed to find a solution.

P.S this is a great date picker in terms of UI and accessibility, I look forward to seeing it develop further.

[tamlyn]

This issue can probably be closed now.

[mikeystewartap]

I don’t think you should need to call applyPolyfills yourself. The nomodule script tag will include the polyfills. And both script tag should internally call defineCustomElements.

In other words, just this should suffice:

<script type="module" src="https://cdn.jsdelivr.net/npm/@duetds/date-picker@1.1.0/dist/duet/duet.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@duetds/date-picker@1.1.0/dist/duet/duet.js"></script>

Unless I am missing something?

I think you are 100% correct and i’ve just misunderstood the docs and the relevance of the nomodule script tag. I encountered the custom colours not working and assumed that was happening because i wasn’t explicitly running the applyPolyfills function.

This is an example of the custom colours code i couldn’t get working in IE.

document.documentElement.style.setProperty(
  "--duet-color-primary", "#c92222"
);

Edit: This hasn’t been a blocker or anything but thought it was worth bringing up.