Trying to dynamically load a slider package, only if required

[prathamesh-gharat]

async loadSlider () {
  import('@splidejs/splide/dist/css/splide-core.min.css')
  const Splide = await import('@splidejs/splide')
}

Results in error Conflict: Multiple chunks emit assets to the same filename assets/main.css (chunks 2 and main) for the line import('@splidejs/splide/dist/css/splide-core.min.css')

[domtra]

Hi @prathamesh-gharat,

I honestly do not know, if this is easy to achieve. We are working on an overhaul of the built system with which this will be easily possible. It is a bigger change and it is neither public yet, nor do we have an ETA.

The issue is most likely related to https://github.com/flyntwp/flynt/blob/master/webpack.config.js#L156-L161.

One way to overcome this, however might be to use magic comment in the import. So try something like

async loadSlider () {
  import(
    /* webpackChunkName: "splide-core" */ 
    '@splidejs/splide/dist/css/splide-core.min.css'
  )
  const Splide = await import('@splidejs/splide')
}

This might be overwritten by the settings in the webpack.config.js, however.

Also, you might run into issues with loading these dynamically created chunks. This is 1. because of the publicPath setting in webpack.config.js, and also because of the revving, when you do npm run build.

Hope this info helps. Otherwise you can look forward to the future releases ;)