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 webpack
and 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