Dynamic Import using async await inside domReady from '@roots/sage/client'

sage
1

Hello guys,

I’m really sorry for this question. I’m not so familiar with async await but I’m still learning how to use it properly. I just want to ask if this is the correct way to add dynamic import inside domready? Or do I need to place it outside const main?

import { domReady } from '@roots/sage/client';
const main = async (err) => {
  if (err) {
    // handle hmr errors
    console.error(err);
  }
  
  (async() => {
    const conditionalScript = await import('./home.js');
    conditionalScript.test();
  })();

  // $win.on('resize', function () {
    
  // });
};

domReady(main);

import.meta.webpackHot?.accept(main);
2

Could you check to import your script as async at the top, then initnialize function t() in main?

as below:

import { domReady } from '@roots/sage/client';
async function t() {
    const conditionalScript = await import('./home.js');
    conditionalScript;
}

const main = async (err) => {
  if (err) {
    // handle hmr errors
    console.error(err);
  }
  

  t()

  // $win.on('resize', function () {
    
  // });
};
2 Likes
4

Hello @Jacek,

This is working and I think this is much cleaner.

Thank you