【Typescript/React】SyntaxError: /***.tsx: Missing semicolon. エラーを解消したい

Question

前提・実現したいこと

以下のエラーを解消したいです。

ERROR in ./resources/ts/components/CategoryLists.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /work/resources/ts/components/CategoryLists.tsx: Missing semicolon. (7:4)

   5 |
   6 | // typescript設定
>  7 | type Category = {
     |     ^
   8 |     id: number;
   9 |     name: string;
  10 |     created_at: Date;

該当のソースコード

import React, { useEffect, useState } from 'react';
// import * as api from './../api/CategoryAPI';
import axios from 'axios';
import ReactDOM from 'react-dom';

// typescript設定
type Category = { // ← エラー箇所
    id: number;
    name: string;
    created_at: Date;
    updated_at: Date;
};

const CategoryLists = () => {
// const CategoryLists: React.VFC = () => {
    // typescriptを設定する
    const [categories, setCategories] = useState<Category[]>([])
    // const [categories, setCategories] = useState([])

    // カテゴリーAPIを取得する
    const getCategories = async () => {
        const { data } = await axios.get<Category[]>('api/categories');
        // const { data } = await axios.get('api/categories');
        setCategories(data);
    }

    // getCategoriesを出力する
    useEffect(() => {
        getCategories();
    })

    // 本文
    return (
        // 出力
        <ul id="categoryLists" className="c-input__lists">
            { categories.map(category => {
                <li key="{category.id}" className="c-input__list">
                    <input type="checkbox" id="{category.id}" defaultValue="{category.id}" />
                    <label htmlFor="{category.id}">{category.name}</label>
                </li>
            })};

            {/* <li className="c-input__list">
                <input type="text" id="2" />
                <label htmlFor="2">いいい</label>
            </li> */}
        </ul>
    );
}

if (document.getElementById('categoryLists')) {
    ReactDOM.render(<CategoryLists />, document.getElementById('categoryLists'));
}

試したこと

１.末尾にセミコロンを追加

[参考] https://www.curict.com/item/5e/5e11535.html

type Category = {

-     id: number
-     name: string
-     created_at: Date
-     updated_at: Date
- }

+     id: number;
+     name: string;
+     created_at: Date;
+     updated_at: Date;
+ };

※ 「tslint.jsonの "semicolon" 設定を削除するか、false を指定して無効にします。」は非推奨と記載されているので行いませんでした。

２．node_module再インストール

[参考] 　https://ticklecode.com/npmcachedelete/

npm cache clean --force
rm -rf ~/.npm
rm -rf node_modules

３．Laravelキャッシュクリア

[参考] https://qiita.com/Ping/items/10ada8d069e13d729701

php artisan cache:clear
php artisan config:clear
php artisan route:clear
php artisan view:clear
composer dump-autoload
php artisan clear-compiled
php artisan optimize
php artisan config:cache

補足情報（FW/ツールのバージョンなど）

Laravel Framework 8.47.0
npm 6.14.12
react 17.0.2
@types/react 17.0.11
typescript 4.3.2

Comments

[hoshi-takanori]

Laravel よく分かりませんが、TypeScript と認識されずに JavaScript として扱われて type なんて知らないと言ってるように見えますね…。

[nanami0221]

いただいた回答をもとに調べたところ、webpackでjsでコンパイルしておりました、、、
本当に有難うございました。

Answer 1

恥ずかしながら、webpackでjsでコンパイルしておりました、、、
hoshi-takanori様、有難うございました。

mix.js('resources/js/app.js', 'public/js')
-   .js('resources/tsx/app.tsx', 'public/js')
+.  .ts('resources/tsx/app.tsx', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .react();