SPFx Webpart - node_modules/@types/ [prop types] 和 [react] index.d.ts：在 gulp 构建时加载“错误 TS1005”

Posted 2023-03-07

【中文标题】SPFx Webpart - node_modules/@types/ [prop types] 和 [react] index.d.ts：在 gulp 构建时加载“错误 TS1005”

【英文标题】：SPFx Webpart - node_modules/@types/ [prop types] and [react] index.d.ts: loads of "error TS1005" on gulp build

【发布时间】：2019-03-26 07:27:39

【问题描述】：

所以我正在构建一个 spfx webpart，其中一个功能是显示链接预览。 我使用this library 完成任务。我必须更改包“styled-components”的版本并更新我的“react”（16.4.18）和“react-dom”（16.0.9）才能使其工作。进行这些更改并运行 gulp build 后，我收到以下错误列表：

[10:21:13] [tsc] typescript version: 2.4.2
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(27,38): error TS1005: '=' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(29,46): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(29,75): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(29,99): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(31,54): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(31,78): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(31,81): error TS1109: Expression expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(31,97): error TS1109: Expression expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(31,122): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(31,130): error TS1128: Declaration or statement expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(31,138): error TS1005: ',' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(44,48): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(44,49): error TS1109: Expression expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(44,50): error TS1109: Expression expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(44,68): error TS1005: '(' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(44,69): error TS1005: ')' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(46,30): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(46,54): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(46,57): error TS1109: Expression expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2297,27): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2298,14): error TS1005: ':' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2298,28): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2299,9): error TS1109: Expression expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2300,9): error TS1005: '(' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2301,9): error TS1005: '(' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2302,5): error TS1005: '(' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2302,12): error TS1005: ')' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2314,49): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2314,76): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2314,99): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2315,13): error TS1128: Declaration or statement expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2316,13): error TS1005: '(' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2316,17): error TS1005: ',' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2316,44): error TS1005: ',' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2316,45): error TS1005: ':' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2318,17): error TS1005: '(' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2318,21): error TS1005: ',' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2318,51): error TS1005: ',' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2318,52): error TS1005: ':' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2320,21): error TS1005: '(' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2320,24): error TS1005: ')' expected.
[10:21:17] Error - 'tsc' sub task errored after 3.75 s
 exited with code 2

this github issue 与我的有点相似，建议我将 typescript 版本更新到 2.3.4 或更高版本。

目前我找不到另一个 github 问题，建议将 typescript 版本更新到 2.8.x 或更高版本。

我的打字稿版本是 3.1.3。我在本地（在项目的节点模块文件夹中）和全局安装了相同的版本。您可能已经注意到，在构建开始时，我会得到输出

[tsc] typescript version: 2.4.2

我已将“package.json”文件以及 yarn.lock 文件（我正在使用 yarn）中与 typescript 相关的所有条目更改为原来的“3.1.3”或“~3.1.3”表示“2.4.1”或“2.4.2”或“~2.4.1”或“~2.4.2”。从我读过的内容来看，它与仅在 typescript 2.8 及更高版本中受支持的定义/声明语法有关。例如，有问题的行之一是：

 Error - [tsc] node_modules/@types/prop-types/index.d.ts(27,38): error TS1005: '=' expected.

export const nominalTypeHack: unique symbol;

总的来说，我对 typescript 和 node 还很陌生，所以这可能是导致不知道如何解决这个问题的另一个原因。

如果需要提供更多信息，我将很乐意提供。提前感谢所有建议和答案。

【参考方案1】：

我做了一个快速的web search 并发现几个线程（例如，1、2）表明 SPFx 构建系统正在将人们固定到旧版本的 TypeScript。我没有看到解决方案。

一种可能的方法是将您的代码分成与 React 交互的一部分和与 SPFx 交互的一部分，使用最新版本的 tsc 自己将第一部分编译为 javascript，并在以下情况下包含生成的 JavaScript 文件通过 SPFx 构建系统编译第二部分。我对 SPFx 构建系统一无所知，不知道这是否可行；如果您尝试并遇到特定问题，我也许可以提供帮助。

另一个想法是使用与您的 TypeScript 版本兼容的旧版本的 @types 包，尽管它们可能缺少您需要的功能。例如，对于 TypeScript 2.4.2，您可以通过运行 npm install @types/prop-types@ts2.4（或 npm install -D @types/prop-types@ts2.4；有关差异的详细信息，请参阅 here）来安装 @types/prop-types 的 ts2.4 标签。

【讨论】：

在对 react 和 react-dom 版本进行了一些摆弄之后，将我的本地 typescript 版本重置为所需的 2.4.2 并摆弄了一些其他依赖项，我让“gulp build”再次工作。我现在面临的问题是，在本地工作台中加载我的 webpart 时，我收到无法找到“localhost:4321/node_modules/react/dist/react.js”的错误。实际上，这样的目录不包含在 packages 文件夹中。但它也不包含在工作 Web 部件中。我不明白这一点。似乎是 node/ webpack 的具体问题？

我意识到这条评论很旧，但也许它会帮助其他人：确保您首先导航到 /workbench 端点，它会复制所需的文件并将您重定向到您的页面'上。我认为您错过了将 react.js 复制到正确位置的步骤。