vendor.*.js throws TypeError: *.e is not a function (blank page, crashed) about quasar-starter-kit

[km333]

@rstoenescu,
My routes.js (and every other file) is exactly as in the template (unchanged)
https://github.com/quasarframework/quasar-starter-kit/blob/master/template/src/router/routes.js
Totally fresh install with no changes.

@skmbr,
if you really need to get it building you could go back to non-lazy routes for the meantime.
ie

import Default from '../layouts/default'
import Index from '../pages/index'
import PageNotFound from '../pages/404'

export default [
{
path: '/',
// component: () => import('layouts/default'),
component: Default,
children: [
// { path: '',component: () => import('pages/index') }
{ path: '', component: Index }
]
},
{
// Always leave this as last one
path: '*',
component: PageNotFound
// component: () => import('pages/404')
}
]

[pvkovalev]

If anyone experiences this issue

TypeError: undefined is not an object (evaluating 'e[0].match')

Well, solutions is the same (babel-plugin-dynamic-import-node):
npm install babel-plugin-dynamic-import-node --save-dev
and add this into .babelrc file

{
  "plugins": ["dynamic-import-node"]
}

[rstoenescu]

Hi,

Root cause: Webpack 4 (possibly Webpack 3 too) does not allow to lazy load a parent layout/page then not lazy loading any children. What I mean is:

import Two from './two.vue'

//...then routes:

{
  path: '/something',
  // lazy load a layout/page with children
  component: () => import('./something.vue'),

  children: [
    // lazy load -> GOOD
    {path: 'one', component: () => import('./one.vue')},

    // not lazy load -> BAD! we got the parent lazy loading,
    // so we are forced to lazy load this too
    {path: 'two', component: Two}
  ]
}

[skmbr]

Not sure I understand..... My routes.js looks like this:

export default [
  {
    path: '/',
    component: () => import('components/Main'),
    children: [
      {
        path: '',
        meta: {
          title: 'Tenpin Toolkit',
          toolName: 'splash'
        },
        component: () => import('components/Splash')
      },
      {
        path: 'axis',
        meta: {
          title: 'Axis Tilt & Rotation',
          toolName: 'axis'
        },
        component: () => import('components/Axis')
      },
      {
        path: 'speed',
        meta: {
          title: 'Ball Speed & RPM',
          toolName: 'speed'
        },
        component: () => import('components/Speed')
      },
     [ OTHER ROUTES REMOVED - all defined the same way ]
  ]
  },

  { // Always leave this as last one
    path: '*',
    component: () => import('pages/404')
  }
]

If I'm reading your post right, mine are all done in the "GOOD" way?

The bizarre thing for me with this issue is that setting everything up on another computer works fine, but I'm going to have to give that back soon at which point I'm going to be stuck not able to build my apps any more. :(

[rstoenescu]

Gonna reopen this, but it's a Webpack issue... the error comes from Webpack. Currently don't have time to fully investigate as I'm preparing the SSR release :((

[skmbr]

@km333 Thanks for the tip! May have to do that.

What are the performance implications of using non-lazy routes?

[rstoenescu]

Every route's code is loaded at startup.

[robshep]

Confirm this workaround works for me given the same symptom in 0.16.0

[matheusb-comp]

I don't know exactly what causes this problem, but the routes.js file in the development server makes the imports like this:

{
  path: '/',
  component: function component() {
    return __webpack_require__.e(/*! import() */ 0).then(__webpack_require__.bind(null, /*! layouts/default */ "./src/layouts/default.vue"));
  },

And after quasar build, the final code is like this:

[{
    path: "/",
    component: function() {
        return n.e(0).then(n.bind(null, "ez0Y"))
    },

The issue #4842 on Webpack's repository apparently is about this, and was solved by using Airbnb's Babel plugin for dynamic import.
After addding ["dynamic-import-node"] to the .babelrc file, the final code works, and looks like this:

[{
    path: "/",
    component: function() {
        return Promise.resolve().then(function() {
            return Ce()(n("ez0Y"))
        })
    },

[IlCallo]

Is this still a problem? Seems babel-plugin-dynamic-import-node and babel-plugin-module-resolver deps are still needed into @quasar/babel-preset-app package.json, but never used

[IlCallo]

Closing as stale