今回の内容はlaravelにて認証機能を付け加えるにあたり、今までのバージョンと違うにあたり、様々なエラーがありながらも、なんやかんやで全部いけました。
今回はuiインストールから認証機能ができるまでの出来事をアップしていきます。
エラー１、 Could not open input file: artisan
エラー２、 Command "ui" is not defined.
エラー３、 npm install npm rum devで
1 Running: npm install vue-loader@^15.9.7 --save-dev --legacy-peer-deps
2 npm audit
3 Error:
Cannot find module'webpack/lib/rules/DescriptionDataMatcherRulePlugin'
Require stack:
エラー４、 ROGIN REGISTARがない
##エラー１、 Could not open input file: artisan
C:\Users\user\Desktop\laravel>php artisan ui vue --auth
Could not open input file: artisan
【内容】 artisan というファイルが見当たりません。
【原因】 コマンドプロンプトで実装している場所が、間違っていた。
【解決方法】 いったんコマンドプロンプトを終了。もう一度、artisanのファイルがある階層で実施
##エラー２、 Command "ui" is not defined.
階層で実施したら今度は
Command "ui" is not defined.というエラーが生じた。
C:\Users\user\Desktop\laravel\artisanのある階層>php artisan ui vue --auth
Command "ui" is not defined.
【内容】uiが定義されてません。
【原因】uiが入っていない。
【解決方法】composer require laravel/uiを入力する
C:\Users\user\Desktop\laravel\階層のディレクトリ>composer require laravel/ui
Using version ^3.4 for laravel/ui
./composer.json has been updated
Running composer update laravel/ui
Loading composer repositories with package information
Updating dependencies
省略
> @php artisan vendor:publish --tag=laravel-assets --ansi --force
No publishable resources for tag [laravel-assets].
Publishing complete.
よっしゃーー！！うまくいったーー！！
##エラー３ー１ npm install npm rum devでRunning: npm install vue-loader@^15.9.7 --save-dev --legacy-peer-deps
C:\Users\user\Desktop\laravel\階層のディレクトリ>php artisan ui vue
Vue scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.
ui vueは成功、そしてrun "npm install && npm run dev"をやってくださいとのことだったのでやってみたらこんなぎょうさんな注文が返ってきた((+_+))
C:\Users\user\Desktop\laravel\階層ディレクトリ>npm install && npm run dev
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
省略
> development
> mix
Additional dependencies must be installed. This will only take a moment.
Running: npm install vue-loader@^15.9.7 --save-dev --legacy-peer-deps
Finished. Please run Mix again.
なんでも npm install vue-loader@^15.9.7 --save-dev --legacy-peer-depsをやってくださいとのことだったのでやってみたら・・・こんな内容が返ってきました。
##エラー３ー２ Run npm audit for details.
C:\Users\user\Desktop\laravel\階層ディレクトリ>npm install vue-loader@^15.9.7 --save-dev --legacy-peer-deps
up to date, audited 826 packages in 2s
86 packages are looking for funding
run `npm fund` for details
4 moderate severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
今度は、npm audit` をやってとのことです。いろいろと面倒くさいですね((+_+))ってなわけでやってみました。
そしてらこんな感じで現れました。
C:\Users\user\Desktop\laravel\階層ディレクトリ>npm fund
階層ディレクトリ
+-- https://opencollective.com/popperjs
| `-- @popperjs/core@2.11.2
+-- https://opencollective.com/bootstrap
| `-- bootstrap@5.1.3
+-- https://opencollective.com/postcss/
| `-- postcss@7.0.39, autoprefixer@10.4.2, postcss-load-config@3.1.1
+-- https://opencollective.com/webpack
| `-- sass-loader@11.1.1, css-loader@5.2.7, schema-utils@3.1.1, file-loader@6.2.0, html-loader@1.3.2, mini-css-extract-plugin@1.6.2, postcss-loader@6.2.1, style-loader@2.0.0, terser-webpack-plugin@5.3.0, webpack@5.67.0, schema-utils@4.0.0, webpack-dev-middleware@5.3.0
以下、めちゃくちゃ長いので省略
##エラー３－３： Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin'Require stack:
・・・なんかわからん・・・ もういいや、一回run devしたれ！！
C:\Users\user\Desktop\laravel\階層ディレクトリ>npm run dev
> dev
> npm run development
> development
> mix
[webpack-cli] Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin'
Require stack:
- C:\Users\user\Desktop\laravel\階層ディレクトリ\node_modules\vue-loader\lib\plugin-webpack5.js
- C:\Users\user\Desktop\laravel\階層ディレクトリ\node_modules\vue-loader\lib\plugin.js
- C:\Users\user\Desktop\laravel\階層ディレクトリ\node_modules\vue-loader\lib\index.js
- C:\Users\user\Desktop\laravel\階層ディレクトリ\node_modules\laravel-mix\src\components\Vue.js
- C:\Users\user\Desktop\laravel\階層ディレクトリ\node_modules\laravel-mix\src\components\ComponentRegistrar.js
以下、省略
ギャー！！めちゃくちゃ赤文字で怒られてます((+_+))
とりあえず、エラーの内容を見てみよう。
【原因】：Cannot find module ＝ モジュールが見つかりませんとのことです
【対応】：npm update vue-loaderでvueをアップデートするとのことです。
(参考):https://stackoverflow.com/questions/69631437/error-cannot-find-module-webpack-lib-rules-descriptiondatamatcherruleplugin-r
てなわけで、
C:\Users\user\Desktop\laravel\階層ディレクトリ>npm update vue-loader
changed 1 package, and audited 826 packages in 2s
86 packages are looking for funding
run `npm fund` for details
4 moderate severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
またnpm auditをやってとのことでやってみたが、いまいち何が変わったのかわからなかったが、とりあえずもう一度 npm run devをやってみた。
C:\Users\user\Desktop\laravel\階層ディレクトリ>npm run dev
> dev
> npm run development
> development
> mix
● Mix █████████████████████████ emitting (95%)
emit
● Mix █████████████████████████ done (99%) plugins
省略
✔ Compiled Successfully in 4744ms
┌────────────────────────────────────────────────────────────────────────────────────────────────────────────┬─────────┐
│ File │ Size │
├────────────────────────────────────────────────────────────────────────────────────────────────────────────┼─────────┤
│ /js/app.js │ 1.2 MiB │
│ css/app.css │ 202 KiB │
└────────────────────────────────────────────────────────────────────────────────────────────────────────────┴─────────┘
webpack compiled successfully
やっとこさ成功しました((+_+))
では、ログイン機能がlaravelを開いたときにあるかチェックだ！！
エラー４： ROGIN REGISTARがない
あれ！！ない！！！！((+_+))
よくよく考えたらui vue --authにしてなかった。再度入力
【原因】--authを入力してない
【解決方法】 再度入力した。
C:\Users\user\Desktop\laravel\階層ディレクトリー>php artisan ui vue --auth
Vue scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.
Authentication scaffolding generated successfully.
これでうまくいきました。
あー久しぶりにやるとビビり連発でしたね。
またエラー時に遭ったことなど初級者がヒョエーと思うところをアップしていきます。
ではまた(^^)/