laravel/uiを利用した際に発生したエラーの解決
現在、Laravel(ver6.20.9)を使って、個人でWebサービスを制作している者です。
Laravel6.xからBootstrapやVueなどがデフォルトでは含まれなくなったそうなので、それらをLaravelで使えるようにしてくれる「laravel/ui」をダウンロードすることにしました。
しかし、その過程で出たエラーに詰まったのでメモしていきたいと思います。
(といっても非常に簡単なことでした。笑)
laravel/uiのダウンロード
laravel/uiのダウンロードについては、以下を参考にしました。
laravel/uiの公式ドキュメント
Laravel/UIのインストール(Qiita記事)
自分なりに手順をまとめると、
①cdコマンドで、laravel/uiを利用したいディレクトリまで移動
②composer require laravel/ui "1.x" --dev
(composer必須)
③php artisan ui bootstrap
(Bootstrapを使う場合)
php artisan ui vue
(Vueを使う場合)
php artisan ui react
(Reactを使う場合)
④npm install
⑤npm run dev
②の"1.x"部分については、以下の表を参考にご自身のLaravelのバージョンに合わせて変えてください。
laravel/uiのバージョン | Laravelのバージョン |
---|---|
1.x | 5.8、6.x |
2.x | 7.x |
3.x | 8.x |
④と⑤については、Node.jsのパッケージを管理するNPM(Node Package Manager)を利用しています。
④npm installにより、用意されている便利な機能(パッケージ)をインストールすることができ、⑤でwebpack.mix.jsというファイル内に書いてある指示を実行できるようです。
ここでエラーが…
先ほどの手順④を実行した時に
(中略)
found 1 high severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
ん? 何か出てきた。
日本語訳してみると
「1つの重要度の高い脆弱性が見つかりました。npm audit fix
でこれらを修正してください。また、npm audit
で詳細を確認できます」
とのことです。
そこで、指示通り「npm audit fix」を実行すると、
% npm audit fix
+ [email protected]
added 1 package from 3 contributors and updated 1 package in 5.855s
51 packages are looking for funding
run `npm fund` for details
fixed 1 of 1 vulnerability in 1096 scanned packages
無事解決できたようです。
「あ〜よかった」と思ったのも束の間、手順⑤の「npm run dev」を実行したところ…
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.context: The provided value "/Users/ユーザー名/Laravel_CRUD/Atsumare!" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
-> The base directory (absolute path!) for resolving the `entry` option. If `output.pathinfo` is set, the included pathinfo is shortened to this directory.
- configuration.module.rules[8].exclude should be one of these:
RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? } | [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
-> One or multiple rule conditions
Details:
* configuration.module.rules[7].exclude[0]: The provided value "/Users/ユーザー名/Laravel_CRUD/Atsumare!/resources/sass/app.scss" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
* configuration.module.rules[7].exclude[0]: The provided value "/Users/ユーザー名/Laravel_CRUD/Atsumare!/resources/sass/app.scss" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
* configuration.module.rules[8].exclude[0]: The provided value "/Users/ユーザー名/Laravel_CRUD/Atsumare!/resources/sass/app.scss" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
* configuration.module.rules[8].exclude[0]: The provided value "/Users/ユーザー名/Laravel_CRUD/Atsumare!/resources/sass/app.scss" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
- configuration.output.path: The provided value "/Users/ユーザー名/Laravel_CRUD/Atsumare!/public" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
-> The output directory as **absolute path** (required).
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/ユーザー名/.npm/_logs/2021-01-xxTxx_xx_xx_135Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/ユーザー名/.npm/_logs/2021-01-xxTxx_xx_xx_168Z-debug.log
なんか赤い字でいっぱい出てきた!
ここで僕は少し詰まってしまいましたが、ある記事を見つけました。
Shawn Dhaveさんの回答を引用します。
Had the same error. The problem seems to be in the path of your folder. It must not contain an exclamation mark(!). Change folder 'HelloWorld!' to just 'HelloWorld' without the exclamation mark.
Hope this solves the problem.
日本語訳すると
「自分も同じエラーを経験したよ。
フォルダーのパスに問題があるように見えるね。フォルダーのパスに感嘆符(!)を含めたらいけないんだ。だから、フォルダー名を『HelloWorld!』じゃなくて、感嘆符のない『HelloWorld』だけに変えてみて。これが解決策になりますように」
になります。
ん?
フォルダー名に「!」をつけたらだめ?
pwdコマンドで自分のフォルダ名(パス)を確認してみます。
/Users/ユーザー名/Laravel_CRUD/Atsumare!
つけてんじゃん!!
僕は「Atsumare!(あつまれ!)」という名前で募集掲示板型のサービスを作ろうとしており、それに合わせてフォルダー名も「Atsumare!」にしていたのですが…
どうやらそれがエラーの原因になっていたようです。
というわけで、「「Atsumare!」を「Atsumare」に修正しました。
そして⑤の「npm run dev」を実行すると…
> @ dev /Users/ユーザー名/Laravel_CRUD/Atsumare
> npm run development
> @ development /Users/ユーザー名/Laravel_CRUD/Atsumare
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js
DONE Compiled successfully in 7151ms 16:36:11
Asset Size Chunks Chunk Names
/css/app.css 178 KiB /js/app [emitted] /js/app
/js/app.js 1.08 MiB /js/app [emitted] /js/app
無事実行できました!!
教訓
「フォルダー名(ディレクトリ名)に「感嘆符(!)」をつけるのはやめましょう」
という教訓でした😅
皆様もお気をつけて!
Author And Source
この問題について(laravel/uiを利用した際に発生したエラーの解決), 我々は、より多くの情報をここで見つけました https://qiita.com/H-Iida/items/16ddcd824b3105bdf4cd著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .