laravel/ui를 사용할 때 발생한 오류 해결
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 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
안전하게 실행할 수있었습니다! !
교훈
「폴더명(디렉토리명)에 「느낌표(!)」를 붙이는 것은 그만둡시다」
라는 교훈이었습니다 😅
여러분도 조심해!
Reference
이 문제에 관하여(laravel/ui를 사용할 때 발생한 오류 해결), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/H-Iida/items/16ddcd824b3105bdf4cd
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
①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
방금 전의 순서④를 실행했을 때
터미널
（中略）
found 1 high severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
응? 뭔가 나왔다.
일본어 번역 해 보면
"심각도가 높은 취약점이 1개 발견되었습니다.
라는 것입니다.
그래서, 지시대로 「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
안전하게 실행할 수있었습니다! !
교훈
「폴더명(디렉토리명)에 「느낌표(!)」를 붙이는 것은 그만둡시다」
라는 교훈이었습니다 😅
여러분도 조심해!
Reference
이 문제에 관하여(laravel/ui를 사용할 때 발생한 오류 해결), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/H-Iida/items/16ddcd824b3105bdf4cd
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(laravel/ui를 사용할 때 발생한 오류 해결), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/H-Iida/items/16ddcd824b3105bdf4cd텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
