Node.js项目中CanvasRenderingContext2D未找到的问题排查

原因 #

你的Node.js项目tsconfig.json里，compilerOptions.lib只配置了["es6"]，但CanvasRenderingContext2D属于浏览器DOM环境的类型，对应的定义在TypeScript的lib.dom.d.ts文件中。TypeScript只会加载你在lib数组里指定的库类型，没添加dom的话，编译时就找不到这个类型。

之前的Next.js/React项目是浏览器端项目，默认会自动包含DOM相关的库类型，迁移代码到Node.js项目后，配置没同步这部分，就出现了编译错误。

解决办法 #

修改tsconfig.json的compilerOptions.lib，把dom添加进去：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": ["es6", "dom"],
    "allowJs": true,
    "outDir": "build",
    "rootDir": "src",
    "strict": true,
    "noImplicitAny": true,
    "esModuleInterop": true,
    "resolveJsonModule": true
  }
}

如果你的Node.js项目用了node-canvas这类非浏览器环境的Canvas库，除了添加dom，还需要安装对应库的类型包（比如@types/node-canvas），但当前编译报错的核心是缺少DOM类型库的引用，先添加dom就能解决这个问题。

内容的提问来源于stack exchange，提问作者János