Widget.react doesn't work in a function call

Issues
1

Hi there. I get ReactDOM not defined while trying to call DG.Widget.react(…) from a function context.
Basically

        ui.dialog('React custom components')
            .add(DG.Widget.react(...))
            .show();

seems to fail.

It works in info panel though

2

The reason is that React is not one of the standard dependencies, so it does not get loaded when you simply execute a script (perhaps we can do something about it if there is enough interest). The info panel from the “ReactDemo” works since React is declared as one of the package dependencies: https://github.com/datagrok-ai/public/blob/master/packages/ReactDemo/package.json

By the way, once the info panel is shown once (and React loaded), you can use it from the ad-hoc script as well:

image

3

Yeah, but it seems to me that simply declaring it as dependency is not enough - I’m able to create React component from a function if I use ui.div() and call ReactDOM myself. It’s only DG.Widget.react function that fails. If you call DG.Widget.react from a function in ReactDemo package it will fail as well.

/* Do not change these import lines. Datagrok will import API library in exactly the same manner */
import * as grok from 'datagrok-api/grok';
import * as ui from 'datagrok-api/ui';
import * as DG from "datagrok-api/dg";

import { helloReact } from './hello-react';
import React from "react";
import ReactDOM from "react-dom";

//name: testTypescriptInfo
//tags: panel, widgets
//input: string smiles {semType: Molecule}
//output: widget result
export function testTypescriptInfo(smiles: string) {
    const r = React.createElement(helloReact);
    return DG.Widget.react(r); //works
}

//name testTypescript
//input: string s
export function testTypescript(s: string) {
    const r = React.createElement(helloReact);

    let reactHost = ui.div();
    ReactDOM.render(r, reactHost); //works

    ui.dialog('React custom components')
        .add(reactHost)
        .show();
}

//name testTypescript1
//input: string s
export function testTypescript1(s: string) {

    const r = React.createElement(helloReact);
    const widget = DG.Widget.react(r); // fails
}

I haven’t tried opening info panel first and executing a function second.

4

Got it, so I need to use sources section in the package.json? Disregard my previous message in that case :slight_smile:

1 Like