困っていること
react-draggableというパッケージを既存のReactのプロジェクトにnpmインストールしようとするとエラーが発生してインストールできず困っております。
教えていただきたいこと
- react-draggable(の安定動作版)をインストールする方法。
- なぜインストールできないのか。
やったこと
実行コマンド
下記のコマンドを実行しました。
npm install react-draggable
この際にエラーが発生しました。
エラーメッセージは「エラーメッセージ」で後述しております。
その他事前に行った関連していると思われる事象
エラーメッセージに出ている^4.0.0-alpha.57
は、以前にインストール、手を入れた@material-ui/lab
のバージョンなのでそれが関係していると思われます。
手を入れた理由は、package.json
のバージョンが*
のままだとGitHub Actionsのビルド時にエラーが起きてしまっていたからです。
変更内容は下記です。
package.json
"@material-ui/lab": "*", // 変更前(インストール時)
"@material-ui/lab": "^4.0.0-alpha.57",// 変更後
package-lock.json
"version": "4.0.0-alpha.57", // 変更前(インストール時)
"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
参考資料リンク
以上です。
よろしくお願い申し上げます。