Laravel-mix: Laravel Mix saves js files to wrong path when chunkFilename is set for chunks and generates invalid manifest file

[vedmant]

• Laravel Mix Version: 4.0.14
• Node Version v10.15.1
• Yarn Version 1.13.0
• OS: MacOs

Description:

After upgrade it started to save js files to the wrong place and generate invalid manifest file

.js() method saves files to public/assets/js/js instead of public/assets/js while chunk files are actually saved correctly.

Manifest file:

{
    "/js//js/app.js": "/js//js/app.js?id=17cd54f59f389deb1dd3",
    "/css/bootstrap.css": "/css/bootstrap.css?id=d41d8cd98f00b204e980",
    "/css/vendor.css": "/css/vendor.css?id=d41d8cd98f00b204e980",
    "/css/app.css": "/css/app.css?id=d41d8cd98f00b204e980",
    "/js/manifest.js": "/js/manifest.js?id=9f14578d2a0bfa6160b3",
    "/js//js/vendor.js": "/js//js/vendor.js?id=caf6d03f6e2f7c7d1d0e",
    "/js/filtered-posts.js": "/js/filtered-posts.js?id=c406ac70cbcf7f7ca80d",
    "/js/poll.js": "/js/poll.js?id=87de78d1d9ae25c2f31e",
    "/js/posts-filter.js": "/js/posts-filter.js?id=1835d73c0148d6b75e6c",
    "/js/thread.js": "/js/thread.js?id=317505ec36da36c7fb49",
    "/js/vendors~poll~thread.js": "/js/vendors~poll~thread.js?id=ff7a3d310d391c2e8780",
    "/js/vendors~posts-filter~thread.js": "/js/vendors~posts-filter~thread.js?id=4bdc4e6ab903dc6c47bc",
    "/js/vendors~thread.js": "/js/vendors~thread.js?id=3cb3a6aa3f0c77bbd8ab"
}

I have following mix file:

  .webpackConfig({
    output: {
      publicPath: '/assets/',
      chunkFilename: 'js/[name].js',
    },
  })
  .setResourceRoot('/assets/')
  .setPublicPath('public/assets')
  .js('resources/assets/js/app.js', 'public/assets/js')
  .extract(['vue', 'jquery', 'axios'])
  .sass('resources/assets/sass/bootstrap.scss', 'public/assets/css')
  .sass('resources/assets/sass/vendor.scss', 'public/assets/css')
  .sass('resources/assets/sass/app.scss', 'public/assets/css')

Steps To Reproduce:

Use my configuration and try to build assets.

[glitchedmob]

Also running into this problem. Is there some additional webpack configuration that needs provided that I'm missing here?

[vedmant]

@glitchedmob I just downgraded to version 3 for now, it works normally.

[bolechen]

+1

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

[bolechen]

Replaceable I used this https://laravel-mix.com/index.php/extensions/versionhash
it works ok now.

[rhurling]

I'm pretty sure this is because of a webpack 4 bug, see https://github.com/webpack/webpack/issues/6598
That is apparently fixed in webpack 5 (see https://github.com/webpack/webpack/pull/7401), but we will have to wait for that to be released

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

[vedmant]

Is there any updates about when this can be fixed, I'd like to upgrade to version 4 but stuck with v3 due to this bug.

[mpskovvang]

In my case, I solved the issue with the webpack-chunk-rename-plugin.

  .webpackConfig({
    output: {
      publicPath: '/assets/',
      filename: '[name].js',
      chunkFilename: 'js/[name].js',
    },
    plugins: [
        new ChunkRenamePlugin({
            initialChunksWithEntry: true,
            '/js/vendor': '/js/vendor.js'
        }),
    ],
  })
  .setResourceRoot('/assets/')
  .setPublicPath('public/assets')
  .js('resources/assets/js/app.js', 'public/assets/js')
  .extract(['vue', 'jquery', 'axios'])
  .sass('resources/assets/sass/bootstrap.scss', 'public/assets/css')
  .sass('resources/assets/sass/vendor.scss', 'public/assets/css')
  .sass('resources/assets/sass/app.scss', 'public/assets/css')

Note the output.filename and plugins addition.

I haven't tested with the output.publicPath but I assume this is similar to my mix.setPublicPath(...) implementation.

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

i'm facing kinda same with laravel mix-5.
npm run dev or npm run watch emitting 0.js, 1.js, rather than [named].js.

Even though, its working properly with numbered chunks but i want it to be named chunks.

// 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')
},
]
});

[pascaldls]

Solved with the webpack-chunk-rename-plugin
Hope I don't have to use this in the future
`const mix = require("laravel-mix");
const MomentLocalesPlugin = require("moment-locales-webpack-plugin");
require("laravel-mix-splitjs");
require("dotenv").config();
const ChunkRenamePlugin = require("webpack-chunk-rename-plugin");

mix.webpackConfig({
output: {
publicPath: "/js",
filename: "js[name].js",
chunkFilename: "js[name].js"
},
plugins: [
// To strip all locales except “en”
// new MomentLocalesPlugin(),
new ChunkRenamePlugin({
initialChunksWithEntry: true,
"/vendor": "js/vendor.js"
})
]
})
.js("resources/js/app.js", "public/")
.splitJs({
maxChunks: 10, // The maximum amount of chunks to split into
productionOnly: false
});

if (mix.inProduction()) {
// seperate extract for produiting because of bug https://github.com/JeffreyWay/laravel-mix/issues/1914
mix.extract();
} else {
mix.sass("resources/sass/app.scss", "public/css", {
implementation: require("node-sass")
});
mix.webpackConfig(webpack => {
return {
devtool: "inline-source-map"
};
});
}

// require("laravel-mix-bundle-analyzer");
// mix.bundleAnalyzer();`