Module build failed with @babel/plugin-transform-typescript

Question

I want to use the web-nfc.d.ts but an error occurs. File(https://github.com/w3c/web-nfc/blob/gh-pages/web-nfc.d.ts)

Module build failed (from ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js): SyntaxError: C:\Development\learntypescript\src\components\web-nfc.d.ts: TypeScript 'declare' fields must first be transformed by @babel/plugin-transform-typescript. If you have already enabled that plugin (or '@babel/preset-typescript'), make sure that it runs before any plugin related to additional class features:

• @babel/plugin-transform-class-properties
• @babel/plugin-transform-private-methods
• @babel/plugin-proposal-decorators

I tried to set these Plugins in my package.json and add them to devDependencies and normal dependencies.

package.json

{
  "name": "learntypescript",
  "version": "0.1.0",
  "private": true,
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react",
      [
        "@babel/preset-typescript"
      ]
    ],
    "plugins": [
      "@babel/plugin-transform-typescript",
      "@babel/plugin-transform-class-properties",
      "@babel/plugin-transform-private-methods",
      "@babel/plugin-proposal-decorators",
      "@babel/plugin-syntax-dynamic-import"
    ]
  },
  "dependencies": {
    "@babel/core": "^7.22.8",
    "@babel/plugin-proposal-decorators": "^7.22.7",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.0",
    "@babel/plugin-transform-class-properties": "^7.22.5",
    "@babel/plugin-transform-private-methods": "^7.22.5",
    "@babel/plugin-transform-typescript": "^7.22.5",
    "@babel/preset-env": "^7.22.7",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.38",
    "@types/react": "^18.2.14",
    "@types/react-dom": "^18.2.6",
    "mini.css": "^3.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-dropdown-select": "^4.9.4",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4",
    "workbox-build": "^7.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.22.8",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.0",
    "@babel/plugin-transform-class-properties": "^7.22.5",
    "@babel/plugin-transform-typescript": "^7.22.5",
    "@babel/plugin-transform-private-methods": "^7.22.5",
    "@babel/plugin-proposal-decorators": "^7.22.7",
    "@babel/preset-env": "^7.22.7",
    "@svgr/webpack": "^8.0.1",
    "babel-loader": "^9.1.3",
    "react-scripts": "5.0.1",
    "webpack": "^5.88.1"
  },
  "override": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "@svgr/webpack": "$@svgr/webpack"
  },
  "description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
  "main": "index.js",
  "keywords": [],
  "author": "",
  "license": "ISC"
}

web-nfc.d.ts

// Type definitions for Web NFC
// Project: https://github.com/w3c/web-nfc
// Definitions by: Takefumi Yoshii <https://github.com/takefumi-yoshii>
// TypeScript Version: 3.9

// This type definitions referenced to WebIDL.
// https://w3c.github.io/web-nfc/#actual-idl-index

interface Window {
    NDEFMessage: NDEFMessage
}
declare class NDEFMessage {
    constructor(messageInit: NDEFMessageInit)
    records: ReadonlyArray<NDEFRecord>
}
declare interface NDEFMessageInit {
    records: NDEFRecordInit[]
}

declare type NDEFRecordDataSource = string | BufferSource | NDEFMessageInit

interface Window {
    NDEFRecord: NDEFRecord
}
declare class NDEFRecord {
    constructor(recordInit: NDEFRecordInit)
    readonly recordType: string
    readonly mediaType?: string
    readonly id?: string
    readonly data?: DataView
    readonly encoding?: string
    readonly lang?: string
    toRecords?: () => NDEFRecord[]
}
declare interface NDEFRecordInit {
    recordType: string
    mediaType?: string
    id?: string
    encoding?: string
    lang?: string
    data?: NDEFRecordDataSource
}

declare type NDEFMessageSource = string | BufferSource | NDEFMessageInit

interface Window {
    NDEFReader: NDEFReader
}
declare class NDEFReader extends EventTarget {
    constructor()
    onreading: (this: this, event: NDEFReadingEvent) => any
    onreadingerror: (this: this, error: Event) => any
    scan: (options?: NDEFScanOptions) => Promise<void>
    write: (
            message: NDEFMessageSource,
            options?: NDEFWriteOptions
    ) => Promise<void>
    makeReadOnly: (options?: NDEFMakeReadOnlyOptions) => Promise<void>
}

interface Window {
    NDEFReadingEvent: NDEFReadingEvent
}
declare class NDEFReadingEvent extends Event {
    constructor(type: string, readingEventInitDict: NDEFReadingEventInit)
    serialNumber: string
    message: NDEFMessage
}
interface NDEFReadingEventInit extends EventInit {
    serialNumber?: string
    message: NDEFMessageInit
}

interface NDEFWriteOptions {
    overwrite?: boolean
    signal?: AbortSignal
}
interface NDEFMakeReadOnlyOptions {
    signal?: AbortSignal
}
interface NDEFScanOptions {
    signal: AbortSignal
}

NFC.tsx

import React, {Component} from "react";
import './web-nfc.d.ts'

const ndef = new NDEFReader();

class NFC extends Component<any, any>
{
    constructor(props:any)
    {
        super(props);

        
    }

    onClickedButton(){
        ndef.scan().then(() => {
            console.log("Scan started successfully.");
            ndef.onreadingerror = () => {
                console.log("Cannot read data from the NFC tag. Try another one?");
            };
            ndef.onreading = event => {
                console.log("NDEF message read.");
            };
        }).catch(error => {
            console.log(`Error! Scan failed to start: ${error}.`);
        });
    }
    
    render()
    {
        return (
                <div>
                    <button onClick={this.onClickedButton}></button>
                </div>
        )
    }
}

export default NFC;

App.tsx

import React from 'react';
import NFC from "./components/NFC";

function App()
{
    
    return (

            <div className="App">
                <NFC></NFC>
            </div>
    );

}

export default App;

index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);