REACT print function does not work

[Hirn]

I have a small example where you can see that the print and export functions do not work. When I call them from this example, nothing happens and there are no errors and warnings in the debugger console.
While researching HTML in the debugger, I noticed that a print preview window is being created, but it is not visible. If I set it visible and click on the "print" button, then nothing happens.

Version SNAPSHOT_v13.1d_2024-05-23/Pro

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(
  <App/>
);

App.jsx

import React, { Component } from 'react';
import 'smartclient-pro/release';
import 'smartclient-pro/skins/Graphite';
import { VLayout, DataSource, DSField, ListGrid, LGField, HLayout, Button } from 'smartclient-pro/react';
class App extends Component {
  constructor(param) {
    super(param);
  };
  countryData = [
    {
      continent: 'North America',
      countryName: 'United States',
      countryCode: 'US',
      area: 9631420,
      population: 298444215,
      gdp: 12360,
      independence: new Date(1776, 6, 4),
      government: 'federal republic',
      government_desc: 2,
      capital: 'Washington, DC',
      member_g8: true,
      article: 'http://en.wikipedia.org/wiki/United_states'
    },
    {
      continent: 'Asia',
      countryName: 'China',
      countryCode: 'CH',
      area: 9596960,
      population: 1313973713,
      gdp: 8859,
      government: 'Communist state',
      government_desc: 0,
      capital: 'Beijing',
      member_g8: false,
      article: 'http://en.wikipedia.org/wiki/China'
    }
  ];
  showPrintPreview = function () {
    window.isc.Canvas.showPrintPreview(window.countryList);
  }
  exportContent = function () {
    window.isc.Canvas.showPrintPreview(window.countryList);
    var oldAlternateRecordStyles = window.countryList.alternateRecordStyles;
    var oldAlternateFieldStyles = window.countryList.alternateFieldStyles;
    window.countryList.setProperties({
      alternateRecordStyles: true,
      alternateFieldStyles: false
    });
    var settings = {
      skinName: 'Tahoe',
      exportFilename: 'export'
    };
    window.isc.RPCManager.exportContent(window.printContainer, settings);
    window.countryList.delayCall('setProperties', [{
      alternateRecordStyles: oldAlternateRecordStyles,
      alternateFieldStyles: oldAlternateFieldStyles
    }], 300);
  }
  render() {
    return (
      <>
        <DataSource ID="countryDS" title="countryDS" clientOnly="true" testData={this.countryData}>
          <fields>
            <DSField name="countryCode" title="Code" />
            <DSField name="countryName" title="Country" />
            <DSField name="capital" title="Capital" />
            <DSField name="continent" title="Continent" />
          </fields>
        </DataSource>
        <VLayout ID="printContainer" membersMargin="15">
          <ListGrid ID="countryList" width="500" height="425" alternateRecordStyles="true" dataSource="countryDS"
            autoFetchData="true" showFilterEditor="true" canEdit="true" editEvent="none"
          >
            <fields>
              <LGField name="countryCode" title="Code" width="50" />
              <LGField name="countryName" title="Country" />
              <LGField name="capital" title="Capital" />
              <LGField name="continent" title="Continent" />
            </fields>
            <gridComponents>
              <value>header</value>
              <value>filterEditor</value>
              <value>body</value>
            </gridComponents>
          </ListGrid>
          <HLayout membersMargin="15" >
            <Button title="print"
              click={this.showPrintPreview}
            />
            <Button title="export"
              click={this.exportContent}
            />
          </HLayout>
        </VLayout>
      </>
    );
  }
}
export default App;

[Isomorphic]

Print preview requires a "helper" page that wasn't accessible via SmartClient in npm. We've updated our npm modules now to install an enhanced module definition for the SmartClient runtime that can properly load such helper pages. If you install version 0.9.22 or later of the npm modules you should pick this up.

As for the export function you also try in this sample, it requires SmartClient server so if you only installed the SmartClient JS runtimes via npm, that's the problem.