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

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>
        );
    }
}

I don’t think that is valid syntax. But it should work if you write something like:

import * as go from 'gojs';
import { RadialLayout } from './RadialLayout';

if you move RadialLayout.js to that directory.

By the way, you should surround your code with single lines consisting only of three backquotes. See how I edited your post.

Hi Walter,

Thanks for the fast response. Did not work for me - now I get this error.

The TypeScript files in extensionsTS have been compiled with a UMD target. If you are expecting to use ES6 modules, you’ll need to change the tsconfig.json file to target ES6, and then use that result.

Normally we expect people to copy extensions into their own project so that they can modify and/or compile them as appropriate for their project.