compilation error - Githubissues

I did a:

yarn add react-quilljs quill
yarn add -D @types/quill

and I still get the following compilation error - any help would be much appreciated !!

It appears like babel-loader is not transpiling bubble.js using typescript (or es6) How can I get babel-loader to do the proper transpiling?

Failed to compile.

./node_modules/quill/themes/bubble.js 13:18
Module parse failed: Unexpected token (13:18)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| }, 'blockquote']];
| class BubbleTooltip extends BaseTooltip {
>   static TEMPLATE = ['<span class="ql-tooltip-arrow"></span>', '<div class="ql-tooltip-editor">', '<input type="text" data-formula="e=mc^2" data-link="https://quilljs.com" data-video="Embed URL">', '<a class="ql-close"></a>', '</div>'].join('');
|   constructor(quill, bounds) {
|     super(quill, bounds);

package.json:

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@ijsto/react-slideout": "^1.4.0",
    "@stripe/react-stripe-js": "^1.8.0",
    "@stripe/stripe-js": "^1.29.0",
    "@tinymce/tinymce-react": "^3.13.0",
    "@types/jest": "^26.0.0",
    "@types/node": "^14.0.12",
    "@types/react": "^18.3.0",
    "@types/react-dom": "^18.3.0",
    "@types/react-router-dom": "^5.1.4",
    "amazon-pay-react": "^0.9.0",
    "async": "^3.2.0",
    "aws-amplify": "^4.0.2",
    "axios": "^0.27.2",
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.18.3",
    "bootstrap": "^4.5.3",
    "emoji-picker-react": "^3.5.0",
    "eslint-plugin-react": "^7.31.10",
    "formik": "^2.2.5",
    "hamburger-react": "^2.4.1",
    "history": "4.10.1",
    "html-react-parser": "^1.2.7",
    "js-cookie": "^2.2.1",
    "lodash": "^4.17.21",
    "logger": "^0.0.1",
    "luxon": "^2.0.2",
    "mobx": "^5.15.4",
    "mobx-react": "^6.1.8",
    "numeral": "^2.0.6",
    "os": "^0.1.2",
    "query-string": "^7.0.1",
    "quill": "^2.0.2",
    "rc-slider": "^9.7.5",
    "react": "^18.3.0",
    "react-alice-carousel": "^2.6.1",
    "react-bootstrap": "^1.4.0",
    "react-bootstrap-table-next": "^4.0.3",
    "react-bootstrap-table2-editor": "^1.4.0",
    "react-content-loader": "^6.0.3",
    "react-country-region-selector": "^3.0.2",
    "react-dom": "^18.3.0",
    "react-dropzone": "^11.2.4",
    "react-editext": "^4.2.1",
    "react-icons": "^5.0.1",
    "react-infinite-scroll-component": "^5.1.0",
    "react-notification-badge": "^1.5.1",
    "react-password-checklist": "^1.3.3",
    "react-player": "^2.11.0",
    "react-quilljs": "^2.0.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1",
    "react-share": "^4.4.0",
    "react-toastify": "^8.1.0",
    "react-top-loading-bar": "^2.1.0",
    "react-vis": "^1.11.7",
    "react-waypoint": "^9.0.2",
    "socket.io-client": "^4.1.3",
    "stripe": "^9.14.0",
    "ts-loader": "^9.5.1",
    "tus-js-client": "^2.1.1",
    "uuid": "^9.0.0",
    "validator": "^13.7.0",
    "yup": "^0.30.0"
  },
  "scripts": {
    "start": "PORT=3010 NODE_OPTIONS=--openssl-legacy-provider react-app-rewired start",
    "build": "NODE_OPTIONS=--openssl-legacy-provider react-app-rewired build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "plugin:react-hooks/recommended",
      "plugin:react/recommended"
    ]
  },
  "resolutions": {
    "@types/react": "18.3.0",
    "@typescript-eslint/eslint-plugin": "6.x",
    "@typescript-eslint/parser": "6.x"
  },
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@babel/plugin-proposal-decorators": "^7.10.1",
    "@types/quill": "^2.0.14",
    "@types/react-slick": "^0.23.8",
    "@typescript-eslint/eslint-plugin": "^7.13.1",
    "@typescript-eslint/parser": "^7.13.1",
    "customize-cra": "^1.0.0",
    "eslint-plugin-react-hooks": "^4.0.4",
    "react-app-rewired": "^2.1.6",
    "typescript": "5.1.6"
  },
  "main": "index.js",
  "repository": "",
  "author": "",
  "license": "MIT"
}

tsconfig.json:

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "esnext",
    "target": "es6",
    "experimentalDecorators": true,
    "jsx": "react-jsx",
    "noEmitOnError": true,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "typeRoots": [
    "../node_modules/@types",
    "../@types"
  ],
  "include": [
    "src",
    "public/assets"
  ],
  "exclude": [
    "node_modules"
  ]
}

gtgalone / react-quilljs

compilation error #82