TypeScript, Parcel Bundler, and React - Issue declaring custom types

Question

I am using Parcel with typescript to create a react application. The typescript server is not highlighting any issues, however when attempting to build the application after declaring my first type, the parcel bundler is returning the error "Cannot assign to read only property 'message' of object 'SyntaxError:\<root\>/src/projects/index.tsx: Missing semicolon."

This includes the code snippet it is angry with, which is:

type Project = {
    |     ^
  4 |   title: string;
  5 |   description: string;
  6 |   element: string;'

  1 | import BoujeeText from "./boujeeText";
  2 |
> 3 | type Project = {
    |     ^
  4 |   title: string;
  5 |   description: string;
  6 |   element: string;'

Here is the newly added code that is causing the problem.

type Project = {
  title: string;
  description: string;
  element: string;
};

const projects: Project[] = [
  {
    title: "Jhey Thompkin's Boujee Text",
    description:
      "Dynamic Text following a tutorial by Jhey Thompkins with zustand",
    element: "element",
  },
];

export default projects;

The typescript config

{
  "compilerOptions": {
    "lib": ["ESNext", "DOM"],
    "experimentalDecorators": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "types": ["parcel-bundler", "node", "jest", "@testing-library/jest-dom"],
    "typeRoots": ["node_modules/@types", "src/types.d.ts"]
  },
  "exclude": ["node_modules"],
  "include": ["src/**/*", "assets", "mocks"]
}

The babel.config.ts

module.exports = {
  presets: [
    "@babel/preset-env",
    ["@babel/preset-react", { runtime: "automatic" }],
  ],
};

And the .parcelrc

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.{ts,tsx}": [
      "@parcel/transformer-typescript-tsc"
    ]
  }
}

If anyone can highlight anything that would prevent me from being able to declare my own types, please help

I have attempted to change the typescript config, and change the babel config to try and resolve the issue. Sadly I have struggled to find anyone facing similar issues on Google, so I assume this is a config issue rather than code.

Answer 1

I had added parcel-bundler in an attempt to fix some previous typescript issues, however this is depreciated and not necessary.

Removing this package and updating the types in the typescript config resolved the issue without any unintentional side-effects.