【TypeScript】streamやBufferのエラーが出る場合の対応方法【原因と解決方法】

YouTube

1 依存ライブラリでTypeScriptエラーが発生
2 手順
- 2.1 tsconfig.jsonのtypesに追加
3 本日のオススメ商品
4 終わりに

依存ライブラリで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

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」を一行追加するだけです。

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

}

{

"compilerOptions": {

...

(略)

...

"types": [

"webpack-env",

"node" // 追加

...

(略)

...

}

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

本日のオススメ商品

終わりに

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

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

【TypeScript】streamやBufferのエラーが出る場合の対応方法【原因と解決方法】

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

手順

tsconfig.jsonのtypesに追加

本日のオススメ商品

Anker 大容量モバイルバッテリー

Anker モバイルバッテリー搭載 USB急速充電器

日清 カップヌードル

GoPro HERO8 Black

烏龍茶 2L x 9本

マンハッタンポーテージ カジュアルバッグ

終わりに

CATEGORIES & TAGS

日清カップヌードル

マンハッタンポーテージカジュアルバッグ