Widget.react doesn't work in a function call

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

        ui.dialog('React custom components')

seems to fail.

It works in info panel though

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:


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')

//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.

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

1 Like