craco 项目中 配置 ts 报错 无法识别 allowSyntheticDefaultImports_return new tserror(diagnostictext, diagnosticcodes

先看错误

allowImportingTsExtensions

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

moduleResolution

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

错误

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`
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

json
复制代码

{
  "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" }]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

原因

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

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

sql
复制代码
npm install typescript@latest --save-dev
1
2
3

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

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

作者：前端小张同学
链接：https://juejin.cn/post/7245567988248625189
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。