Laravel-mix: Trying to set chunk name for Vue Single File Component

[Tarasovych]

• Laravel Mix Version: 4.0.14
• Node Version: 8.10.0
• NPM Version: 3.5.2
• OS: Ubuntu 18.04
• Laravel Version: 5.7.27

Description:

I'm trying to set chunk name for Vue Single File Component.

app.js:

//according to https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components
Vue.component('test-component', function(resolve) {
    require([/* webpackChunkName: "test-component" */'./components/TestComponent.vue'], resolve)
});

.babelrc:

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import"
  ]
}

webpack.mix.js:

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

Expected chunk: js/test-component.js. Actual chunk: js/0.js.
What's wrong? Thanks in advance!

[ankurk91]

Have you tried this syntax

// app.js
// Good old Regular component
import UsersList from './Components/UsersList.vue';

// Dynamic component
const  UsersList = () => import(/* webpackChunkName: "chunks/user-list" */ './Components/UsersList.vue');

[Tarasovych]

I went

const  UsersList = () => import(/* webpackChunkName: "chunks/user-list" */ './Components/UsersList.vue');

const app = new Vue({
    el: '#app',
    components: {
        UsersList,
    }
});

sometimes after running npm run watch I get

Failed to resolve async component function UsersList() {...} Reason: TypeError: modules[moduleId] is undefined

To resolve that, I have to reproduce these steps:

1. run npm run watch
2. comment components section

components: {
        // UsersList,
    }

1. wait for recompilation
2. uncomment back components section

components: {
        UsersList,
    }

1. wait for recompilation
2. refresh browser page

[socheatsok78]

Input webpack.mix.js

const path = require("path");
const mix = require('laravel-mix');
const LodashModuleReplacementPlugin = require("lodash-webpack-plugin");

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')

mix.extract(['vue']);
mix.disableNotifications();

mix.webpackConfig(webpack => ({
    output: {
        chunkFilename: "js/[name].[chunkhash].js",
    },
    plugins: [
        new LodashModuleReplacementPlugin(),
    ],
})).options({
    clearConsole: true
});

Output:

                                      Asset      Size                 Chunks             Chunk Names
                               /css/app.css   0 bytes  /js/app, /js/manifest  [emitted]  /js/app, /js/manifest
                            /js/manifest.js  8.81 KiB           /js/manifest  [emitted]  /js/manifest
         js//js/app.990d4a1bdb6ca4100245.js  1.05 MiB                /js/app  [emitted]  /js/app
      js//js/vendor.b2790c50cc28f4e46a1c.js   331 KiB             /js/vendor  [emitted]  /js/vendor
js/ExampleComponent.a076b75fff15fcd0294f.js  8.23 KiB       ExampleComponent  [emitted]  ExampleComponent

[Tarasovych]

@peakhmr you have

const path = require("path");

what it is used for?

I've also added lodash-webpack-plugin, but it didn't helped.

[socheatsok78]

@Tarasovych The path module provides utilities for working with file and directory paths. You can check its document over here https://nodejs.org/api/path.html

[socheatsok78]

@Tarasovych As right now, I revert back to use laravel-mix@v3 instead of the latest one.

[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.

[mdnurulmomen]

// webpack.mix.js
`mix.webpackConfig(webpack => {
return {
output: {
publicPath: '/',
filename: '[name].js',
chunkFilename: 'js/[name].js',
},
};
});

mix
.babelConfig({
plugins: ['@babel/plugin-syntax-dynamic-import'],
});

mix
.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');`

// app.js
const router = new VueRouter({ mode : 'history', routes : [ { path: '/home', name: 'admin.home', component: () => import(/* webpackChunkName : "home-component" */ './components/admin/HomeComponent.vue') }, { path: '/restaurants', name: 'admin.restaurants.index', component: () => import(/* webpackChunkName : "restaurant-list" */'./components/admin/RestaurantIndexComponent.vue') }, ], });

But Still npm run dev/watch emitting 0.js, 1.js, rather than home-component.js , restaurant-list.js.

Please Help me out.