logo image

Nodeライブラリ Sharp をブラウザで使用するとエラーが発生

Icon representing a data.
2022-01-07
Icon show updated_at
2022-01-07
1
Twitter icon.
Sharp
Typescript
Javascript
Node
Mac

前提条件

  • Sharpをブラウザ上(クライアント側)で使用する。
  • 目的としては画像をWebp変換

現象

import sharp from sharp

sharp(image)
  .toBuffer((err, data, info) => { 
     console.log(err, data, info)
});

エラーログ・エラーメッセージ

ModuleNotFoundError: Module not found: Error: Can't resolve 'fs' in '/xxxxx/...../node_modules/detect-libc/lib'

ModuleNotFoundError: Module not found: Error: Can't resolve 'child_process' in '/xxxxx/...../node_modules/webp-converter/src'

./node_modules/sharp/build/Release/sharp-darwin-x64.node
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

原因

そもそもブラウザ上ではSharpは動かないことが原因。

Hi, sharp requires the Node.js runtime and will not work in a browser.

image

Module parse failed: Unexpected character '�' (1:0)

対応

別の方法でWebPへの変換を行った。

在宅専門のフリーランスエンジニアをしています。 得意言語はVBAです。Next.jsとTypescriptを鍛錬中。
Area to place ads.
Area to place ads.
Comments
この記事にコメントはまだありません。

開発環境 ライブラリ ツール

Sharp
Typescript
Javascript
Node
Mac
在宅専門のフリーランスエンジニアをしています。 得意言語はVBAです。Next.jsとTypescriptを鍛錬中。