Ionic cli vue and ts integration problems

Hi. I am trying to setup the ionic cli to be able to serve my existing project and I have run into an issue but I am able to serve it with no problems with Vite.

Here is what I did.
in the project directory

ionic init
npm install @vue/cli-service
vue add typescript
ionic serve

and then I get
[vue-cli-service] error in ./src/views/ttt.vue?vue&type=script&setup=true&lang=ts
[vue-cli-service] Syntax Error: TypeError: Cannot read properties of null (reading ‘content’)

I have tried quite a few other configurations and suggestions from similar issues posted online as well with similar results but I can not find any clear instructions on how to set up ionic in an existing project as I am doing. Any ideas about this one?

From the error it looks like TS is giving you a type error which would be a logic/syntax error and not a TS setup/configuration issue. Can you provide the contents of ttt.vue?

That was the first thing that I thought but there in nothing in TTT.vue with the name ‘content’

<template>
  <IonPage>
    <IonContent>
      <div class="flex">
        <div id="table" ref="table"></div>
        <div>
          <ion-button id="reset" @click="sendReset">New Game</ion-button>
          <ion-button @click="resignGame">Quit Game</ion-button>
        </div>
        <div>{{ systemMessageBox }}</div>
      </div>
    </IonContent>
  </IonPage>
</template>

<script setup lang="ts">
import { IonPage, IonContent, IonButton } from "@ionic/vue";
import imgURL from "../assets/tictactoe.svg";
import { Svg, SVG } from "@svgdotjs/svg.js";
import { onMounted, onUnmounted, ref } from "vue";
import TTTClient from "../GameClient/TTTClient/TTTClient";
import { fetchDocument } from "../utility/fetch-document";

const props = defineProps({
  uuid: String,
});

let client: TTTClient;
const table = ref(null);
const systemMessageBox = ref("welcome.");

let turnCount = 0;

let board: Svg;
let playArea: Svg;
let tttX: Svg;
let tttO: Svg;

document.title = "Gato";

onMounted(() => {
  // console.log(props.uuid);
  client = new TTTClient(props.uuid);
  let tableTop = SVG().addTo(table.value);
  fetchDocument(imgURL).then((img) => svgLoaded(img, tableTop));

  document.addEventListener("setPiece", onSetPiece);
  document.addEventListener("setMessage", onSetText);
  document.addEventListener("clearBoard", clearBoard);
});

onUnmounted(() => {
  document.removeEventListener("setPiece", onSetPiece);
  document.removeEventListener("setMessage", onSetText);
  document.removeEventListener("clearBoard", clearBoard);
  client.disconnect();
});

function svgLoaded(img: string, tableTop: Svg) {
  board = <Svg>tableTop.svg(img, true);

  playArea = <Svg>board.findOne("#playArea");
  tttO = <Svg>board.findOne("#tttO");
  tttX = <Svg>board.findOne("#tttX");

  let i = 0;
  board
    .findOne("#tiles")
    .children()
    .each((tile: Svg) => {
      tile.click(tileClicked);
      i++;
    });

  client.makeOldMoves();
}

function tileClicked(e: Event) {
  const tileId = (<SVGElement>e.target).getAttribute("id").split("x")[1];
  console.log(tileId);

  client.tileClicked(tileId);
}

function onSetPiece(e: CustomEvent) {
  const tile = <Svg>board.findOne("#x" + e.detail.move);
  const x = <number>tile.x();
  const y = <number>tile.y();

  if (turnCount % 2 == 0) {
    playArea.add(tttX.clone().move(x, y));
  } else {
    playArea.add(tttO.clone().translate(x, y));
  }
  turnCount++;
}

function onSetText(e: CustomEvent) {
  systemMessageBox.value = e.detail.message;
}

function clearBoard() {
  systemMessageBox.value = "New Game";
  playArea.clear();
  turnCount = 0;
}

function sendReset() {
  if (turnCount > 0) {
    client.sendReset();
    // client.reset();
    // clearBoard();
  }
}

function resignGame() {
  client.resignGame();
}
</script>

<style scoped>
.flex {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  align-items: center;
}

#table {
  position: relative;
  height: 35%;
  width: 35%;
}

@media only screen and (max-width: 768px) {
  #table {
    height: 80%;
    width: 80%;
  }
}

button {
  position: relative;
  float: left;
}
</style>

Got this error while using TypeScript before, but I already stop using it
The problem is:

setup() {
    const form = ref(null)

   onMounted(() => {
      form.value.name
   })

   return {
      return form
   }
}

Before the code runs, I guess typescript is checking it first if the code is using the variable form which is in default state it is null
So the error comes in,
Its like typescript is saying you cannot use that sub-property when it is in null unless it is being defined as {}

I changed the project to plain javascript after. which is too much

Yeah I would expect that. The whole point of TypeScript is to define types so you can have fully typed code leading to less issues at runtime.

Here is the Vue documentation on how to use types with refs - TypeScript Support | Vue.js

From my experience, learning/using TypeScript is well worth it in the long run. I’ve had virtually zero runtime errors/issues and love the intellisense in my IDE.

@visionm45, assuming you are still having issues? Can you put together a test repo that we can try out?

I’m sorry. I dont know how to replicate the problem. The project is complex and I really don’t know what the issue is. I just tried putting together a couple projects to replicate the error with no luck. But it does not seem to be an issue with refs. and as I said before the project works fine with Vite… which is which is why I started using Vite to begin with.

well okay so I decided just to push the project to a public repository on github so it can be found here.

I am just starting to integrate ionic into the project.

But I do not have the ionic cli initialized so it will have to be configured.

Thanks! I downloaded it and as you said Vite runs it fine (at least opens up the connect/login screen). The Ionic CLI not so much. Is there a reason you don’t just stick with Vite? Ionic 6 added support for it.

I am sure you’ve come across Aaron’s repo with a starter project for Vue/Vite? Aaron is very active in the Ionic community and might be a good starting point to compare to. Unfortunately Vite is out of my wheel house. Hopefully someone else can chime in.

alright. Well I think I will stick with Vite. I just wanted to see how the ionic cli worked with my project but it is not necessary. Thanks for your help