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

文章讲述了在TypeScript项目中遇到的编译错误,错误涉及两个配置项:`moduleResolution`被设置为非有效值`bundler`,以及不被识别的`allowImportingTsExtensions`选项。解决方案是升级TypeScript到4.1或更高版本,并确保`tsconfig.json`文件中的选项正确无误。
摘要由CSDN通过智能技术生成

先看错误

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`

大概意思是 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" }]
}

原因

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

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

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

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

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值