webpack5でstorybookなmswだとjwtがtokenをgeneration出来ない件について

結論

必要なmoduleを入れて、webpackにaliasを書いて、
.storybook/preview.jsに下記を追加しましょう。

import { Buffer } from 'buffer'
// @ts-ignore
window.Buffer = Buffer

本文

webpack5が出たんですけども、過去のバージョンと比べて廃止された物がいくつかあるという話です。
そのため、素直にjwtが動かず、結構苦労しました。
※素直に動かそうとすると最初に「stream」でエラーが出て、そのあとに「buffer」でエラーが出て、最後に「crypto」でエラーが出ます。

その他細かい話はあるんですけど、この記事がだいぶまとまっていて助かりました。

実行した手順は以下です

1. 下記コマンドを実行
   ※引用元この記事

$ yarn add -E -D assert buffer console-browserify constants-browserify crypto-browserify domain-browser events stream-http https-browserify os-browserify path-browserify punycode process querystring-es3 stream-browserify readable-stream readable-stream readable-stream readable-stream readable-stream string_decoder util timers-browserify tty-browserify url util vm-browserify browserify-zlib 

2．webpackを編集
今回私はStorybook上で使えればよかったので、Storybook/Mainjsを編集しています。

.storybook/main.js

module.exports = {
    ...

    webpackFinal: (config) => {
        config.resolve.alias = {
            ...config.resolve?.alias,
            assert: "assert",
            buffer: "buffer",
            console: "console-browserify",
            constants: "constants-browserify",
            crypto: "crypto-browserify",
            domain: "domain-browser",
            events: "events",
            http: "stream-http",
            https: "https-browserify",
            os: "os-browserify/browser",
            path: "path-browserify",
            punycode: "punycode",
            process: "process/browser",
            querystring: "querystring-es3",
            stream: "stream-browserify",
            _stream_duplex: "readable-stream/duplex",
            _stream_passthrough: "readable-stream/passthrough",
            _stream_readable: "readable-stream/readable",
            _stream_transform: "readable-stream/transform",
            _stream_writable: "readable-stream/writable",
            string_decoder: "string_decoder",
            sys: "util",
            timers: "timers-browserify",
            tty: "tty-browserify",
            url: "url",
            util: "util",
            vm: "vm-browserify",
            zlib: "browserify-zlib"
        }
    }

3．preview.jsを編集する。
jwtがbufferを使ってるのかよくわからないですが、bufferでもエラーが出ていたので以下で対応です。
参考にした記事ではWebPackに記述して解決してましたが、うまく行かなかったので下記対応をしています。

.storybook/preview.js

import { Buffer } from 'buffer';

// @ts-ignore
window.Buffer = Buffer;

以上です。