Fixed build errors

package.json

@@ -19,7 +19,7 @@
   },
   "resolutions": {
     "**/webpack": "5",
-    "@types/node": "^20",
+    "@types/node": "16.4.3",
     "glob": "7.2.3"
   },
   "scripts": {

pkg/capi/components/ExperimentalBanner.vue

@@ -1,13 +1,12 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
 import Banner from '@components/Banner/Banner.vue';
 
-export default defineComponent({
+export default {
   name: 'ExperimentalWarningBanner',
 
   components: { Banner },
 
-});
+};
 </script>
 
 <template><Banner color="warning" label-key="capi.experimental" /></template>

pkg/capi/edit/cluster.x-k8s.io.cluster/ClusterConfig.vue

@@ -1,5 +1,5 @@
 <script lang='ts'>
-import { defineComponent, PropType } from 'vue';
+import { PropType } from 'vue';
 import { set, clone } from '@shell/utils/object';
 import { clear } from '@shell/utils/array';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
@@ -13,7 +13,7 @@ import ClusterClassVariables from '../../components/CCVariables/index.vue';
 import {
   versionTest, versionValidator, hostValidator, portValidator, cidrValidator, cidrArrayValid
 } from '../../util/validators';
-import { ClusterClass, Worker } from '../../types/capi';
+import { ClusterClass, Worker, CAPIClusterTopology, CAPIClusterNetwork, CAPIClusterCPEndpoint } from '../../types/capi';
 import CardGrid from '../../components/CardGrid.vue';
 import WorkerItem from './WorkerItem.vue';
 import NetworkSection from './NetworkSection.vue';
@@ -40,7 +40,7 @@ const defaultCPEndpointConfig: CAPIClusterCPEndpoint = {
   port: 49152
 };
 
-export default defineComponent({
+export default {
   name:       'ClusterConfig',
   components: {
     CruResource,
@@ -307,7 +307,7 @@ export default defineComponent({
       this.setNamespace();
     }
   }
-});
+};
 </script>
 <template>
   <CruResource

pkg/capi/edit/cluster.x-k8s.io.cluster/ControlPlaneEndpointSection.vue

@@ -1,10 +1,9 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
 import { mapGetters } from 'vuex';
 import { _EDIT } from '@shell/config/query-params';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 
-export default defineComponent({
+export default {
   name:       'ControlPlaneEndpointSection',
   components: { LabeledInput },
   emits: ['update:value'],
@@ -31,7 +30,7 @@ export default defineComponent({
       return this.mode === _EDIT;
     }
   }
-});
+};
 </script>
 <template>
   <div>

pkg/capi/edit/cluster.x-k8s.io.cluster/NetworkSection.vue

@@ -1,11 +1,10 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
 import { mapGetters } from 'vuex';
 import { _EDIT } from '@shell/config/query-params';
 import ArrayList from '@shell/components/form/ArrayList.vue';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 
-export default defineComponent({
+export default {
   components: {
     LabeledInput,
     ArrayList
@@ -35,7 +34,7 @@ export default defineComponent({
       return this.mode === _EDIT;
     },
   }
-});
+};
 </script>
 <template>
   <div>

pkg/capi/edit/cluster.x-k8s.io.cluster/WorkerItem.vue

@@ -1,13 +1,12 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
 import debounce from 'lodash/debounce';
 import { removeAt } from '@shell/utils/array';
 import { clone } from '@shell/utils/object';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 
-export default defineComponent({
+export default {
   components: { LabeledSelect, LabeledInput },
   emits: ['add', 'remove', 'update:value'],
   props: {
@@ -140,7 +139,7 @@ export default defineComponent({
         key.value.name = val.data
     }
   }
-});
+};
 </script>
 <template>
   <div>

pkg/capi/edit/cluster.x-k8s.io.cluster/index.vue

@@ -1,15 +1,13 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
 import { SUB_TYPE } from '@shell/config/query-params';
 import { set } from '@shell/utils/object';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import Loading from '@shell/components/Loading.vue';
 import CruResource from '@shell/components/CruResource.vue';
-import type { Route } from 'vue-router';
 import { CAPI, QUERY_PARAMS, ClusterClass } from '../../types/capi';
 import ClusterConfig from './ClusterConfig.vue';
 
-export default defineComponent({
+export default {
   name:       'CreateCluster',
   components: {
     CruResource,
@@ -51,7 +49,7 @@ export default defineComponent({
     });
   },
   data() {
-    const route = this.$route as Route;
+    const route = this.$route;
     const subType = route.query[SUB_TYPE] || null;
     const classFromURL = route.query[QUERY_PARAMS.CLASS];
     const curClass = this.value?.spec?.topology?.class;
@@ -77,7 +75,7 @@ export default defineComponent({
       });
     }
   }
-});
+};
 </script>
 
 <template>

pkg/capi/edit/turtles-capi.cattle.io.capiprovider/ProviderConfig.vue

@@ -1,5 +1,4 @@
 <script lang='ts'>
-import { defineComponent } from 'vue';
 import { mapGetters } from 'vuex';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import { clear } from '@shell/utils/array';
@@ -55,7 +54,7 @@ interface Hash {
   coreProviderSecret: Secret[]
 }
 
-export default defineComponent({
+export default {
     name: 'ProviderConfig',
   components: {
     CruResource,
@@ -229,7 +228,7 @@ export default defineComponent({
       }
     }
   }
-});
+};
 </script>
 
 <template>

pkg/capi/edit/turtles-capi.cattle.io.capiprovider/index.vue

@@ -1,5 +1,4 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import CruResource from '@shell/components/CruResource.vue';
 import SelectIconGrid from '@shell/components/SelectIconGrid.vue';
@@ -19,7 +18,7 @@ type Route = {
   query: {[index: string]:any},
 };
 
-export default defineComponent({
+export default {
   name: 'CreateProvider',
 
   components: {
@@ -113,7 +112,7 @@ export default defineComponent({
       this.$emit('set-subtype', this.$store.getters['i18n/withFallback'](`cluster.provider."${ type }"`, null, type));
     },
   },
-});
+};
 </script>
 
 <template>

pkg/capi/tsconfig.json

@@ -48,6 +48,6 @@
     "**/*.vue"
   ],
   "exclude": [
-    "../../node_modules"
+    "node_modules",
   ]
 }