Module parse failed: Unexpected token (214:33) You may need an appropriate loader to handle this fil-CodePudding

I've had a Typescript react project I've been working on for the past couple of months. Everything worked fine until yesterday when I run npm audit fix and npm audit fix --force to fix some security errors I honestly did not understand where or what caused them.

That broke my application and after running npm install and npm clean-install I am getting this error

./src/Components/SearchForm.tsx 214:33
Module parse failed: Unexpected token (214:33)
You may need an appropriate loader to handle this file type.
|     className: "w-[25%] bg-gray-100 border py-2 px-4 rounded-lg cursor-pointer",
|     onClick: function onClick() {
>       departureDateInput.current?.focus();
|     },
|     __self: _this,

After some research, I found an answer that I should remove the ? in my Typescript projects. For example this line departureDateInput.current?.focus(); should be departureDateInput.current.focus();

While this works my project is quite huge and I honestly don't want to find all of them and fix them manually.

An answer on a similar question on stack overflow claimed i need to make some settings on webpackand or babel. I have never worked with babel or webpack explicitly on my own so i dont even know how to start on that.

I dont know if this helps but here is my tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "suppressImplicitAnyIndexErrors": true
  },
  "include": ["src"]
}

Please help.

CodePudding user response：

Well, updating create-react-app fixed my problem