projectstorm / react-diagrams

a super simple, no-nonsense diagramming library written in react that just works
https://projectstorm.cloud/react-diagrams
MIT License
8.58k stars 1.17k forks source link

Compilation error - Can't resolve '@emotion/core' in a new React project bootstrapped with Create React App #793

Open sriramsridharanvr opened 3 years ago

sriramsridharanvr commented 3 years ago

I'm trying to follow the documentation and bootstrapped a create-react-app

npx create-react-app react-diagrams-demo

Then, did yarn add @projectstorm/react-diagrams

Added the following imports to my App.js

import createEngine, {
  DefaultLinkModel,
  DefaultNodeModel,
  DiagramModel,
} from "@projectstorm/react-diagrams";

import { CanvasWidget } from "@projectstorm/react-canvas-core";

Then finally, yarn start

Now when I got to http://localhost:3000, I got this error:

./node_modules/@projectstorm/react-canvas-core/dist/es/entities/layer/TransformLayerWidget.js
Module not found: Can't resolve '@emotion/core' in 'D:\Projects\react-diagrams-demo\node_modules\@projectstorm\react-canvas-core\dist\es\entities\layer'

Below is my package.json for your reference

{
  "name": "react-diagrams-demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@projectstorm/react-diagrams": "^6.3.0",
    "@projectstorm/react-diagrams-defaults": "^6.3.0",
    "@projectstorm/react-diagrams-routing": "^6.3.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Am I missing anything in the dependencies?

jwaltgrant commented 3 years ago

@emotion/core is a peer dependency of the project: https://github.com/projectstorm/react-diagrams/blob/63dbe41df017db10212e93b22b282c0f3c363b1b/packages/react-diagrams-defaults/package.json#L36 You should add it (and the other peer dependencies) as dependencies in your project.