Kuroshiroライブラリのエラーを解決したい

Question

Kuroshiroライブラリのエラーを解決したい

ReactにてKuroshiroライブラリを利用した文字列変換アプリを作成しておりましたが、
公式に習ってライブラリをインストールし、サンプルコードを実行したらエラーが発生したという状況です。

• npm install kuroshiro
• npm install kuroshiro-analyzer-kuromoji

import { type InputType } from "../@types/PagesTypes";
import Kuroshiro from "kuroshiro";
import KuromojiAnalyzer from "kuroshiro-analyzer-kuromoji";

const saveTypingData = (typingdata: InputType): void => {
  const kuroshiro = new Kuroshiro();
  kuroshiro
    .init(new KuromojiAnalyzer())
    .then(function () {
      return kuroshiro.convert(
        "感じ取れたら手を繋ごう、重なるのは人生のライン and レミリア最高！",
        { to: "hiragana" }
      );
    })
    .then(function (result: any) {
      console.log(result);
    });
};
export default saveTypingData;

発生したエラー内容

Compiled with problems:
ERROR in ./node_modules/kuromoji/src/loader/DictionaryLoader.js 20:11-26
Module not found: Error: Can't resolve 'path' in '/Users/tanakakenta/Documents/ウェブ制作練習/JavaScript/ojako-typing/node_modules/kuromoji/src/loader'

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: { "path": require.resolve("path-browserify") }'
	- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "path": false }

解決に向けて試したこと

発生したエラー内容を調べていくうちにWebpackのバージョンアップに伴うモジュールの非互換である、ということがわかってきたので以下の記事を参考にして対処してみた。
webpack4系から5系にアップデートした際の対応事項とかメモ
React環境にて「BREAKING CHANGE: webpack < 5 used ~」を解決する方法
まずは必要そうなパッケージのインストール

• npm install 'path-browserify'

その後は依存関係を解決するべく、Webpack.config.jsを編集してみました。

 resolve: {
alias: {
        "path": "path-browserify", //: loaderエラーにより追記
      },
// または
fallback: { "path": false }, //: loaderエラーにより追記
// もしくは
 fallback: { "path": require.resolve("path-browserify") }, //: loaderエラーにより追記
}

そしてエラーが発生している利用箇所に対して読み込み文を追記

• import path from "path-browserify"; //:エラーにより追記

これらの方法を実施してみて一時的にですがUIが復活したので、MUIとRHFで用意したフォームをSubmitしてみたところ別のエラーが発生するように。。。

Uncaught runtime errors:
ERROR
invalid file signature:60,33
    at __webpack_modules__../node_modules/zlibjs/bin/gunzip.min.js.$.g (http://localhost:3000/static/js/bundle.js:87456:40)
    at xhr.onload (http://localhost:3000/static/js/bundle.js:44439:26)

Webpack.config.jsの編集によりコンパイルエラーはなくなりました。が今度は実行時エラーになってしまったのでこうなると何処を疑えばよいのか分からなくなりました。
此処から先は依存関係の泥沼になりそうなので、これらの依存関係の解消法をご教授願いたくよろしくお願い致します。

補足情報（ツールのバージョンなど）

{
  "name": "ojako-typing",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.14.8",
    "@mui/material": "^5.14.8",
    "@mui/styled-engine": "^5.14.8",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.48",
    "@types/react": "^18.2.21",
    "@types/react-dom": "^18.2.7",
    "axios": "^1.5.0",
    "js-hira-kata-romanize": "git+https://github.com/ojakomaru/js-hira-kata-romanize.git",
    "json-server": "^0.17.3",
    "kuroshiro": "^1.2.0",
    "kuroshiro-analyzer-kuromoji": "^1.1.0",
    "markdown-to-jsx": "^7.3.2",
    "node-polyfill-webpack-plugin": "^2.0.1",
    "path-browserify": "^1.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.46.1",
    "react-router-dom": "^6.15.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "uuid": "^9.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/uuid": "^9.0.4"
  }
}

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "types": ["@emotion/react/types/css-prop"]
  },
  "include": ["src"]
}

declare module 'kuroshiro';
declare module "kuroshiro-analyzer-kuromoji";

Answer 1

アナライザーの辞書を登録する事で解決しました。

上記の手順に加えて一緒にインストールされるkuromoriパッケージのdistにある.gzファイルをローカルから読み込む必要があるようです。
ちなみに私はreact環境だったためパスはpublicに通しました。