

# 困っていること

react-
draggableというパッケージを既存のReactのプロジェクトにnpmインストールしようとするとエラーが発生してインストールできず困っております。

# 教えていただきたいこと

  1. react-draggable（の安定動作版）をインストールする方法。
  2. なぜインストールできないのか。

# やったこと

### 実行コマンド

下記のコマンドを実行しました。  
`npm install react-draggable`

この際にエラーが発生しました。  
エラーメッセージは「エラーメッセージ」で後述しております。

### その他事前に行った関連していると思われる事象

エラーメッセージに出ている`^4.0.0-alpha.57`は、以前にインストール、手を入れた`@material-
ui/lab`のバージョンなのでそれが関係していると思われます。  
手を入れた理由は、`package.json`のバージョンが`*`のままだとGitHub Actionsのビルド時にエラーが起きてしまっていたからです。  
変更内容は下記です。

package.json

[code]

        "@material-ui/lab": "*", // 変更前（インストール時）
        "@material-ui/lab": "^4.0.0-alpha.57",// 変更後
    
[/code]

package-lock.json

[code]

          "version": "4.0.0-alpha.57", // 変更前（インストール時）
          "version": "^4.0.0-alpha.57",// 変更後
    
[/code]

# エラーメッセージ

※プロジェクト名は`{プロジェクト名}`、ユーザーネームは`{ユーザー名}`に置き換えています。

VSCodeのターミナル

[code]

    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
    
[/code]

上記`2021-04-26T06_50_54_272Z-debug.log`の中身

[code]

    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
    
    
[/code]

# 参考資料リンク

  1. [react-draggable](https://www.npmjs.com/package/react-draggable)
  2. [@material-ui/lab  
](https://www.npmjs.com/package/@material-ui/lab)

以上です。  
よろしくお願い申し上げます。


CC BY-SA 4.0
2021-04-26T07:16:47.013
75511
2023-07-16T17:04:15.500
32521
question
reactjs npm material-ui
react-draggableのnpmインストール時にエラーが発生してインストールできない。


根本的な解決ではなく副次的問題が発生しますが、表題の問題は解決するということで下記で対応しました。  
より良い解決策・原因の解明を引き続き募集いたします。

# 行ったこと

  1. `@material-ui/lab`を`npm uninstall @material-ui/lab`でアンインストール
  2. `react-draggable`を`npm install react-draggable`でインストール
  3. `@material-ui/lab`を`npm install @material-ui/lab`で再インストール

# 懸念事項

`@material-ui/lab`のパッケージ指定を`*`から変えたのはGitHub Actionsの`npm ci && npm run
build`でエラーが発生するからだったので、上記手法だとGitHub Actionsで再びエラーが発生するようになる。

エラー内容は下記。

[code]

    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.
    
[/code]


CC BY-SA 4.0
2021-04-26T08:30:08.650
75513
2021-04-26T08:30:08.650
32521
75511
answer