升级NodeJS至18 LTS后React项目出现TS2307模块找不到错误求助

将Ubuntu 22默认的NodeJS v12.22.9（配套npm 6.14.15）升级至v18.12.0 LTS（配套npm 8.19.2）后，打开VSCode发现React项目（使用React+JS）中所有组件的各类导入均出现警告：例如图片、SVG、CSS模块导入时提示Cannot find module 'xxx' or its corresponding type declarations.ts(2307)。

相关配置文件如下：

jsconfig.json #

{
  "compilerOptions": {
    "checkJs": true,
    "jsx": "react-jsx",
    "baseUrl": "src"
  },
  "include": ["src"],
  "exclude": ["node_modules", "build"]
}

package.json 依赖部分 #

"dependencies": {
  "@ant-design/icons": "^4.7.0",
  "@reduxjs/toolkit": "^1.8.6",
  "antd": "^4.23.3",
  "less": "^4.1.3",
  "react": "^18.1.0",
  "react-dom": "^18.2.0",
  "react-redux": "^8.0.4",
  "react-router-dom": "^6.4.2",
  "react-scripts": "5.0.1",
  "web-vitals": "^3.0.3"
}

/node_modules/react-scripts/lib/react-app.d.ts #

/// <reference types="node" />
/// <reference types="react" />
/// <reference types="react-dom" />

declare namespace NodeJS {
  interface ProcessEnv {
    readonly NODE_ENV: 'development' | 'production' | 'test';
    readonly PUBLIC_URL: string;
  }
}

declare module '*.avif' {
  const src: string;
  export default src;
}

declare module '*.bmp' {
  const src: string;
  export default src;
}

declare module '*.gif' {
  const src: string;
  export default src;
}

declare module '*.jpg' {
  const src: string;
  export default src;
}

declare module '*.jpeg' {
  const src: string;
  export default src;
}

declare module '*.png' {
  const src: string;
  export default src;
}

declare module '*.webp' {
    const src: string;
    export default src;
}

declare module '*.svg' {
  import * as React from 'react';

  export const ReactComponent: React.FunctionComponent<React.SVGProps<
    SVGSVGElement
  > & { title?: string }>;

  const src: string;
  export default src;
}

declare module '*.module.css' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

declare module '*.module.scss' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

declare module '*.module.sass' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

• Node.js版本从v12升级到v18后，VSCode的TypeScript语言服务未自动适配新的Node环境，无法正确识别/node_modules/react-scripts/lib/react-app.d.ts中的类型声明。该文件定义了图片、SVG、CSS模块等非JS模块的类型，语言服务找不到它就会抛出模块缺失警告。
• 项目开启了jsconfig.json中的"checkJs": true，强制TypeScript对JS文件做类型校验。一旦语言服务无法加载必要的类型声明，就会触发这类找不到模块的错误。
• npm从v6升级到v8后，依赖安装的缓存机制或node_modules目录结构发生变化，导致VSCode的类型索引功能无法正确定位到react-app.d.ts文件。

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