Q&A困っていること
react-draggableというパッケージを既存のReactのプロジェクトにnpmインストールしようとするとエラーが発生してインストールできず困っております。
教えていただきたいこと
- react-draggable（の安定動作版）をインストールする方法。
- なぜインストールできないのか。
やったこと
実行コマンド
下記のコマンドを実行しました。
npm install react-draggable
この際にエラーが発生しました。
エラーメッセージは「エラーメッセージ」で後述しております。
その他事前に行った関連していると思われる事象
エラーメッセージに出ている^4.0.0-alpha.57は、以前にインストール、手を入れた@material-ui/labのバージョンなのでそれが関係していると思われます。
手を入れた理由は、package.jsonのバージョンが*のままだとGitHub Actionsのビルド時にエラーが起きてしまっていたからです。
変更内容は下記です。
package.json
package.json
1 "@material-ui/lab": "*", // 変更前（インストール時） 2 "@material-ui/lab": "^4.0.0-alpha.57",// 変更後
package-lock.json
package
1 "version": "4.0.0-alpha.57", // 変更前（インストール時） 2 "version": "^4.0.0-alpha.57",// 変更後
エラーメッセージ
※プロジェクト名は{プロジェクト名}、ユーザーネームは{ユーザー名}に置き換えています。
VSCodeのターミナル
MyMacBookAir:｛プロジェクト名｝ {ユーザー名}$ npm install react-draggable npm ERR! Invalid Version: ^4.0.0-alpha.57 npm ERR! A complete log of this run can be found in: npm ERR! /Users/｛ユーザー名｝/.npm/_logs/2021-04-26T06_50_54_272Z-debug.log
上記2021-04-26T06_50_54_272Z-debug.logの中身
0 verbose cli [ 0 verbose cli '/Users/{ユーザー名}/.nodebrew/node/v14.15.5/bin/node', 0 verbose cli '/Users/{ユーザー名}/.nodebrew/current/bin/npm', 0 verbose cli 'install', 0 verbose cli 'react-draggable' 0 verbose cli ] 1 info using npm@7.8.0 2 info using node@v14.15.5 3 timing npm:load:whichnode Completed in 2ms 4 timing config:load:defaults Completed in 2ms 5 timing config:load:file:/Users/{ユーザー名}/.nodebrew/node/v14.15.5/lib/node_modules/npm/npmrc Completed in 4ms 6 timing config:load:builtin Completed in 4ms 7 timing config:load:cli Completed in 2ms 8 timing config:load:env Completed in 0ms 9 timing config:load:file:/Users/{ユーザー名}/Documents/Sandbox/｛プロジェクト名｝/.npmrc Completed in 2ms 10 timing config:load:project Completed in 4ms 11 timing config:load:file:/Users/{ユーザー名}/.npmrc Completed in 5ms 12 timing config:load:user Completed in 5ms 13 timing config:load:file:/Users/{ユーザー名}/.nodebrew/node/v14.15.5/etc/npmrc Completed in 0ms 14 timing config:load:global Completed in 0ms 15 timing config:load:validate Completed in 0ms 16 timing config:load:setEnvs Completed in 2ms 17 timing config:load Completed in 20ms 18 timing npm:load:configload Completed in 20ms 19 timing npm:load:setTitle Completed in 0ms 20 timing npm:load:setupLog Completed in 3ms 21 timing npm:load:cleanupLog Completed in 2ms 22 timing npm:load:configScope Completed in 0ms 23 timing npm:load:projectScope Completed in 1ms 24 timing npm:load Completed in 30ms 25 timing config:load:flatten Completed in 3ms 26 timing arborist:ctor Completed in 1ms 27 timing idealTree:init Completed in 1489ms 28 timing idealTree:userRequests Completed in 4ms 29 silly idealTree buildDeps 30 silly fetch manifest @material-ui/lab@^4.0.0-alpha.57 31 timing arborist:ctor Completed in 0ms 32 http fetch GET 304 https://registry.npmjs.org/@material-ui%2flab 1711ms (from cache) 33 silly fetch manifest @material-ui/core@latest 34 http fetch GET 304 https://registry.npmjs.org/@material-ui%2fcore 103ms (from cache) 35 silly fetch manifest @types/react@^16.8.6 || ^17.0.0 36 http fetch GET 304 https://registry.npmjs.org/@types%2freact 98ms (from cache) 37 silly fetch manifest react@latest 38 http fetch GET 304 https://registry.npmjs.org/react 59ms (from cache) 39 silly fetch manifest react-dom@latest 40 http fetch GET 304 https://registry.npmjs.org/react-dom 59ms (from cache) 41 silly fetch manifest react-draggable@* 42 http fetch GET 304 https://registry.npmjs.org/react-draggable 628ms (from cache) 43 timing idealTree Completed in 4210ms 44 timing command:install Completed in 4238ms 45 verbose stack TypeError: Invalid Version: ^4.0.0-alpha.57 45 verbose stack at new SemVer (/Users/{ユーザー名}/.nodebrew/node/v14.15.5/lib/node_modules/npm/node_modules/semver/classes/semver.js:38:13) 45 verbose stack at compare (/Users/{ユーザー名}/.nodebrew/node/v14.15.5/lib/node_modules/npm/node_modules/semver/functions/compare.js:3:32) 45 verbose stack at Object.gte (/Users/{ユーザー名}/.nodebrew/node/v14.15.5/lib/node_modules/npm/node_modules/semver/functions/gte.js:2:30) 45 verbose stack at Arborist.[canPlaceDep] (/Users/{ユーザー名}/.nodebrew/node/v14.15.5/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:1552:53) 45 verbose stack at Arborist.[placeDep] (/Users/{ユーザー名}/.nodebrew/node/v14.15.5/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:1277:36) 45 verbose stack at /Users/{ユーザー名}/.nodebrew/node/v14.15.5/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:904:46 45 verbose stack at Array.map (<anonymous>) 45 verbose stack at Arborist.[buildDepStep] (/Users/{ユーザー名}/.nodebrew/node/v14.15.5/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:904:8) 45 verbose stack at async Arborist.buildIdealTree (/Users/{ユーザー名}/.nodebrew/node/v14.15.5/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:217:7) 45 verbose stack at async Promise.all (index 1) 46 verbose cwd /Users/{ユーザー名}/Documents/Sandbox/｛プロジェクト名｝ 47 verbose Darwin 20.3.0 48 verbose argv "/Users/{ユーザー名}/.nodebrew/node/v14.15.5/bin/node" "/Users/{ユーザー名}/.nodebrew/current/bin/npm" "install" "react-draggable" 49 verbose node v14.15.5 50 verbose npm v7.8.0 51 error Invalid Version: ^4.0.0-alpha.57 52 verbose exit 1
参考資料リンク
- react-draggable
- [@material-ui/lab
](https://www.npmjs.com/package/@material-ui/lab)
以上です。
よろしくお願い申し上げます。
回答1件
0
根本的な解決ではなく副次的問題が発生しますが、表題の問題は解決するということで下記で対応しました。
より良い解決策・原因の解明を引き続き募集いたします。
行ったこと
@material-ui/labをnpm uninstall @material-ui/labでアンインストールreact-draggableをnpm install react-draggableでインストール@material-ui/labをnpm install @material-ui/labで再インストール
懸念事項
@material-ui/labのパッケージ指定を*から変えたのはGitHub Actionsのnpm ci && npm run buildでエラーが発生するからだったので、上記手法だとGitHub Actionsで再びエラーが発生するようになる。
エラー内容は下記。
npm ERR! cipm can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with `npm install` before continuing. npm ERR! npm ERR! npm ERR! Invalid: lock file's @material-ui/lab@4.0.0-alpha.57 does not satisfy @material-ui/lab@* npm ERR! npm ERR! A complete log of this run can be found in: npm ERR! /home/runner/.npm/_logs/2021-04-26T08_08_31_976Z-debug.log Error: Process completed with exit code 1.
投稿2021/04/26 08:29
総合スコア27
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。