Conflicting vue-loader versions on update to NS-Vue 3 & Vue 3 #1102
Description
I've started a project using the Vue/TS template, and I'm trying to update to NativeScript-Vue 3 and Vue 3.
However, I can't run my app in the emulator: I get bizarre errors from ts-loader. Looking deeper, I see that @nativescript/webpack and nativescript-vue require different versions of vue-loader. Maybe that's the root of my problem?
How should I resolve this?
I created a project with ns create ReadStuffLater --vue --ts
Then I updated nativescript-vue -> 3.0.1 and vue -> 3.5.17.
I updated app.ts according to the upgrade guide, and Home.vue to Vue 3 syntax.
vue-loader@15.9.8
└─ @nativescript/webpack@5.0.24 (requires ^15.0.0 <= 15.9.8)
└─ dev ReadStuffLater@workspace (requires ~5.0.24)
vue-loader@17.4.2
└─ nativescript-vue@3.0.1 (requires ^17.4.2)
└─ ReadStuffLater@workspace (requires ~3.0.1)
app.ts:
import { createApp } from "nativescript-vue";
import Home from "./components/Home.vue";
const app = createApp(Home);
app.start();Home.vue:
<template>
<Page>
<ActionBar>
<Label text="Home"/>
</ActionBar>
<GridLayout>
<Label class="info">
<FormattedString>
<Span class="fas" text.decode=" "/>
<Span :text="message"/>
</FormattedString>
</Label>
</GridLayout>
</Page>
</template>
<script lang="ts">
import { computed, defineComponent } from "nativescript-vue";
export default defineComponent({
setup() {
const message = computed(() => "Blank {N}-Vue app");
return { message };
}
});
</script>
<style scoped lang="scss">
@import '@nativescript/theme/scss/variables/blue';
// Custom styles
.fas {
@include colorize($color: accent);
}
.info {
font-size: 20;
horizontal-align: center;
vertical-align: center;
}
</style>
$ ns run android --emulator
...
ERROR in ./app/components/Home.vue?vue&type=template&id=1858554c&scoped=true&ts=true (../../node_modules/@nativescript/webpack/dist/loaders/nativescript-worker-loader/i16:40:52 [18/30607]
modules/ts-loader/index.js??clonedRuleSet-3.use[0]!../../node_modules/nativescript-vue/node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!../../node_modules/nativescript-
vue/node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./app/components/Home.vue?vue&type=template&id=1858554c&scoped=true&ts=true)
Module build failed (from ../../node_modules/ts-loader/index.js):
TypeError: Cannot read properties of undefined (reading 'length')
at createSourceFile2 (/home/spiffytech/Documents/bootspoon/readstufflater/node_modules/typescript/lib/typescript.js:33380:52)
at parseSourceFileWorker (/home/spiffytech/Documents/bootspoon/readstufflater/node_modules/typescript/lib/typescript.js:33254:24)
at Object.parseSourceFile (/home/spiffytech/Documents/bootspoon/readstufflater/node_modules/typescript/lib/typescript.js:33077:20)
at createSourceFile (/home/spiffytech/Documents/bootspoon/readstufflater/node_modules/typescript/lib/typescript.js:32912:21)
at transpileWorker (/home/spiffytech/Documents/bootspoon/readstufflater/node_modules/typescript/lib/typescript.js:144453:22)
at Object.transpileModule (/home/spiffytech/Documents/bootspoon/readstufflater/node_modules/typescript/lib/typescript.js:144367:10)
at getTranspilationEmit (/home/spiffytech/Documents/bootspoon/readstufflater/node_modules/ts-loader/dist/index.js:418:74)
at successLoader (/home/spiffytech/Documents/bootspoon/readstufflater/node_modules/ts-loader/dist/index.js:38:11)
at Object.loader (/home/spiffytech/Documents/bootspoon/readstufflater/node_modules/ts-loader/dist/index.js:23:5)
@ ./app/components/Home.vue?vue&type=template&id=1858554c&scoped=true&ts=true 1:0-451 1:0-451
@ ./app/components/Home.vue 1:0-85 8:68-74 19:29-35 18:84-20:3 18:2-20:4
@ ./app/app.ts 4:0-41 8:22-26
webpack 5.100.2 compiled with 1 error and 34 warnings in 507 ms
Webpack compilation complete. Watching for file changes.
ERROR in ./app/app.ts:9:23
TS2345: Argument of type 'typeof import("/home/spiffytech/Documents/bootspoon/readstufflater/node_modules/vue/dist/vue")' is not assignable to parameter of type 'Component<any, any, any,
ComputedOptions, MethodOptions, {}, any>'.
Type 'typeof import("/home/spiffytech/Documents/bootspoon/readstufflater/node_modules/vue/dist/vue")' is not assignable to type 'ComponentOptions<any, any, any, ComputedOptions, MethodO
ptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>'.
Type 'typeof import("/home/spiffytech/Documents/bootspoon/readstufflater/node_modules/vue/dist/vue")' is not assignable to type 'ComponentOptionsBase<any, any, any, ComputedOptions, M
ethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>'.
Types of property 'computed' are incompatible.
Type '{ <T>(getter: ComputedGetter<T>, debugOptions?: DebuggerOptions | undefined): ComputedRef<T>; <T, S = T>(options: WritableComputedOptions<T, S>, debugOptions?: DebuggerOptio
ns | undefined): WritableComputedRef<...>; }' is not assignable to type 'ComputedOptions'.
Index signature for type 'string' is missing in type '{ <T>(getter: ComputedGetter<T>, debugOptions?: DebuggerOptions | undefined): ComputedRef<T>; <T, S = T>(options: WritableC
omputedOptions<T, S>, debugOptions?: DebuggerOptions | undefined): WritableComputedRef<...>; }'.
7 | //Vue.config.silent = !__DEV__
8 |
> 9 | const app = createApp(Home);
| ^^^^
10 | app.start();
11 |