Typescript version mismatch between project version and external library

Question

I have a SharePoint Framework project with several React webparts. This project is forced to use TypeScript v4.5.5 due to compatibility with SharePoint Framework. I would like to use an external library that uses typescript v5.x.y, but when compiling the project it throws the following errors:

PS C:\Project> gulp build Build target: DEBUG [20:39:12] Using gulpfile C:\Project\gulpfile.js [20:39:12] Starting 'build'... [20:39:12] Starting gulp [20:39:12] Starting subtask 'pre-copy'... [20:39:13] Finished subtask 'pre-copy' after 133 ms [20:39:13] Starting subtask 'copy-static-assets'... [20:39:13] Starting subtask 'sass'... [20:39:13] Warning - [sass] src\webparts\companyDescription2\components\company-description2.scss: filename should end with module.sass or module.scss [20:39:13] Warning - [sass] src\webparts\recentlyAddedNewsTags2\components\recently-added-news-tags2.scss: filename should end with module.sass or module.scss [20:39:13] Warning - [sass] src\webparts\recommendationTable2\components\recommendation-table2.scss: filename should end with module.sass or module.scss Browserslist: caniuse-lite is outdated. Please run: npx update-browserslist-db@latest Why you should do it regularly: https://github.com/browserslist/update-db#readme [20:39:14] Finished subtask 'sass' after 1.45 s [20:39:14] Starting subtask 'lint'... [20:39:14] [lint] eslint version: 8.7.0 [20:39:14] Starting subtask 'tsc'... [20:39:14] [tsc] typescript version: 4.5.5 [20:39:14] Finished subtask 'copy-static-assets' after 1.62 s [20:39:21] Error - [tsc] node_modules/lexical/nodes/LexicalDecoratorNode.d.ts(14,59): error TS1005: '>' expected. [20:39:21] Error - [tsc] node_modules/lexical/nodes/LexicalDecoratorNode.d.ts(14,62): error TS1109: Expression expected. [20:39:21] Error - [tsc] node_modules/lexical/nodes/LexicalDecoratorNode.d.ts(14,63): error TS1109: Expression expected. [20:39:21] Error - [tsc] node_modules/lexical/nodes/LexicalDecoratorNode.d.ts(15,21): error TS1109: Expression expected. [20:39:21] Error - [tsc] node_modules/lexical/nodes/LexicalDecoratorNode.d.ts(19,20): error TS1005: ',' expected. [20:39:21] Error - [tsc] node_modules/lexical/nodes/LexicalDecoratorNode.d.ts(19,43): error TS1005: ',' expected. [20:39:21] Error - [tsc] node_modules/lexical/nodes/LexicalDecoratorNode.d.ts(19,58): error TS1005: ';' expected. [20:39:21] Error - [tsc] node_modules/lexical/nodes/LexicalDecoratorNode.d.ts(20,17): error TS1005: ';' expected. [20:39:21] Error - [tsc] node_modules/lexical/nodes/LexicalDecoratorNode.d.ts(21,15): error TS1005: ';' expected. [20:39:21] Error - [tsc] node_modules/lexical/nodes/LexicalDecoratorNode.d.ts(22,27): error TS1005: ';' expected. [20:39:21] Error - [tsc] node_modules/lexical/nodes/LexicalDecoratorNode.d.ts(23,1): error TS1128: Declaration or statement expected. [20:39:21] Error - 'tsc' sub task errored after 6.76 s exited with code 2 [20:39:21] 'build' errored after 8.44 s About to exit with code: 1

Is there a way to ignore d.ts files and reading the external library directly as a JS file? Will this fix the error? Is there any other alternatives?

Thanks in advance!

Remo H. Jansen · Accepted Answer · 2024-07-30 19:55:00Z

You shouldn't need to build .ts or .d.ts files from node_modules. The packages in node_modules are tested and built by the developers of each package. You don't need this again. It is recommended to add node_modules to the exclude option in tsconfig.json:

{
  "compilerOptions": {
    // other options
  },
  "exclude": ["node_modules"]
}

You can also try to use skipLibCheck:

skipLibCheck

Skip type checking of declaration files.

A common case where you might think to use skipLibCheck is when there are two copies of a library’s types in your node_modules. In these cases, you should consider using a feature like yarn’s resolutions to ensure there is only one copy of that dependency in your tree or investigate how to ensure there is only one copy by understanding the dependency resolution to fix the issue without additional tooling.

Another possibility is when you are migrating between TypeScript releases and the changes cause breakages in node_modules and the JS standard libraries which you do not want to deal with during the TypeScript update.

Collectives™ on Stack Overflow

Typescript version mismatch between project version and external library

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related