Laravel-mix: Chunk loading broken due to wrong publicPath

[spaceemotion]

• Laravel Mix Version: 0.12.1
• Node Version 8.0.0
• NPM Version 5.0.x
• OS: Mac OSX 10.9.6 / Ubuntu 16.04.1

Description:

In https://github.com/JeffreyWay/laravel-mix/pull/209 the webpack public path got changed from './' to just an empty string. As I just recently started to use chunk splitting, i never noticed this before until I wanted to update the main server today as I am using HMR on my local machine.

The issue seems to be that I'm either neither able to set the public path directly, nor the global.entry.base.

The fix is to just set the publicPath '/' as default again (https://github.com/JeffreyWay/laravel-mix/blob/v0.12.1/src/Mix.js#L69):

publicPath: options.hmr ? (http + '://localhost:8080/') : '/'

The URLs requested in the browser look like the following:

• Before: my-site.com/som/sub/js/6.(hash).js
• After: my-site.com/js/6.(hash).js

~I'm not sure if versioning the files has to do anything with this.~
Edit: It doesn't.

Steps To Reproduce:

1. Regular laravel installation.
2. Trigger the chunk-loading, e.g. Vue.component('test', r => require(['./test.vue'], r))
3. Build using npm run dev or npm run production
4. Go to a different route than home and see the error in the browser

[kalfheim]

Same issue here.

Ended up doing __webpack_public_path__ = '/'; as a temporary fix. (which of course breaks HMR)

[spaceemotion]

Any updates on this? When I run "npm run dev" it still looks for the chunks in the wrong folder (using 1.1.1 now). Cheers!

[bhulsman]

Ah, I'm running into the same issues here. Been fiddling around with this for a while now. Happy to see it's a Laravel Mix issue actually!

[spacemudd]

I opted to use mix.webpackConfig() in webpack.mix.js instead of editing it directly. Works okay for me.

mix.webpackConfig({
    output: {
           publicPath: '/',
           chunkFilename: 'public/js/[name].[chunkhash].js'
    }
});

[spaceemotion]

Bumping this as it's still an issue even with 1.6.0. I'm unable to make automated releases because the path is still relative to the current page (searching for chunks in example.com/page/23.js).

[spaceemotion]

Just a follow up as it seems to have been fixed for a hot reloading environment, but not in a production (tried with 2.0.0) as can be seen here.

To fix this either use @spacemudd's solution, or the following if you still want to retain the HMR-functionality:

const http = process.argv.includes('--https') ? 'https' : 'http';

mix.webpackConfig({
    output: {
        publicPath: Mix.isUsing('hmr')
            ? http + '://' + Config.hmrOptions.host + ':' + Config.hmrOptions.port + '/'
            : '/', // <--- This slash is the fix here
    },
});

@JeffreyWay Should I provide a PR for this?

[raniesantos]

@spaceemotion I just tried the config in your last comment and it works perfectly for both the dev script and the hot script.

Please go ahead and make a PR, please merge it when they do @JeffreyWay

[spaceemotion]

@raniesantos I'd rather add that as a separate PR, but I'll wait for the new webpack 4 / component based system before opening a PR at all. Looks like it's right around the corner.

[spaceemotion]

@raniesantos already noticed, will try to work on this as soon i got the time :)