TypeScriptでstreamやBufferのエラーが出る場合の対処

依存ライブラリでTypeScriptエラーが発生

TypeScriptを利用して開発をする際に、様々なライブラリを利用することになると思います。

その際に、依存ライブラリ側でTypeScriptのエラーが出る事があります。

エラー内容

ERROR in /Users/blogenist/sample/node_modules/canvas/types/index.d.ts
4:26 Cannot find module 'stream'.
    2 | /// <reference lib="dom" />
    3 |
  > 4 | import { Readable } from 'stream'
      |                          ^
    5 |
    6 | export interface PngConfig {
    7 | 	/** Specifies the ZLIB compression level. Defaults to 6. */
ERROR in /Users/blogenist/sample/node_modules/canvas/types/index.d.ts
90:41 Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.
    88 | 	 * SVG.
    89 | 	 */
  > 90 | 	toBuffer(cb: (err: Error|null, result: Buffer) => void): void
       | 	                                       ^
    91 | 	toBuffer(cb: (err: Error|null, result: Buffer) => void, mimeType: 'image/png', config?: PngConfig): void
    92 | 	toBuffer(cb: (err: Error|null, result: Buffer) => void, mimeType: 'image/jpeg', config?: JpegConfig): void

今回の例でいうと、streamやBufferなど、Node.jsのコアモジュールに対するエラーです。

自分で追加しているわけではないのでどうすれば良いのかと悩みがちですが、実はとても簡単にエラーを消す事が出来るのでやり方をご紹介します。

手順

tsconfig.jsonのtypesに追加

解決方法は、tsconfig.jsonのcompilerOptions.typesに「node」を一行追加するだけです。

[adsense-responsive]

tsconfig.json

{
  "compilerOptions": {
    ...
    (略)
    ...
    "types": [
      "webpack-env",
      "node" // 追加
    ],
    ...
    (略)
    ...

}

たったこれだけでTypeScriptのコンパイルエラーが出なくなります。

終わりに

以上のように一瞬で解決出来るエラーとなっています。

同じような現象でお困りの方は是非こちらを試してみてください♪