Laravel-mix: [6.*] Dynamic import .version()

[Eldair]

• Laravel Mix Version: 6.0.0-beta.10
• Node Version: 14.13.0
• OS: Ubuntu 20

Description:

Using mix.version() option in combination with dynamic imports (import(/* webpackChunkName: 'user' */ './pages/user.vue')) will output files with version numbers in mix-manifest.json (/js/main/users.js": "/js/main/users.js?id=8208cf4609cdc5b641cc) but they are not referenced like so when dynamically loaded.

If I add

mix.webpackConfig({
        output: {
            chunkFilename: 'js/main/[name].js?id=[chunkhash]',
        },
    })

then files are loaded with version numbers (and those version numbers are not the same as ones in mix-manifest.json)

Is this how it should be? Is there some preferred way of versioning chunks or I'm maybe missing something.

Also, I was using the chunkFilename option in v5 as well.

[thecrypticace]

1. We should definitely update this. Though I _think_ we should use [contenthash] not [chunkhash] but I'll have to verify first.
2. We should update mix manifest to use the same hash mechanism (if it doesn't already)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[amcsi]

I believe it was even mentioned in the Mix upgrade guide https://laravel-mix.com/docs/4.1/upgrade

If your project heavily uses JavaScript dynamic imports, you may need to hold off until the release of webpack 5 early next year. There are known compile issues related to this that we cannot fix until then. Once webpack 5 is out, Mix will be updated shortly after. If you're unfamiliar with dynamic imports, then this very likely won't affect your project.

I thought that was referring to versioning not being supported for dynamic imports (thus the file can be cached stale). I kind of thought that Laravel Mix 6 would fix that, but maybe that warning line was actually referring to something else.

[arukompas]

Anyone has a temporary hack'ish workaround for cache-busting dynamic imports?

[Eldair]

@arukompas
This should work

mix.webpackConfig({
    output: {
        chunkFilename: '[name].js?id=[contenthash]',
    },
});

You need to use it in combination with .version() to have chunks, main js file and extracts versioned.

[arukompas]

That worked for me, @Eldair , thanks! 💯