Migrating to vue3 issues

[hosnar]

Hi. I am trying to migrate to Vue3 with migration build, but i get 200+ compile errors for vue-loader that all look like this:

error  in ./src/App.vue

Syntax Error: TypeError: Cannot read properties of undefined (reading 'start')
    at Array.forEach (<anonymous>)


ERROR in ./src/App.vue
Module build failed (from ./node_modules/vue-loader/dist/index.js):
TypeError: Cannot read properties of undefined (reading 'start')
    at createBlock (/Users/hosnar/projects/app-desktop/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:1988:31)
    at /Users/hosnar/projects/app-desktop/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:1910:38
    at Array.forEach (<anonymous>)
    at parse$2 (/Users/hosnar/projects/app-desktop/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:1854:16)
    at Object.loader (/Users/hosnar/projects/app-desktop/node_modules/vue-loader/dist/index.js:64:36)
 @ ./src/main.js 10:0-28 37:20-23

ERROR in ./src/views/app-lock/AppLockUnlockView.vue
Module build failed (from ./node_modules/vue-loader/dist/index.js):
TypeError: Cannot read properties of undefined (reading 'start')
    at createBlock (/Users/hosnar/projects/app-desktop/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:1988:31)
    at /Users/hosnar/projects/app-desktop/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:1910:38
    at Array.forEach (<anonymous>)
    at parse$2 (/Users/hosnar/projects/app-desktop/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:1854:16)
    at Object.loader (/Users/hosnar/projects/app-desktop/node_modules/vue-loader/dist/index.js:64:36)
 @ ./src/router/index.js 147:15-59
 @ ./src/main.js 11:0-30 38:8-14

ERROR in ./src/views/login/IntroView.vue
Module build failed (from ./node_modules/vue-loader/dist/index.js):
TypeError: Cannot read properties of undefined (reading 'start')
    at createBlock (/Users/hosnar/projects/app-desktop/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:1988:31)
    at /Users/hosnar/projects/app-desktop/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:1910:38
    at Array.forEach (<anonymous>)
    at parse$2 (/Users/hosnar/projects/app-desktop/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:1854:16)
    at Object.loader (/Users/hosnar/projects/app-desktop/node_modules/vue-loader/dist/index.js:64:36)
 @ ./src/router/index.js 38:13-46
 @ ./src/main.js 11:0-30 38:8-14

Any ideas what could be the reason for this?

[baiwusanyu-c]

Can you provide a minimal repository that reproduces the problem? 🧐

[AhmadALi-glitch]

we're glad to help
but please can you share some of the code snip... maybe the package.json, App.vue and the main.js ?
probably we will get a clue about what causes the problem

[hosnar]

I am guessing the problem is because i am using Vue in combination with Electron and vue-cli-plugin-electron-builder library, which still uses Vue2 (and is not maintained anymore). So when i try to migrate to Vue3, vue-cli-plugin-electron-builder probably intervenes with compiling. I was hoping i could migrate to Vue3 without changing the plugin library, but looks like i will need to migrate both.

[mbabker]

I too am seeing this. This is the info I have right now, not sure how to break this down to a simple reproducer. This is an app using webpack as a build tool with @vue/compat installed due to legacy dependencies still being upgraded, we're running Node 20 and NPM 10. The build works fine on 3.3.13 but fails on 3.4.0 and later.

As the error states, it is failing in the createBlock() function from the @vue/compiler-sfc package, this line expects node.innerLoc to be set but it's not so it fails when this line tries to read that data.

Below is one of the components that node.innerLoc is not set for in our app:

<template>
    <div class="page-heading mb-4">
        <h1 class="page-heading__title rfs-1-75 mt-0 mb-0">
            <slot name="title" />
        </h1>
        <h2 v-if="$slots.subtitle" class="page-heading__subtitle rfs-1-25 mt-0 mb-0">
            <slot name="subtitle" />
        </h2>
        <div v-if="$slots.extra" class="page-heading__extra-info font-weight-bold">
            <slot name="extra" />
        </div>
    </div>
</template>

<style lang="scss">
    @import '../../../../scss/admin/imports';
    @import '../../../../scss/components/admin/page-heading';
</style>

This is the dump of node inside the createBlock() function:

{
  type: 1,
  tag: 'div',
  ns: 0,
  tagType: 0,
  props: [
    {
      type: 6,
      name: 'class',
      nameLoc: [Object],
      value: [Object],
      loc: [Object]
    }
  ],
  children: [
    {
      type: 1,
      tag: 'h1',
      ns: 0,
      tagType: 0,
      props: [Array],
      children: [Array],
      loc: [Object],
      codegenNode: undefined
    },
    {
      type: 1,
      tag: 'h2',
      ns: 0,
      tagType: 0,
      props: [Array],
      children: [Array],
      loc: [Object],
      codegenNode: undefined
    },
    {
      type: 1,
      tag: 'div',
      ns: 0,
      tagType: 0,
      props: [Array],
      children: [Array],
      loc: [Object],
      codegenNode: undefined
    }
  ],
  loc: {
    start: { column: 5, line: 2, offset: 15 },
    end: { column: 11, line: 12, offset: 435 },
    source: '<div class="page-heading mb-4">\n' +
      '        <h1 class="page-heading__title rfs-1-75 mt-0 mb-0">\n' +
      '            <slot name="title" />\n' +
      '        </h1>\n' +
      '        <h2 v-if="$slots.subtitle" class="page-heading__subtitle rfs-1-25 mt-0 mb-0">\n' +
      '            <slot name="subtitle" />\n' +
      '        </h2>\n' +
      '        <div v-if="$slots.extra" class="page-heading__extra-info font-weight-bold">\n' +
      '            <slot name="extra" />\n' +
      '        </div>\n' +
      '    </div>'
  },
  codegenNode: undefined
}

We see the same error on a lot of components, but this one is the first that I found in the output that is an entirely standalone component.

[HPLWC]

I have the same problem.