Skip to content

vue-router lazy-load error #484

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
lichnow opened this issue Feb 27, 2017 · 10 comments
Closed

vue-router lazy-load error #484

lichnow opened this issue Feb 27, 2017 · 10 comments
Labels
stale

Comments

@lichnow
Copy link

lichnow commented Feb 27, 2017

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
Copy link
Collaborator

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
Copy link
Author

lichnow commented Feb 28, 2017

@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
Copy link

zarkin404 commented Aug 29, 2017 •
edited
Loading

@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:

mix
  .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:

mix
  .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
Copy link

I also Faced this Issued Follow Your Guide, but i still faced this...
But I found this Fix at this link
webpack/webpack-dev-server#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
Copy link

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

@codeitlikemiley
Copy link

im using history mode not hashbang for vue router SPA

@vesper8
Copy link

vesper8 commented Oct 18, 2017

<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 vesper8 mentioned this issue Oct 18, 2017
Closed
@vesper8
Copy link

vesper8 commented Oct 18, 2017

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
Copy link

@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
Copy link

stale bot commented Dec 4, 2018

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.

@stale stale bot added the stale label Dec 4, 2018
@stale stale bot closed this as completed Dec 7, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
stale
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@JeffreyWay @vesper8 @lichnow @4096void @aocneanu @zarkin404 @codeitlikemiley