常連

# 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系にアップデートした際の対応事項とかメモ](https://madogiwa0124.hatenablog.com/entry/2021/02/13/120741)
[React環境にて「BREAKING CHANGE: webpack < 5 used ~」を解決する方法](https://zenn.dev/decline/articles/40acac3e6a6282)
まずは必要そうなパッケージのインストール
- 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の編集によりコンパイルエラーはなくなりました。が今度は実行時エラーになってしまったのでこうなると何処を疑えばよいのか分からなくなりました。
此処から先は依存関係の泥沼になりそうなので、これらの依存関係の解消法をご教授願いたくよろしくお願い致します。

##### 補足情報（ツールのバージョンなど）
```package.json
{
  "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"
  }
}
```
```tsconfig.json
{
  "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"]
}
```
```.d.ts
declare module 'kuroshiro';
declare module "kuroshiro-analyzer-kuromoji";
```

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

# 概要
コードを実行前に下記のようなエラーが発生し、コードを実行出来ません。
```JSON
{ 
  "errorType":"Error",
  "errorMessage":"Module build failed: Error: ENOENT: no such file or directory,
   open '/sample/node_modules/axios/node_modules/form-data/lib/form_data.js'",
  "stack":["Error: Module build failed: Error: ENOENT: no such file or directory,
   open '/sample/node_modules/axios/node_modules/form-data/lib/form_data.js'",
  "    at Object../node_modules/axios/node_modules/form-data/lib/form_data.js (/var/task/app.js:41266:7)",
  "    at __webpack_require__ (/var/task/webpack:/Sample/webpack/bootstrap:19:1)",
  "    at Object../node_modules/axios/lib/defaults/env/FormData.js (/var/task/webpack:/Sample/node_modules/axios/lib/defaults/env/FormData.js:2:1)",
  "    at __webpack_require__ (/var/task/webpack:/Sample/webpack/bootstrap:19:1)",
  "    at Object../node_modules/axios/lib/defaults/index.js (/var/task/webpack:/Sample/node_modules/axios/lib/defaults/index.js:124:15)",
  "    at __webpack_require__ (/var/task/webpack:/Sample/webpack/bootstrap:19:1)",
  "    at Object../node_modules/axios/lib/core/transformData.js (/var/task/webpack:/Sample/node_modules/axios/lib/core/transformData.js:4:16)",
  "    at __webpack_require__ (/var/task/webpack:/Sample/webpack/bootstrap:19:1)",
  "    at Object../node_modules/axios/lib/core/dispatchRequest.js (/var/task/webpack:/Sample/node_modules/axios/lib/core/dispatchRequest.js:4:21)",
  "    at __webpack_require__ (/var/task/webpack:/Sample/webpack/bootstrap:19:1)"]
  }
```
エラーの内容はaxiosモジュールのform-dataが見つからないという内容になります。

# 直前に行った事
Webpackやaxiosのモジュールを最新バージョンにアップデートしました。

# 現状の解決方法
1. エラーが発生した後、webpack watchを解いて再度webpack watchを行う
2. `npm cache verify`でキャッシュを削除
こうすると、エラーが消えますが、何度かコードを実行したり、時間が経過するとまた同じエラーが発生します。

# 質問
エラーの発生するようになった原因は、モジュールのアップデートにあるように思えます。
検索していますが、axiosでform-data.jsが見つからないというケースは見当たらず困っております。

怪しい部分などご指摘お願い致します。

## 追記
下記を試しましたが、エラーは解消されませんでした。
`rm -rf package-lock.json node_modules/`を行い、`npm install`

webpack
```Javascript
import { Configuration } from 'webpack';
const AwsSamPlugin = require("aws-sam-webpack-plugin");
const awsSamPlugin = new AwsSamPlugin();

const config: Configuration = {
  entry: awsSamPlugin.entry(),
  output: {
    filename: "[name]/app.js",
    libraryTarget: "commonjs2",
    path: __dirname + "/.aws-sam/build/"
  },
  devtool: "source-map",
  resolve: {
    extensions: [".ts", ".js", ".json"]
  },
  target: "node",
  externals: process.env.NODE_ENV === "development"
    ? ["chrome-aws-lambda","@google-cloud/bigquery", "sharp"]
    : ["aws-sdk","chrome-aws-lambda","@google-cloud/bigquery","sharp"],
  mode: process.env.NODE_ENV || "production",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "ts-loader",
      }
    ]
  },
  plugins: [
    awsSamPlugin
  ],
}

export default config
```

tsconfig
```JSON
{
  "compilerOptions": {
    "target": "es2019",
    "module": "commonjs",
    "allowJs": true,
    "strict": true,  
    "esModuleInterop": true,
    "rootDir": ".",
    "outDir": "./built",
    "sourceMap": true
  },
  "include": [
    "./src/**/*"
  ],
}
```

モジュールのビルドが失敗する。

## 知りたいこと

今主流のタスクランナーは何ですか?

## 背景、状況

数年ぶりにWebサイトを作ろうと思ってます｡
当時タスクランナーとしてGULPを使ってVS CODEで開発していました｡
これでCSSを監視して自動でSASSにコンパイルしたり､Live Serverを立ち上げてPHPのファイルも見れるようにしたり､HTMLやCSSなどの各種ファイルを監視して更新があると自動でブラウザを更新をいれたりしていました｡
調べてみたら今はもうGulpは主流じゃないようですが､現在はタスクランナーは何が主流なんでしょうか？
Webpackというのも古いらしく､これまで私がGulpで使っていた各機能を何で使えばいいと思いますか?

## 調査したこと・試したこと
検索しました｡
WebpackというのがGulpのあとに主流になったそうですが､もう開発が終わってるそうで､
では次は何なのかというのが検索しても分からないんですよね｡
なので私の用途をみて今ならこれを使え､というのがあったら教えてほしい感じですね｡

今主流のタスクランナーは何ですか?

### 実現したいこと

vue3でComposal Functionを利用して、関数を外部ファイルにして共通化しようとしたところ、
デプロイ(npm run serve)時に、エラーが発生してしまい、解決できません。

グローバル関数を作りたいです。

### 前提

vueのその他コンポーネントファイルは期待通りに動きます。
Vue CLI vue@3.3.4
webpack@5.88.1

### 発生している問題・エラーメッセージ

エラーメッセージ
```webpack
「Cannot read properties of undefined (reading '__vccOpts')
TypeError: Cannot read properties of undefined (reading '__vccOpts')
    at exports.default (webpack-internal:///./node_modules/vue-loader/dist/exportHelper.js:9:22)
    at eval (webpack-internal:/// ～ローカルファイル名のため略～」

```

### 該当のソースコード

関数ファイルたコード
```vue.js
<script>    
import { onMounted } from 'vue'
export function useTestFunction() {
    onMounted(()=>{
        console.log('test');
    })
    return 'test';
}
</script>
```

関数の読み込み側のコード
```vue.js
<template>
test page
</template>
<script setup>
import {useTestFunction} from '../ファイルパス';
const sec = useTestFunction();
console.log(sec);
</script>
```

### 試したこと

エラーメッセージに表示されている、「'__vccOpts'」が何なのかわからず、
調べてみたのですが、型？なのか、原因がわからずにおります。

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

ここにより詳細な情報を記載してください。


Vue3でコンポーザブル関数を作りたいが、エラー「Cannot read properties of undefined (reading '__vccOpts')」が解決できない

動画教材を見ながら、サンプルアプリを開発しています。

教材に則って、webpack-dev-server でローカルにサーバーを立ち上げて確認をしています。
コマンドをうちこみ、サーバーを立ち上げたときに、
```
Project is running at http://localhost:8080/
```
と出てくるので、chromeからアクセスしようとするのですが、
> このページは動作していません
localhost からデータが送信されませんでした。
ERR_EMPTY_RESPONSE

との結果が表示されてしまいます。
こちらはSafariでも同様の結果が返ってきていることを確認しました。

ですが、`127.0.0.1:8080`であればアクセスできていることを確認できました。

これを`localhost`でもアクセスできるようにしたいです。
恐らく、過去の自分がローカル環境を変更したのかと思っているのですが、どこをいじったかは分かっておりません。
また、こういったトラブルが起こった際の、適切な問題の切り分け手順が分かっていないです。

是非ご教示頂けますと幸いです。

宜しくお願いいたします。

localhost:8080 に接続ができない。

node_modulesについて詳しく知りたいです。

私の現状の理解だと、npmなどでインストールした開発に必要なライブラリなどのバージョンの依存関係を管理しているフォルダ群という感じです。

今回質問した経緯としては、https://github.com/liady/webpack-node-externals こちらのリポジトリを見ていて、気になる文面があったからです。

```
Webpack allows you to define externals - modules that should not be bundled.

When bundling with Webpack for the backend - you usually don't want to bundle its node_modules dependencies. This library creates an externals function that ignores node_modules when bundling in Webpack.
(Inspired by the great Backend apps with Webpack series)
--- 

バックエンドをWebpackでバンドルする場合、通常はnode_modulesの依存関係をバンドルしたくありません。このライブラリは、Webpackでバンドルする際にnode_modulesを無視するexternals関数を作成します。
このライブラリは、Webpack でバンドルする際に node_modules を無視する externals 関数を作成します。
```

backendでは依存関係をバンドルしたくないというのはどういうことでしょうか？
フロントエンドでもバンドルしたくないのでは？

稚拙な質問で恐縮ですがお答えいただけると幸いです????‍♂️

node_modulesとは何なのでしょうか？

### 前提

Laravelで自作WEBアプリ開発をしています。
下記記事によると、JavaScript、jQueryを使用する際
**webpack.mix.js**を使用するのがベストだそうですね。

ということで、**webpack.mix.js**を編集しようとしてみました。
しかし、**webpack.mix.js**はどこにも存在しませんでした。

### 参考記事
[Laravelでjavascript、jQueryを使う方法](https://dkssksk.com/laravel-javascript-jquery/)
[Laravel Mixとは？webpackをより便利に、簡単に。Laravel以外でも使えるよ。](https://qiita.com/minato-naka/items/bfc3bbd9a388084e6f17)

### 実現したいこと

- Laravelでwebpack.mix.jsを利用する
- LaravelでJavaScriptを使用する
- （LaravelでjQueryを使用する）



### 該当のソースコード

```package.json
{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@popperjs/core": "^2.10.2",
        "@vitejs/plugin-vue": "^3.0.1",
        "axios": "^1.1.2",
        "bootstrap": "^5.2.1",
        "laravel-vite-plugin": "^0.6.0",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "sass": "^1.32.11",
        "vite": "^3.2.2",
        "vue": "^3.2.37"
    },
    "dependencies": {
        "jquery": "^3.6.1"
    }
}

```

【Laravel】webpack.jsが存在しない

### 前提・実現したいこと

vue.jsでwebシステムの開発を行っています。
昨日からnpm run serveを実行すると下記のエラーが表示されます。
何かわかることがあればご指摘お願い致します。

### 発生している問題・エラーメッセージ

```
'vue-cli-service' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! reportsystem@0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the reportsystem@0.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional log
ging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Demo\AppData\Roaming\npm-cache\_logs\2019-10-25T08_39_37_0
12Z-debug.log
```

### 該当のソースコード

```
ソースコード
```

### 試したこと

思い当たることとして直前に copy-webpack-plugin のインストールを行っていたため当該プラグインの削除を行いました。
またnode.jsとnpmのバージョンアップを行ってみました。
node.js : 10.16.0 → 12.13.0
npm : 4.0.5 → 6.12.0

### 補足情報（FW/ツールのバージョンなど）
package.jsonは以下の通りです。

{
  "name": "reportsystem",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "element-ui": "^2.4.5",
    "firebase": "^6.2.0",
    "firebase-admin": "^8.3.0",
    "moment": "^2.24.0",
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-plugin-eslint": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-cli-plugin-element": "^1.0.1",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}