Laravel-mix: vue-router lazy-load error

[lichnow]

vue-router lazy-load error

0.js:1 Uncaught SyntaxError: Unexpected token <
manifest.js:142 Error: Loading chunk 0 failed.
    at HTMLScriptElement.onScriptComple

my app.js

import Vue from 'vue'
import VueRouter from 'vue-router'
// import * as Bootstrap from './bootstrap'
Vue.use(VueRouter);
Vue.use(VueRouter);
const router = new VueRouter({
    mode: 'history',
    base: '/admin',
    routes: [{
        path: '/article',
        name: 'article',
        component: resolve => require(['./DashBoard.vue'], resolve)
    }]
});
const app = new Vue({router}).$mount('#app');

when I visit http://local.dev/admin/article ,auto redirect to http://local.dev/admin/,and the error show on console,is it a bug?

[JeffreyWay]

when I visit http://local.dev/admin/article ,auto redirect to http://local.dev/admin/,and the error show on console,is it a bug?

What error does it show?

[lichnow]

@JeffreyWay It is a error of output.publicPath and output.chunkFilename config,so I config it like this

mix.webpackConfig({
    output: {
        publicPath: "/",
        chunkFilename: 'manager/' + template + "/[name].js"
    },
});

now it work

[zarkin404]

@lichnow Awesome! Thank you for saving my life!!! It took me about half a day to figure out why chunks couldn't be loaded. My original code clips are here:

  .setPublicPath(path.normalize('public/assets/merchant'))
  .sass('resources/assets/merchant/sass/app.scss', 'css/app.css')
  .options({
    processCssUrls: false
  })
  .copy('resources/assets/merchant/sass/theme/fonts', 'public/assets/merchant/css/fonts')
  .js('resources/assets/merchant/js/app.js', 'js/app.js')
  .extract([
    'axios',
    'element-ui',
    'lodash',
    'vue',
    'vue-router',
    'vuex'
  ])
 .version()

  <link href="{{ mix('css/app.css', 'assets/merchant') }}" rel="stylesheet">
  <script src="{{ mix('js/manifest.js', 'assets/merchant') }}"></script>
  <script src="{{ mix('js/vendor.js', 'assets/merchant') }}"></script>
  <script src="{{ mix('js/app.js', 'assets/merchant') }}"></script>

but chunk files are generated to public/assets/merchant and chunks coundn't be loaded with browser warning -- '404 Not Found, coundn't load http://localhost:3000/11.js'

so i configed these content refer to your solution:

  .sass('resources/assets/merchant/sass/app.scss', 'public/assets/merchant/css/app.css')
  .options({
    processCssUrls: false
  })
  .copy('resources/assets/merchant/sass/theme/fonts', 'public/assets/merchant/css/fonts')
  .js('resources/assets/merchant/js/app.js', 'public/assets/merchant/js/app.js')
  .extract([
    'axios',
    'element-ui',
    'lodash',
    'vue',
    'vue-router',
    'vuex'
  ])

mix.webpackConfig({
  output: {
    chunkFilename: `assets/merchant/js/chunk[name].${ mix.inProduction() ? '[chunkhash].' : '' }js`
  }
})

<link href="{{ mix('/assets/merchant/css/app.css') }}" rel="stylesheet">
<script src="{{ mix('/assets/merchant/js/manifest.js') }}"></script>
<script src="{{ mix('/assets/merchant/js/vendor.js') }}"></script>
<script src="{{ mix('/assets/merchant/js/app.js') }}"></script>

And everything is work, and the thunk files can be versioned, too! That 's so amazing~

[codeitlikemiley]

I also Faced this Issued Follow Your Guide, but i still faced this...
But I found this Fix at this link
https://github.com/webpack/webpack-dev-server/issues/333

The Fix Simple Fix Here is Adding this at your Header Tag

<base href="/" />

Hope this will be added to the documentation especially since if your building SPA and wanted to use Lazyloading on your vue router.

[4096void]

@codeitlikemiley it also very helpful when building history-mode Vue SPA

[codeitlikemiley]

im using history mode not hashbang for vue router SPA

[vesper8]

<base href="/" />
did indeed fix my issue with dynamic imports and I thought I was done with this problem

but then I realized setting this is screwing up with other vue components. For example I'm using https://github.com/spatie/vue-tabs-component and when I set the base href like above then the tabs stop working because instead of appending the hashtag to the current url it appends it to /

Any idea how what is the proper fix in this case?

[vesper8]

Figured it out!!

Finally it was adding this to my webpack.mix.js that solved the problem and allowed me to remove that line from

mix.webpackConfig({
    output: {
        publicPath: "/",
    },
    ...

[aocneanu]

@vesper8 , thanks, this worked for me too. But can you still use hot module reload with this config setting?

I get the following error in my console.

vue-router.esm.js:1905 TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (bootstrap eec6b45911ac48d6c3e4:707)
    at fn (bootstrap eec6b45911ac48d6c3e4:112)
    at <anonymous>

The only workaround I found is to comment the setting before runing hmr, and uncomment before I compile.

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