Usage of dynamic import in router config results with error upon build

[Serhii-the-Dev]

Router configuration like this:

export default {
  boot: () => {
    return Promise.resolve()
  },
  bootComponent: Splash,
  root: 'home',
  routes: [
    {
      path: 'home',
      component: () => import('@/screens/Home'),
      widgets: ['menu']
    },
   ]
}

will trigger the next error after lng build is called:

(!) Circular dependencies
node_modules\@lightningjs\sdk\src\Ads\index.js -> node_modules\@lightningjs\sdk\src\VideoPlayer\index.js -> node_modules\@lightningjs\sdk\src\Ads\index.js
node_modules\@lightningjs\sdk\src\VideoPlayer\index.js -> node_modules\@lightningjs\sdk\src\Launch\index.js -> node_modules\@lightningjs\sdk\src\VideoPlayer\index.js
node_modules\@lightningjs\sdk\src\Ads\index.js -> node_modules\@lightningjs\sdk\src\VideoPlayer\index.js -> node_modules\@lightningjs\sdk\src\Launch\index.js -> node_modules\@lightningjs\sdk\src\Ads\index.js
...and 11 more
[!] Error: UMD and IIFE output formats are not supported for code-splitting builds.
Error: UMD and IIFE output formats are not supported for code-splitting builds.
    at error (C:\Users\dev\AppData\Roaming\npm\node_modules\@lightningjs\cli\node_modules\rollup\dist\shared\rollup.js:5265:30)
    at validateOptionsForMultiChunkOutput (C:\Users\dev\AppData\Roaming\npm\node_modules\@lightningjs\cli\node_modules\rollup\dist\shared\rollup.js:12549:16)
    at Bundle$1.generate (C:\Users\dev\AppData\Roaming\npm\node_modules\@lightningjs\cli\node_modules\rollup\dist\shared\rollup.js:12399:17)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at handleGenerateWrite (C:\Users\dev\AppData\Roaming\npm\node_modules\@lightningjs\cli\node_modules\rollup\dist\shared\rollup.js:20028:23)
    at async Promise.all (index 0)
    at build (C:\Users\dev\AppData\Roaming\npm\node_modules\@lightningjs\cli\node_modules\rollup\dist\bin\rollup:1494:5)
    at runRollup (C:\Users\dev\AppData\Roaming\npm\node_modules\@lightningjs\cli\node_modules\rollup\dist\bin\rollup:1646:21)

(node:12672) UnhandledPromiseRejectionWarning: Error: Error: Command failed with exit code 1: C:\Users\dev\AppData\Roaming\npm\node_modules\@lightningjs\cli\node_modules\.bin\rollup -c C:\Users\dev\AppData\Roaming\npm\node_modules\@lightningjs\cli\src\configs\rollup.es6.config.js --input C:\Users\dev\Work\app\app-lng\src\index.js --file C:\Users\dev\Work\app\app-lng\build\appBundle.js --name APP_app

[erikhaandrikman]

Hi, sorry for the delay in reply, this should work out of the box without throwing an error. Is this still and issue? And is it possible to provide a bit more context or a way that we can reproduce it?

[Serhii-the-Dev]

@erikhaandrikman sorry for a delay as well :) This issue is tied to lng-cli, it makes a iife build, which is not compatible with dynamic imports: https://github.com/rdkcentral/Lightning-CLI/blob/0385006cc28fb53d491dcbcf9ec61c6d7c92063f/src/configs/rollup.es6.config.js#L82 We managed to mitigate the issue with our own Webpack-based bundling pipeline...alas, we are not sure if the pipeline output will be compatible with ML app store, since we have multiple chunks(which are dynamically loaded) instead of a one big js file(like the lng-cli outputs).

[erikhaandrikman]

Are you still facing this issue? I'm not able to reproduce this anymore with rollup or esbuild please let us know if any help is required

[leccoc]

Hi @erikhaandrikman . Today I also attempted to use a dynamic import on my boot function in my routes.js, but just as @Serhii-the-Dev I got the same error. I'm using a Promise.all() to load various external scripts before the app fully loads but there's this one script that I need to load dynamically (because I have it in a .js file locally and auto executes as soon as it gets imported) to then load my other scripts which depend on it.

boot: () => {
     // Other functions that return promises and load scripts go here

    function wrapperMessagingSDKPromise() {
      return import('../../lib/navigation.js').then(() => {
        return new Promise((resolve, reject) => {
           const wrapperMessagingSDKScript = document.createElement('script');
           wrapperMessagingSDKScript.src =
              'https://xxx.xxx.com/someScript.js';
           wrapperMessagingSDKScript.addEventListener('load', () => resolve(true));
           wrapperMessagingSDKScript.addEventListener('error', () =>
             reject(false),
           );
          document.body.appendChild(wrapperMessagingSDKScript);
        })
      });
    }

    return Promise.all([
      imaSDKPromise(),
      imaDAISDKPromise(),
      externalGtagPromise(),
      embedGtagPromise(),
      wrapperMessagingSDKPromise(),
    ]);
}

Lightning-CLI 2.5.1 SDK v4.3.3

[erikhaandrikman]

Are you using esbuild or rollup?