Skip to content
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.

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

vue-router lazy-load error #484

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

Comments

Projects
None yet
7 participants
@lichnow
Copy link

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

This comment has been minimized.

Copy link
Owner

commented Feb 28, 2017

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

This comment has been minimized.

Copy link
Author

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

This comment has been minimized.

Copy link

commented Aug 29, 2017

@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

This comment has been minimized.

Copy link

commented Sep 27, 2017

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

This comment has been minimized.

Copy link

commented Sep 27, 2017

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

@codeitlikemiley

This comment has been minimized.

Copy link

commented Oct 16, 2017

im using history mode not hashbang for vue router SPA

@vesper8

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

commented Jan 15, 2018

@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

This comment has been minimized.

Copy link

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 Dec 7, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.