Laravel-mix: Dynamic imports not working when using mix.setPublicPath()

Created on 8 Jan 2021 · 6Comments · Source: JeffreyWay/laravel-mix

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

Source

philbates35

Most helpful comment

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

thecrypticace on 8 Jan 2021

👍3

All 6 comments

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

thecrypticace on 8 Jan 2021

👍3

Also having the issue while using setPublicPath, this happens in development and production.
Chunks are loaded from the root of my app. Any workaround?

Looks like https://github.com/JeffreyWay/laravel-mix/issues/2217 to me

LeoSeyers on 13 Jan 2021

Exactly same issue as this, any news ?

walidbagh on 27 Jan 2021

@walidbagh Here is my workaround to fix this problem, you need to add some configuration in your webpack config as below.

As for my projects all the public resources will be output to /assets/themes/mytheme/dist directory. So here is my configuration, you might need to make some tweak in order to work.

mix.webpackConfig({
  devtool: 'inline-source-map',
  output: {
    chunkFilename: 'js/chunks/[name].js',
    publicPath: '/themes/mytheme/assets/dist/'
  },

and initialize a .babelrc file with the dependencies of @babel/plugin-syntax-dynamic-import get installed.

.babelrc

{
  "plugins": [
    "@babel/plugin-syntax-dynamic-import"
  ]
}

Hope this will resolve your issue.

leeliwei930 on 1 Feb 2021

🎉1

@leeliwei930 Thanks for the suggestion, i tried multiple variations of publicPath and chunkFilename, but sadly it doesn't fix the problem.

walidbagh on 1 Feb 2021

@leeliwei930 thank you, it works for me
@walidbagh not sure if it can helps but here is the code I use below for a Wordpress set (living in /app)

mix
  .webpackConfig({
    devtool: 'inline-source-map',
    output: {
      chunkFilename: 'js/chunks/[name].js',
      publicPath: '/wp-content/themes/my-theme/public/webpack/',
    },
  })
  .setPublicPath(path.normalize(`./app/wp-content/themes/${THEME_FOLDER_NAME}/public/webpack/`))
  .js('ressources/scripts/app.js', 'js/app.js')

LeoSeyers on 1 Feb 2021

Was this page helpful?

0 / 5 - 0 ratings