Shopify应用引入react-sticky-mouse-tooltip报TS7016声明文件缺失如何解决

该报错为TypeScript无法识别react-sticky-mouse-tooltip模块的类型定义，你手动添加的声明文件未生效，核心原因是TypeScript配置未包含自定义声明文件所在的目录，按以下步骤操作即可解决：

1. 调整tsconfig.json配置 #

在项目根目录找到tsconfig.json文件，修改include和typeRoots配置，确保自定义typings目录被TypeScript识别：

{
  "compilerOptions": {
    // 保留原有其他配置不变，新增/修改以下配置
    "typeRoots": ["./node_modules/@types", "./typings"]
  },
  "include": [
    "next-env.d.ts", 
    "**/*.ts", 
    "**/*.tsx", 
    // 新增typings目录的匹配规则
    "typings/**/*.d.ts"
  ]
}

如果项目根目录没有tsconfig.json文件，直接新建该文件并写入上述配置即可

2. 校验声明文件内容 #

打开typings/plugins.d.ts，确认内容只有以下一行，无多余前缀或格式错误：

declare module "react-sticky-mouse-tooltip";

3. 重启相关服务 #

• 编辑器端：VS Code用户按Cmd+Shift+P（Windows/Linux按Ctrl+Shift+P），搜索并执行TypeScript: Restart TS Server重启TS语言服务
• 项目服务端：停止当前运行的npm run dev进程，重新执行启动命令

4. 兜底临时方案 #

如果上述操作后仍有报错，可以在引入该模块的代码上方加一行类型忽略注释，临时跳过类型校验：

// @ts-ignore
import MouseTooltip from 'react-sticky-mouse-tooltip';

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