Next.js使用Typescript导入public文件夹文件报Cannot find module错误如何解决

可行解决方案 #

1. 修正tsconfig编译配置 #

首先更新compilerOptions中的模块解析规则，Next.js 12+以上版本推荐使用bundler模式适配ESM导入规则，同时调整include范围覆盖所有项目文件，参考修改后的配置：

{
  "compilerOptions": {
    // 保留原有其他配置不变，仅修改模块解析规则
    "moduleResolution": "bundler",
    // 如果需要@指向src全目录而非仅components目录，可调整paths配置为：
    // "paths": {
    //   "@/*": ["./src/*"],
    //   "#/*": ["public/assets/images/*"]
    // }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "**/*.js",
    "**/*.jsx",
    "public/**/*"
  ]
}

修改后重启TS服务（VSCode可按Ctrl+Shift+P执行「TypeScript: Restart TS Server」操作）。

2. 添加静态资源类型声明 #

如果报错的是图片、样式等非代码类文件，在项目根目录的next-env.d.ts文件中追加全局类型声明（文件不存在则新建）：

// 声明常见图片格式模块
declare module '*.png' {
  const content: string;
  export default content;
}
declare module '*.jpg' {
  const content: string;
  export default content;
}
declare module '*.jpeg' {
  const content: string;
  export default content;
}
declare module '*.svg' {
  import type { SVGProps } from 'react';
  const content: (props: SVGProps<SVGSVGElement>) => JSX.Element;
  export default content;
}
// 可按需添加其他需要导入的文件格式声明，如css、woff2等

3. 校验导入路径与配置匹配规则 #

• 当前配置@/*仅指向src/components目录，如果你导入@/utils/xxx这类超出配置范围的路径会触发报错，需要补充对应的paths规则
• 导入public目录下的资源不需要加/public前缀，直接用#/xxx.png即可匹配配置

4. 验证文件导出规则 #

如果导入的是JS/JSX文件，确认文件存在对应命名导出或默认导出，避免因导出缺失触发模块识别错误。

内容的提问来源于stack exchange，提问作者Re-Angelo