Laravel-mix: Async chunk loading (code splitting) doesn't work

[adiachenko]

• Laravel Mix Version: 0.8.8
• Node Version (node -v): v6.9.2
• NPM Version (npm -v): 3.10.9
• OS: Windows 10

Description:

Async chunks are dropped directly into public directory and are unable to load on demand.

Steps To Reproduce:

if (document.getElementsByClassName('datepicker').length) {
  Vue.component('datepicker', (resolve) => {
    require(['./components/Datepicker.vue'], resolve)
  })
}

[Uriziel01]

Having exactly the same issue here. admin.js and vendors.js generated as intended into js/dist but all async files just emmited to root directory.

Also shouldn't webpack async loader be using main entry output directory? Now its just trying to load my async chunks directly from http://domainname.com/0.js' and all my js files are in fact underhttp://domainname.com/js/dist/0.js`

[etiennellipse]

Did you set an output directory for your async chunks?

mix.js(your_files)
   .webpackConfig({
      output: { chunkFilename: 'chunks/[name].bundle.js', publicPath: '/js/' }
   })

By setting these webpackConfig, the async chunks will be written /js/chunks/...

[adiachenko]

@etiennellipse Thanks, you're correct. Although I changed publicPath to make it work:

  .webpackConfig({
    output: { chunkFilename: 'chunks/[name].chunk.js', publicPath: '/' }
  })

But this should be handled by laravel-mix by default as it's a core webpack feature.

Can someone else test this with their own setup and check different use cases (like hmr)?

UPD: The following setup works for me when versioning assets.

mix.js('resources/assets/js/app.js', 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css')
  .webpackConfig({
    output: {
      chunkFilename: `chunks/[name]${mix.config.inProduction ? '.[chunkhash].chunk.js' : '.chunk.js'}`,
      publicPath: '/',
    },
  })

if (mix.config.inProduction) mix.version()

I'm not sure about this, but for some reason webpack doesn't register changes in async chunks when I add chunkhash in development (e.g. watch task), thence the conditional. This also helps to avoid running clean-webpack-plugin to clear old chunks that pile up.

[adiachenko]

@Uriziel01 @etiennellipse This issue has been fixed as of 0.9.2 and async chunks are now working without any additional configuration, therefore I'm closing this.

[saleh-old]

I'm having this very issue even after upgrading to v2.0.0.

[loyd-cpi]

Is there any workaround with this issue? I'm also using v2.0.0