現在、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

+ axios@0.21.1
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

無事実行できました！！

教訓

「フォルダー名（ディレクトリ名）に「感嘆符（！）」をつけるのはやめましょう」

という教訓でした😅

皆様もお気をつけて！