$ yarn add swiper が出来ない

Question

質問内容・実現したいこと

swiper機能の導入を行いたいです。

$ yarn add swiper 実行時にエラーが起きました。

$ yarn install 実行時も同様のエラー

$ yarn upgrade 実行するも同様のエラー

$ yarn -v        
1.22.10

$ Node -v  
v16.4.1

端末

mac book air 2018 バージョン11.6

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

$ yarn add swiper

yarn add v1.22.10
[1/5] ????  Validating package.json...
[2/5] ????  Resolving packages...
[3/5] ????  Fetching packages...
[4/5] ????  Linking dependencies...
warning " > @babel/preset-react@7.8.3" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-display-name@7.8.3" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-jsx@7.8.3" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-jsx-self@7.8.3" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-jsx-source@7.8.3" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-jsx > @babel/plugin-syntax-jsx@7.8.3" has unmet peer dependency "@babel/core@^7.0.0-0".
warning " > compression-webpack-plugin@1.1.12" has unmet peer dependency "webpack@^2.0.0 || ^3.0.0 || ^4.0.0".
warning " > extract-text-webpack-plugin@3.0.2" has unmet peer dependency "webpack@^3.1.0".
warning " > rails-erb-loader@5.5.2" has unmet peer dependency "webpack@^2.0.0 || >= 3.0.0-rc.0 || ^3.0.0".
warning " > sass-loader@6.0.7" has unmet peer dependency "webpack@^2.0.0 || ^3.0.0 || ^4.0.0".
warning " > webpack-manifest-plugin@1.3.2" has unmet peer dependency "webpack@1 || 2 || 3".
warning " > webpack-dev-server@3.10.1" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "webpack-dev-server > webpack-dev-middleware@3.7.2" has unmet peer dependency "webpack@^4.0.0".
[5/5] ????  Building fresh packages...
[1/5] ⠈ fsevents
[-/5] ⠈ waiting...
[3/5] ⠁ node-sass
[-/5] ⠁ waiting...
error /Users/ Command failed.
Exit code: 1
Command: node scripts/build.js
Arguments: 
Directory: node_modules/node-sass
Output:
gyp info it worked if it ends with ok
gyp verb cli [
gyp verb cli   '/usr/local/Cellar/node/16.4.1/bin/node',
gyp verb cli   'ファイル名。。node_modules/node-gyp/bin/node-gyp.js',
gyp verb cli   'rebuild',
gyp verb cli   '--verbose',
gyp verb cli   '--libsass_ext=',
gyp verb cli   '--libsass_cflags=',
gyp verb cli   '--libsass_ldflags=',
gyp verb cli   '--libsass_library='
gyp verb cli ]
gyp info using node-gyp@3.8.0
gyp info using node@16.4.1 | darwin | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "/usr/bin/python" in the PATH
gyp verb `which` succeeded /usr/bin/python /usr/bin/python
gyp verb check python version `/usr/bin/python -c "import sys; print "2.7.16
gyp verb check python version .%s.%s" % sys.version_info[:3];"` returned: %j
gyp verb get node dir no --target version specified, falling back to host node version: 16.4.1
gyp verb command install [ '16.4.1' ]
gyp verb install input version string "16.4.1"
gyp verb install installing version: 16.4.1
gyp verb install --ensure was passed, so won't reinstall if already installed
',
gyp info spawn args   '-Dnode_engine=v8',
gyp info spawn args   '--depth=.',
gyp info spawn args   '--no-parallel',
gyp info spawn args   '--generator-output',
gyp info spawn args   'build',
gyp info spawn args   '-Goutput_dir=.'
gyp info spawn args ]
No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.

gyp: No Xcode or CLT version detected!
gyp ERR! configure error 
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/Users/mark_naito/workspace/runteq/RUNTEQ_advanced/3085_mmmaaarrrkkk000_runteq_curriculum_advanced/node_modules/node-gyp/lib/configure.js:345:16)
gyp ERR! stack     at ChildProcess.emit (node:events:394:28)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
gyp ERR! System Darwin 20.6.0
gyp ERR! command "/usr/local/Cellar/node/16.4.1/bin/node" "/　ファイル名。。node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="node_modules/node-sass
gyp ERR! node -v v16.4.1

何かアドバイスを頂けたら幸いです。

よろしくお願いします。

Answer 1

追加回答

yarn add swiper
を試してみましたが問題なかったです。
環境を見直してみてはいかがでしょう。
PowerBook Pro(intel)
Big Sur 11.6

$ npm list  
nodeapp@1.0.0 /private/tmp/nodeapp
└── (empty)


$ yarn add swiper
yarn add v1.22.15
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 2 new dependencies.
info Direct dependencies
└─ swiper@7.0.8
info All dependencies
├─ dom7@4.0.0
└─ swiper@7.0.8
Done in 2.33s.


$ npm list
nodeapp@1.0.0 /private/tmp/nodeapp
└── swiper@7.0.8

Answer 2

gyp: No Xcode or CLT version detected!

Xcodeのエラーが出てますよ。
エラーメッセージを読まないのですか？

Comments

[mmmaaarrrkkk000]

回答していただきありがとうございます！

gyp: No Xcode or CLT version detected!
バージョンが検出されないので

Xcode Command Line Toolsはインストールされており、最新なようです。でも動きませんので、再インストールを行いました。

```
% xcode-select --install
xcode-select: error: command line tools are already installed, use "Software Update" to install updates

% xcode-select --version
xcode-select version 2373.

% softwareupdate --list
Software Update Tool

Finding available software
No new software available.
```

Xcordのアンインストール、再インストールを行いました。

```
% sudo rm -rf $(xcode-select -print-path)
Password:

% sudo rm -rf /Library/Developer/CommandLineTools

% xcode-select --install
xcode-select: note: install requested for command line developer tools
```

[mmmaaarrrkkk000]

最後に `npm install node-gyp` をインストールを行い
`$ yarn add swiper` を実行するも新たな下記のエラーになります。
エラーを読むもどのように手をつけたらいいかわからない状態でいます。。
エラーに対する対処方法、エラーの読み方などご教授頂けたら幸いです。。

よろしくお願いします。

```
1 warning and 1 error generated.
make: *** [Release/obj.target/binding/src/binding.o] Error 1
gyp ERR! build error
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack at ChildProcess.onExit (/Users/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack at ChildProcess.emit (node:events:394:28)
gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
gyp ERR! System Darwin 20.6.0
gyp ERR! command "/usr/local/Cellar/node/16.4.1/bin/node" "/Users/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd node_modules/node-sass
gyp ERR! node -v v16.4.1
```