Recieve error when referencing 'gojs/extensionsTS/RadialLayout' from ReactJS Project

@dangerdarren wrote:

Hi, I receive a error when referencing ‘gojs/extensionsTS/RadialLayout’ from ReactJS Project.

The error is Error: Cannot find module ‘…/release/go’.

I’ve seen some references to fix similar issues with a leading “./” in the import, but that doesn’t work for me (probably because I’m not using typescript).

My code looks like this :

import React, { Component } from 'react';
import './diagram.css';
import '../go-figures';
import go from 'gojs/release/go';
import { RadialLayout } from 'gojs/extensionsTS/RadialLayout';


export class RadialDiagram extends Component {

    constructor(props) {
        super(props);
       
        document.title = "Blah"
        var $ = go.GraphObject.make;  // for conciseness in defining templates
        var myDiagram =
            $(go.Diagram, "myDiagramDiv", // must be the ID or reference to div
                {
                    initialAutoScale: go.Diagram.Uniform,
                    padding: 10,
                    isReadOnly: true,
                    layout: $(RadialLayout, {
                        maxLayers: 2,
                        rotateNode: function (node, angle, sweep, radius) {
                            // rotate the nodes and make sure the text is not upside-down
                            node.angle = angle;
                            var label = node.findObject("TEXTBLOCK");
                            if (label !== null) {
                                label.angle = ((angle > 90 && angle < 270 || angle < -90) ? 180 : 0);
                            }
                        },
                        commitLayers: function () {
                            // optional: add circles in the background
                            // need to remove any old ones first
                            var diagram = this.diagram;
                            var gridlayer = diagram.findLayer("Grid");
                            var circles = new go.Set(/*go.Part*/);
                            gridlayer.parts.each(function (circle) {
                                if (circle.name === "CIRCLE") circles.add(circle);
                            });
                            circles.each(function (circle) {
                                diagram.remove(circle);
                            });
                            // add circles centered at the root
                            var $ = go.GraphObject.make;  // for conciseness in defining templates
                            for (var lay = 1; lay <= this.maxLayers; lay++) {
                                var radius = lay * this.layerThickness;
                                var circle =
                                    $(go.Part,
                                        { name: "CIRCLE", layerName: "Grid" },
                                        { locationSpot: go.Spot.Center, location: this.root.location },
                                        $(go.Shape, "Circle",
                                            { width: radius * 2, height: radius * 2 },
                                            { fill: "rgba(200,200,200,0.2)", stroke: null }));
                                diagram.add(circle);
                            }
                        }
                    }),
                    "animationManager.isEnabled": false
                });  
    }

    componentDidMount() {
        var self = this;
  
    }

    buildDiagramTemplates() {
        var self = this;
    }

    render() {
        return (
            <div>
                Radial Diagram
           <div id="myDiagramDiv" style={{ border: "solid 1px black", background: "white", width: "100 %", height: "600px" }}></div>
            </div>
        );
    }
}

Posts: 5

Participants: 2

Read full topic