Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork245
Open
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 fromts-loader
. Looking deeper, I see that @nativescript/webpack and nativescript-vue require different versions ofvue-loader
. Maybe that's the root of my problem?
How should I resolve this?
I created a project withns create ReadStuffLater --vue --ts
Then I updated nativescript-vue -> 3.0.1 and vue -> 3.5.17.
I updatedapp.ts
according tothe upgrade guide, andHome.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";importHomefrom"./components/Home.vue";constapp=createApp(Home);app.start();
Home.vue
:
<template> <Page> <ActionBar> <Labeltext="Home"/> </ActionBar> <GridLayout> <Labelclass="info"> <FormattedString> <Spanclass="fas"text.decode=""/> <Span:text="message"/> </FormattedString> </Label> </GridLayout> </Page></template><script lang="ts">import {computed,defineComponent }from"nativescript-vue";exportdefaultdefineComponent({ setup() {const message=computed(()=>"Blank {N}-Vue app");return {message }; } });</script><style scoped lang="scss">@import'@nativescript/theme/scss/variables/blue';// Custom styles.fas {@includecolorize($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-26webpack 5.100.2 compiled with 1 error and 34 warnings in 507 msWebpack compilation complete. Watching for file changes.ERROR in ./app/app.ts:9:23TS2345: 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, MethodOptions, 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, MethodOptions, 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?: DebuggerOptions | 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: WritableComputedOptions<T, S>, debugOptions?: DebuggerOptions | undefined): WritableComputedRef<...>; }'. 7 | //Vue.config.silent = !__DEV__ 8 | > 9 | const app = createApp(Home); | ^^^^ 10 | app.start(); 11 |
Metadata
Metadata
Assignees
Labels
No labels