使用Yarn Workspace时Webpack监听模式下TypeScript定义不更新

环境与项目结构 #

基于以下技术栈搭建React微前端项目：

• single-spa v5.9
• webpack v5.75
• babel-loader v9.1
• ts-loader v9.4
• Yarn Workspace v3.5

项目包含基础包结构：

• root spa => root包
• application spa => app1包
• utils spa => utils1包
• react lib utils spa => utils2包

问题详情 #

在Webpack开发环境的监听模式下，给utils1新增一个函数后，在app1中尝试导入使用该函数时，会触发TypeScript错误，提示模块“@mma/utils1”没有导出成员“newFunction”。但实际应用运行完全正常，因此判断这是webpack、loader或TypeScript的配置问题，目前未找到可行的解决方案。

需要说明的是，utils1更新后的.d.ts文件已经由ts-loader在dist目录生成，且app1的编译日志显示已识别到这些文件（标记为assets by path ../../utils1），但仍无法解决TypeScript报错问题。

新增函数时的控制台日志 #

[@mma/utils1]: assets by path *.js 257 KiB
[@mma/utils1]:   asset mma-utils1.js 256 KiB [emitted] (name: main) 1 related asset
[@mma/utils1]:   asset main.7298c5f52c40300d30e4.hot-update.js 1.17 KiB [emitted] [immutable] [hmr] (name: main) 1 related asset
[@mma/utils1]: asset index.html 3.05 KiB [emitted]
[@mma/utils1]: asset main.7298c5f52c40300d30e4.hot-update.json 28 bytes [emitted] [immutable] [hmr]
[@mma/utils1]: Entrypoint main 257 KiB (288 KiB) = mma-utils1.js 256 KiB main.7298c5f52c40300d30e4.hot-update.js 1.17 KiB 2 auxiliary assets
[@mma/utils1]: cached modules 177 KiB [cached] 29 modules
[@mma/utils1]: runtime modules 26.3 KiB 12 modules
[@mma/utils1]: ./src/mma-utils1.ts 278 bytes [built] [code generated]
[@mma/utils1]: webpack 5.78.0 compiled successfully in 120 ms
[@mma/utils1]: No issues found.
[@mma/app1]: <i> [webpack-dev-middleware] wait until bundle finished: /mma-app1.js
[@mma/app1]: assets by path ../../utils1/ 16.3 KiB
[@mma/app1]:   asset ../../utils1/tsconfig.tsbuildinfo 15.9 KiB [emitted]
[@mma/app1]:   asset ../../utils1/dist/mma-utils1.d.ts.map 222 bytes [emitted]
[@mma/app1]:   asset ../../utils1/dist/mma-utils1.d.ts 213 bytes [emitted]
[@mma/app1]: assets by path *.js 311 KiB
[@mma/app1]:   asset mma-app1.js 311 KiB [emitted] (name: main) 1 related asset
[@mma/app1]:   asset main.e16099d5ac744012f09a.hot-update.js 349 bytes [emitted] [immutable] [hmr] (name: main) 1 related asset
[@mma/app1]: asset index.html 3.04 KiB [emitted]
[@mma/app1]: asset main.e16099d5ac744012f09a.hot-update.json 28 bytes [emitted] [immutable] [hmr]
[@mma/app1]: Entrypoint main 311 KiB (346 KiB) = mma-app1.js 311 KiB main.e16099d5ac744012f09a.hot-update.js 349 bytes 2 auxiliary assets
[@mma/app1]: cached modules 223 KiB [cached] 37 modules
[@mma/app1]: runtime modules 26.3 KiB 12 modules
[@mma/app1]: javascript modules 1.39 KiB
[@mma/app1]:   ./src/mma-app1.tsx 619 bytes [built]
[@mma/app1]:   ./src/root.component.tsx 800 bytes [built]
[@mma/app1]: webpack 5.78.0 compiled successfully in 713 ms
[@mma/app1]: No issues found.

尝试使用函数时的日志 #

[@mma/app1]: assets by path *.js 313 KiB
[@mma/app1]:   asset mma-app1.js 311 KiB [emitted] (name: main) 1 related asset
[@mma/app1]:   asset main.a4f5012940d30ef822c1.hot-update.js 2.34 KiB [emitted] [immutable] [hmr] (name: main) 1 related asset
[@mma/app1]: asset index.html 3.04 KiB [emitted]
[@mma/app1]: asset main.a4f5012940d30ef822c1.hot-update.json 28 bytes [emitted] [immutable] [hmr]
[@mma/app1]: Entrypoint main 313 KiB (347 KiB) = mma-app1.js 311 KiB main.a4f5012940d30ef822c1.hot-update.js 2.34 KiB 2 auxiliary assets
[@mma/app1]: cached modules 224 KiB [cached] 38 modules
[@mma/app1]: runtime modules 26.3 KiB 12 modules
[@mma/app1]: ./src/root.component.tsx 800 bytes [built] [code generated]
[@mma/app1]: webpack 5.78.0 compiled successfully in 268 ms
[@mma/app1]: ERROR in src/root.component.tsx:1:10
[@mma/app1]: TS2305: Module "@mma/utils1" has no exported member 'newFunction'.
[@mma/app1]:   > 1 | import { newFunction, toLowerCaseText } from "@mma/utils1";
[@mma/app1]:       |          ^^^^^^^^^^^
[@mma/app1]:     2 | import { toUpperCaseText } from "@mma/utils1";
[@mma/app1]:     3 | import { HelloComponent } from "@mma/utils2";
[@mma/app1]:     4 |

求助 #

如何解决Webpack监听模式下的这个TypeScript错误？

内容的提问来源于stack exchange，提问作者Mathieu