React-diagrams: Module not found: Can't resolve '../Application' , Trying to integrate large application demo intro an already existing react app

[radman22]

Hello ,

Lets set the context of the application before telling the issue , I have a mern authentication app which logs in into a dashboard . A dashboard will be basically an app similar to the large application demo in the advance techniques of storm react diagrams , I am trying to embed the code into dashboard code of mine but it is giving me an two import errors

1) Module not found: Can't resolve '../Application'
2) Module not found: Can't resolve "./TrayItemWidget"

As far as my research says that my dependencies are not added properly in my package.json file , the proposed code is

import * as React from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { logoutUser } from "../../actions/authActions";
import * as _ from "lodash";
import { TrayWidget } from "./TrayWidget";
import { Application } from "../Application";
import { TrayItemWidget } from "./TrayItemWidget";
import { DefaultNodeModel, DiagramWidget } from "storm-react-diagrams";

export interface BodyWidgetProps {
    app: Application;
}

ex_port interface BodyWidgetState {}

class Dashboard extends React.Component<BodyWidgetProps, BodyWidgetState> {
  constructor(props: BodyWidgetProps) {
        super(props);
        this.state = {};
    }
  onLogoutClick = e => {
    e.preventDefault();
    this.props.logoutUser();
  };
render() {
    const { user } = this.props.auth;
return (
  <div className="body">

                <div className="header">
                    <div className="title">Storm React Diagrams - Demo 5</div>
                </div>
                <div className="content">
                    <TrayWidget>
                        <TrayItemWidget model={{ type: "in" }} name="In Node" color="rgb(192,255,0)" />
                        <TrayItemWidget model={{ type: "out" }} name="Out Node" color="rgb(0,192,255)" />
                    </TrayWidget>
                    <div
                        className="diagram-layer"
                        onDrop={event => {
                            var data = JSON.parse(event.dataTransfer.getData("storm-diagram-node"));
                            var nodesCount = _.keys(
                                this.props.app
                                    .getDiagramEngine()
                                    .getDiagramModel()
                                    .getNodes()
                            ).length;

                            var node = null;
                            if (data.type === "in") {
                                node = new DefaultNodeModel("Node " + (nodesCount + 1), "rgb(192,255,0)");
                                node.addInPort("In");
                            } else {
                                node = new DefaultNodeModel("Node " + (nodesCount + 1), "rgb(0,192,255)");
                                node.addOutPort("Out");
                            }
                            var points = this.props.app.getDiagramEngine().getRelativeMousePoint(event);
                            node.x = points.x;
                            node.y = points.y;
                            this.props.app
                                .getDiagramEngine()
                                .getDiagramModel()
                                .addNode(node);
                            this.forceUpdate();
                        }}
                        onDragOver={event => {
                            event.preventDefault();
                        }}
                    >
                        <DiagramWidget className="srd-demo-canvas" diagramEngine={this.props.app.getDiagramEngine()} />
                    </div>
                </div>
            </div>
    );
  }
}
Dashboard.propTypes = {
  logoutUser: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
  auth: state.auth
});
export default connect(
  mapStateToProps,
  { logoutUser }
)(Dashboard);

My package.json file is

{
  "name": "humit-react-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.18.0",
    "classnames": "^2.2.6",
    "jwt-decode": "^2.2.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-redux": "^7.0.3",
    "react-router-dom": "^5.0.0",
    "react-scripts": "3.0.0",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "storm-react-diagrams": "^5.2.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:5000",
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Can somebody guide me that what dependencies I am missing , am I making a complete structure mistake , any additional requirements are need to be added to make this demo work. I am having difficulty understanding the structure of the code

[orionpax00]

create webpack.config.js file and add
{
resolve: {
extensions: [".js", ".json", ".ts", ".tsx"],
},
}

for more visit here