about me

はむさんのオンラインスクールを見ながら勉強している31歳です。本職はプログラマーとは関係ない営業なので、プロからしたら「何言ってんだ？」かもしれませんが、温かい目で見ていただければと思います。

主題

今回はgravatarというサービスをreactから使用する為にcryptoをインポートしたかったが、下記の事象（エラー）が発生したため、代替手段としてmd5を使用した話です。

事象

実行したいけどcryptoが見つからないために動かないコード

const crypto = require('crypto');

export const gravatarPath = (string) => {
    const lowerCaseString = string.trim().toLowerCase();
    const md5 = crypto.createHash('md5');
    const digest = md5.update(lowerCaseString,'binary').digest('hex');

    return `https://www.gravatar.com/avatar/${digest}/?d=robohash`;
};

cryptoで実行しているのはhex(16進数)でbainaryデータを返している様子。

エラーメッセージ

Compiled with problems:X

ERROR in ./src/gravatar.js 3:15-32

Module not found: Error: Can't resolve 'crypto' in 'C:\Users\user\Desktop\dev\src'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
	- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "crypto": false }

調べて色々試みたが、cryptoのimportエラーを解決するための分かりやすい記事がなかったので、別の方法を模索しました。

解釈（考えたこと）

cryptoを使わなくても文字列をmd5の16進数にさえできればいいと考えて、google検索した結果、md5という標準ライブラリがあることを知りました。

教えてくれたqiita記事↓
https://qiita.com/ffggss/items/2d48b0de5f95cd10ab66

npmのmd5ライブラリ↓
https://www.npmjs.com/package/md5

使い方が分かりやすく書いてあるgithub↓
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/md5/md5-tests.ts

解決

これをmd5を使用して実装すると(yarn add md5をしてから)

const md5 = require('md5');

export const gravatarPath = (string) => {
    const lowerCaseString = string.trim().toLowerCase();
    const digest = md5(lowerCaseString, { encoding: 'binary' });

    return `https://www.gravatar.com/avatar/${digest}/?d=robohash`;
};

無事にgravatrを読み込んでエラーなく起動することができました。

本来はちゃんとエラーメッセージを読んで解決すべきだと思うのですが、一応こういう手段もありました、ってことで今回記事に書かせていただきました。