craco 项目中 配置 ts 报错 无法识别 allowSyntheticDefaultImports

先看错误

allowImportingTsExtensions

allowImportingTsExtensions 是 TypeScript 的编译选项之一，它可以允许在非 TypeScript 文件中导入 .ts 或 .tsx 文件。默认情况下，这个选项是关闭的

moduleResolution

moduleResolution 是 TypeScript 编译器用来查找和加载 TypeScript 项目中导入的模块的过程。此过程包括一组规则，用于确定编译器在哪里查找模块文件以及如何将它们与源代码中的导入语句匹配。模块解析算法支持各种模块格式，如 ECMAScript 模块、CommonJS 模块和 AMD 模块，并且它还遵守可以在 tsconfig.json 文件中指定的模块解析配置

错误

D:\前端Study\React学习\React-Project\abiytest\node_modules\ts-node\src\index.ts:859 

return new TSError(diagnosticText, diagnosticCodes, diagnostics);

^ TSError: ⨯ Unable to compile TypeScript: error TS6046: Argument for '--moduleResolution' 

option must be: 'node', 'classic', 'node16', 'nodenext'. at createTSError 

TSError: ⨯ Unable to compile TypeScript: error TS5023: Unknown compiler option 

`allowImportingTsExtensions`

大概意思是 ts编译 错误 配置中 moduleResolution 的值不是可选的

{
  "compilerOptions": {
    "types": ["node"],
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "baseUrl": "./",
    "paths": {
      "@/*":["src/*"]
    },
    /* Bundler mode */
    "moduleResolution": "bundler",  // 这个 bundler
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

原因

这个错误是因为在 TypeScript 的配置文件 tsconfig.json 中使用了未知的编译选项 allowImportingTsExtensions。这个选项只是在 TypeScript 4.1 版本中引入的，并且只能在这个版本及以上的 TypeScript 中使用。

解决这个问题的方法是升级 TypeScript 到 4.1 或更高版本。你可以使用以下命令来安装最新版本的 TypeScript：

npm install typescript@latest --save-dev

升级 TypeScript 后，确保你的 tsconfig.json 文件中的编译选项是有效的，并且不包含任何未知的选项。如果你不确定某个编译选项是否有用或可用，可以查看 TypeScript 的文档来了解更多详细信息

然后 你的项目就可以进行编译 了 ， 主要是TypeScript的版本问题