projectstorm / react-diagrams

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

Help with Ruby on Rails w/ Webpacker+ReactRails integration #696

Closed danielricecodes closed 4 years ago

danielricecodes commented 4 years ago

I am really excited to tinker with this library, but I am totally lost trying to get it to render properly. Can someone help me figure out why I'm seeing this error?

Black_Mesa

I'm assuming this is why? Uncaught ReferenceError: exports is not defined

Am I missing a dependency? I installed all of the dependencies listed in the help guide.

Here's my package.json file.

{
  "name": "myapp",
  "private": true,
  "dependencies": {
    "@babel/preset-react": "^7.10.4",
    "@emotion/core": "^10.0.28",
    "@emotion/styled": "^10.0.27",
    "@projectstorm/react-diagrams": "^6.2.0",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.2.2",
    "@types/react": "^16.9.45",
    "@types/react-dom": "^16.9.8",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "closest": "^0.0.1",
    "dagre": "^0.8.5",
    "lodash": "^4.17.19",
    "ml-matrix": "^6.5.1",
    "pathfinding": "^0.4.18",
    "paths-js": "^0.4.11",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react_ujs": "^2.6.1",
    "resize-observer-polyfill": "^1.5.1",
    "ts-loader": "^8.0.2",
    "typescript": "^3.9.7"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.0"
  }
}

Workflow Demo component:

import React from "react"
import PropTypes from "prop-types"

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

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

class WorkflowDemo extends React.Component {

  render () {

    const engine = createEngine();
    // node 1
    const node1 = new DefaultNodeModel({
        name: 'Node 1',
        color: 'rgb(0,192,255)',
    });
    node1.setPosition(100, 100);
    let port1 = node1.addOutPort('Out');

    // node 2
    const node2 = new DefaultNodeModel({
        name: 'Node 1',
        color: 'rgb(0,192,255)',
    });
    node2.setPosition(100, 100);
    let port2 = node2.addOutPort('Out');

    // link them and add a label to the link
    const link = port1.link<DefaultLinkModel>(port2);
    link.addLabel('Hello World!');

    const model = new DiagramModel();
    model.addAll(node1, node2, link);
    engine.setModel(model);

    return (
      <React.Fragment>
        <CanvasWidget engine={engine} />
      </React.Fragment>
    );
  }
}

export default WorkflowDemo

Thanks in advance and sorry if this is a total n00b question.

danielricecodes commented 4 years ago

Solution: https://github.com/rails/webpacker/issues/2407#issuecomment-567602071