IE11 with LazyControllers

[nufaylr]

Hi, when we try to polyfill it always ignores template literals. I can see it generated via the following file under stimulus-bridge module @symfony/stimulus-bridge/src/webpack/create-controllers-module.js

create-controllers-module.js

if (fetchMode === 'lazy') {
                hasLazyControllers = true;
                moduleValueContents = `
new Promise((resolve, reject) => resolve({ default:
${generateLazyController(controllerMain, 6)}
  }))
                `.trim();
            }

Did anyone know how can polyfill lazy stimulus controller that will work with IE11?

Many thanks

[weaverryan]

Hi there!

Sorry for the slow reply :). The lazy functionality fundamentally relies on a Promise. So, you just need to "polyfill" this. Normally I think Promise is polyfilled automatically if you use it in your app. But since this is vendor code, that doesn't happen.

Try:

import "core-js/modules/es.promise";

Adding a note to the docs, I think, would be helpful.

Cheers!

[nufaylr]

Hi @weaverryan Thank you for this. do we needs to add under bootstrap.js ?

// bootstrap.js

import "core-js/modules/es.promise";
import { startStimulusApp } from '@symfony/stimulus-bridge';

export const app = startStimulusApp(
  require.context(
    "@symfony/stimulus-bridge/lazy-controller-loader!./controllers",
    true,
    /\.(j|t)sx?$/
  )
);
\

[weaverryan]

Yes, that would do it :).

Btw, Stimulus 3 has dropped support for IE11 entirely. The next version of this library will use Stimulus 3 (but you can stay on the old version if you need IE 11 support).

Cheers!