nomcopter / react-mosaic

A React tiling window manager

Home Page:https://nomcopter.github.io/react-mosaic/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Installation Trouble

rsomani95 opened this issue · comments

Bug report

Hello, I'm new to javascript so please excuse my naivete in advance. Very excited to try out react-mosaic.
I was having trouble installing after having set up a fresh react app environment. I'm not sure if the issue is with this repo or some other package. Any guidance would be much appreciated.

  • Package version(s): react@17.0.2, react-mosaic latest version (attemped)
  • Browser and OS versions: macOS Catalina 10.15.5, Chrome Version 90.0.4430.93

Steps to reproduce

  1. npx create-react-app new-proj --template typescript
  2. cd new-proj
  3. npm add react-mosaic-component

Actual behavior

Full error log
# npm resolution error report

2021-05-12T14:16:10.519Z

Found: react@17.0.2
node_modules/react
  peer react@"*" from @testing-library/react@11.2.6
  node_modules/@testing-library/react
    @testing-library/react@"^11.2.6" from the root project
  peer react@"17.0.2" from react-dom@17.0.2
  node_modules/react-dom
    peer react-dom@"*" from @testing-library/react@11.2.6
    node_modules/@testing-library/react
      @testing-library/react@"^11.2.6" from the root project
    react-dom@"^17.0.2" from the root project
  peer react@">= 16" from react-scripts@4.0.3
  node_modules/react-scripts
    react-scripts@"4.0.3" from the root project
  react@"^17.0.2" from the root project
  peer react@"16 - 18" from react-mosaic-component@5.0.0
  node_modules/react-mosaic-component
    react-mosaic-component@"*" from the root project
  peer react@">= 16.14" from react-dnd@14.0.2
  node_modules/react-dnd
    react-dnd@"^14.0.2" from react-mosaic-component@5.0.0
    node_modules/react-mosaic-component
      react-mosaic-component@"*" from the root project

Could not resolve dependency:
peer react@"^16.13" from react-dnd-multi-backend@6.0.2
node_modules/react-mosaic-component/node_modules/react-dnd-multi-backend
  react-dnd-multi-backend@"^6.0.2" from react-mosaic-component@5.0.0
  node_modules/react-mosaic-component
    react-mosaic-component@"*" from the root project

Fix the upstream dependency conflict, or retry
this command with --force, or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

Raw JSON explanation object:

{
  "code": "ERESOLVE",
  "current": {
    "name": "react",
    "version": "17.0.2",
    "location": "node_modules/react",
    "dependents": [
      {
        "type": "peer",
        "name": "react",
        "spec": "*",
        "from": {
          "name": "@testing-library/react",
          "version": "11.2.6",
          "location": "node_modules/@testing-library/react",
          "dependents": [
            {
              "type": "prod",
              "name": "@testing-library/react",
              "spec": "^11.2.6",
              "from": {
                "location": "/Users/rahulsomani/git/zz-react"
              }
            }
          ]
        }
      },
      {
        "type": "peer",
        "name": "react",
        "spec": "17.0.2",
        "from": {
          "name": "react-dom",
          "version": "17.0.2",
          "location": "node_modules/react-dom",
          "dependents": [
            {
              "type": "peer",
              "name": "react-dom",
              "spec": "*",
              "from": {
                "name": "@testing-library/react",
                "version": "11.2.6",
                "location": "node_modules/@testing-library/react",
                "dependents": [
                  {
                    "type": "prod",
                    "name": "@testing-library/react",
                    "spec": "^11.2.6",
                    "from": {
                      "location": "/Users/rahulsomani/git/zz-react"
                    }
                  }
                ]
              }
            },
            {
              "type": "prod",
              "name": "react-dom",
              "spec": "^17.0.2",
              "from": {
                "location": "/Users/rahulsomani/git/zz-react"
              }
            }
          ]
        }
      },
      {
        "type": "peer",
        "name": "react",
        "spec": ">= 16",
        "from": {
          "name": "react-scripts",
          "version": "4.0.3",
          "location": "node_modules/react-scripts",
          "dependents": [
            {
              "type": "prod",
              "name": "react-scripts",
              "spec": "4.0.3",
              "from": {
                "location": "/Users/rahulsomani/git/zz-react"
              }
            }
          ]
        }
      },
      {
        "type": "prod",
        "name": "react",
        "spec": "^17.0.2",
        "from": {
          "location": "/Users/rahulsomani/git/zz-react"
        }
      },
      {
        "type": "peer",
        "name": "react",
        "spec": "16 - 18",
        "from": {
          "name": "react-mosaic-component",
          "version": "5.0.0",
          "location": "node_modules/react-mosaic-component",
          "dependents": [
            {
              "type": "prod",
              "name": "react-mosaic-component",
              "spec": "*",
              "from": {
                "location": "/Users/rahulsomani/git/zz-react"
              }
            }
          ]
        }
      },
      {
        "type": "peer",
        "name": "react",
        "spec": ">= 16.14",
        "from": {
          "name": "react-dnd",
          "version": "14.0.2",
          "location": "node_modules/react-dnd",
          "dependents": [
            {
              "type": "prod",
              "name": "react-dnd",
              "spec": "^14.0.2",
              "from": {
                "name": "react-mosaic-component",
                "version": "5.0.0",
                "location": "node_modules/react-mosaic-component",
                "dependents": [
                  {
                    "type": "prod",
                    "name": "react-mosaic-component",
                    "spec": "*",
                    "from": {
                      "location": "/Users/rahulsomani/git/zz-react"
                    }
                  }
                ]
              }
            }
          ]
        }
      }
    ]
  },
  "currentEdge": null,
  "edge": {
    "type": "peer",
    "name": "react",
    "spec": "^16.13",
    "error": "INVALID",
    "from": {
      "name": "react-dnd-multi-backend",
      "version": "6.0.2",
      "location": "node_modules/react-mosaic-component/node_modules/react-dnd-multi-backend",
      "dependents": [
        {
          "type": "prod",
          "name": "react-dnd-multi-backend",
          "spec": "^6.0.2",
          "from": {
            "name": "react-mosaic-component",
            "version": "5.0.0",
            "location": "node_modules/react-mosaic-component",
            "dependents": [
              {
                "type": "prod",
                "name": "react-mosaic-component",
                "spec": "*",
                "from": {
                  "location": "/Users/rahulsomani/git/zz-react"
                }
              }
            ]
          }
        }
      ]
    }
  },
  "peerConflict": null,
  "strictPeerDeps": false,
  "force": false
}

I have a similar issue:

Module not found: Can't resolve 'react/jsx-runtime' in '/Users/conwayying/programming/projects/lifemap/node_modules/react-dnd/dist/esm/core'

@rsomani95 Such error may be caused from low npm version.
Can you tell me you npm version? You can also try updating to latest LTS version

@promet99 I tried with npm v7.12
I see 7.13 is available, I'll try with that and report back

@promet99 still getting the same error with 7.13

@rsomani95 whoa, my mistake. I meant NodeJS version. I hope its version is also latest LTS.

Some problem seems to be in peer dependency version of this module's dependency...

For the time being install yarn and try the following

  1. delete yarn.lock and npm_modules dir
  2. yarn add react-mosaic-component

Same error. Looks like it's an issue with the peer dependencies declared from react-dnd-multi-backend and react-dnd-preview version 6.0.2. See https://github.com/LouisBrunner/dnd-multi-backend/blob/v6.0.2/packages/react-dnd-preview/package.json#L23

Is this causing any issues in practice? Or just warnings on install? Peer dependency errors are a pretty common (albeit obnoxious) issue.

Might be worth trying with "react": "^16" in your dependencies