Syntax Error: TypeError: Cannot read property 'kind' of null for Enum using Vue 3 and TypeScript - node.js

Question

I'm defining an enum within a Vue 3 component like so:
<script lang="ts">
import { defineComponent } from 'vue'
export enum PieceType
{
None,
Pawn,
Rook,
Knight,
Bishop,
Queen,
King
}
export interface Piece
{
position: Position,
type: PieceType,
}
export interface Position
{
row: number,
col: number
}
export default defineComponent({
props: {
type: String,
row: Number,
col: Number
},
setup(props) {
const getPiece = (piece: string) =>
{
console.log("Piece is:", piece)
switch(piece)
{
case "R": return PieceType.Rook;
case "K": return PieceType.Knight;
case "B": return PieceType.Bishop;
case "Q": return PieceType.Queen;
case "K": return PieceType.King;
case "P": return PieceType.Pawn;
case "-": return PieceType.None;
default: throw new Error("Invalid piece.")
}
}
return {
type: getPiece(props.type),
position: {row: props.row, col: props.col}
}
}
})
</script>
When I import the component into another component (the component equals Piece):
<script lang="ts">
import { defineComponent } from '#vue/composition-api';
import { Piece } from "../components/Piece";
export default defineComponent({
components: [Piece],
props: {
},
setup() {
const board =
[
['R', 'N', 'B', 'Q', 'K', 'B', 'N', 'R'],
['P', 'P', 'P', 'P', 'P', 'P', 'P', 'P'],
['-', '-', '-', '-', '-', '-', '-', '-'],
['-', '-', '-', '-', '-', '-', '-', '-'],
['-', '-', '-', '-', '-', '-', '-', '-'],
['-', '-', '-', '-', '-', '-', '-', '-'],
['P', 'P', 'P', 'P', 'P', 'P', 'P', 'P'],
['R', 'N', 'B', 'Q', 'K', 'B', 'N', 'R']
];
return { board }
}
})
</script>
I get the following error:
Syntax Error: TypeError: Cannot read property 'kind' of null
Occurred while linting > .\components\Piece.vue:39
at Array.forEach (<anonymous>)
at Array.forEach (<anonymous>)
# ./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/Board.vue?vue&type=script&lang=ts 3:0-44 6:15-20
# ./src/components/Board.vue?vue&type=script&lang=ts
# ./src/components/Board.vue
# ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=script&lang=js
# ./src/App.vue?vue&type=script&lang=js
# ./src/App.vue
# ./src/main.js
# multi (webpack)-dev-server/client?http://192.168.3.235:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
The error is occurring at the line:
case "R": return PieceType.Rook
I noticed that if I get rid of the Enum and replace it with strings then it works, but I don't see why the Enum isn't working. The error isn't showing up in my intellisense in vscode and I'm not using the component in a for loop anywhere to trigger the "Array.ForEach" in the error. Any help would be appreciated!

Answer 1

My issue was I didn't run "vue add typescript" to add typescript to the project. I had other issues with how I declared the components, but that was ultimately the issue.