Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Dynamic imports not working when using mix.setPublicPath()

See original GitHub issue

Laravel Mix Version: 6.0.9
Node Version: v14.15.3
Yarn Version: Yarn 1.22.5
OS: node:14 docker image

Description:

Dynamic imports fail when using the mix.setPublicPath() option.

Steps To Reproduce:

Given this set up

routes/web.php:

Route::get('/playground', function () {
    return view('foo');
});

resources/assets/js/index.js:

console.log('index.js: Load');

import('./dynamic').then(module => {
    console.log('index.js: Run');

    const dynamic = module.default;

    dynamic();
});

resources/assets/js/dynamic.js:

console.log('dynamic.js: Load');

function dynamic() {
    console.log('dyanmic.js: Run')
}

export default dynamic;

Doesn’t work

foo.blade.php:

<html>
    {{--Notice second argument here passing path to mix-manifest--}}
    <script src="{{ mix('index.js', 'foo') }}"></script>
    <body></body>
</html>

webpack.mix.js:

const mix = require('laravel-mix');

mix
    .setPublicPath('public/foo') // Notice we use mix.setPublicPath here 
    .js('resources/assets/js/index.js', 'public/foo');

In the browser when I go to /playground it fails with this error:

index.js: Load        index.js:233:9
Loading failed for the <script> with source “http://resources_assets_js_dynamic_js.js/”. playground:1:1
Uncaught (in promise) ChunkLoadError: Loading chunk resources_assets_js_dynamic_js failed.
(error: http://resources_assets_js_dynamic_js.js/)

Does work

foo.blade.php:

<html>
     {{--Notice NO second argument here, so uses default path to mix-manifest--}}
    <head><script src="{{ mix('foo/index.js') }}"></script></head>
    <body></body>
</html>

webpack.mix.js:

const mix = require('laravel-mix');

// Notice not using mix.setPublicPath()
mix.js('resources/assets/js/index.js', 'public/foo');

In the browser when I go to /playground everything worked:

index.js: Load         index.js:233:9
dynamic.js: Load    resources_assets_js_dynamic_js.js:11:9
index.js: Run          index.js:235:11
dyanmic.js: Run     resources_assets_js_dynamic_js.js:14:11

Issue Analytics

State:
Created 3 years ago
Comments:8

Top GitHub Comments

4reactions

stale[bot]commented, Jun 9, 2021

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.

3reactions

thecrypticacecommented, Jan 8, 2021

This might be caused by issues with public path stripping from chunk names. I’ll take a look when I can (most likely tomorrow).