模块解析失败：意外标记 (214:33) 您可能需要适当的加载程序来处理此文件类型。 TypeScript CRA项目

Question

在过去的几个月里，我有一个 Typescript 反应项目。 直到昨天，当我运行npm audit fix和npm audit fix --force来修复一些安全错误时，一切都很好，老实说，我不明白是什么原因导致了这些错误。

这破坏了我的应用程序，在运行npm install和npm clean-install全新安装后，我收到此错误

./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, 

经过一些研究，我找到了一个答案，我应该删除? 在我的 Typescript 项目中。 例如这一行departureDateInput.current?.focus(); 应该是departureDateInput.current.focus();

虽然这可行，但我的项目非常庞大，老实说，我不想找到所有这些并手动修复它们。

关于堆栈溢出的类似问题的答案声称我需要在webpack和/或babel上进行一些设置。 我从来没有单独使用过 babel 或 webpack，所以我什至不知道如何开始。

我不知道这是否有帮助，但这是我的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"]
}

请帮忙。

Answer 1

好吧，更新 create-react-app 解决了我的问题

npm install react-scripts@latest