REAC custom HLayout componet error

[Hirn]

I created custom component inheriting from HLayout and a warning appears in my debugging window, but nothing is visible on the screen

Warning

WARN:HLayoutRight:isc_HLayoutRight_0:Unable to create canvas of type 'undefined' - no such class in runtime. Will default to Canvas.
isc.B.push.isc.A.addToMasterLog @ ISC_Core.js:1449
isc_c_Log_addLogMessage @ ISC_Core.js:1447
isc_c_Log_log @ ISC_Core.js:1440
logMessage @ ISC_Core.js:1429
logWarn @ ISC_Core.js:1429
isc_Canvas_createCanvas @ ISC_Core.js:3631
isc_Canvas_createCanvii @ ISC_Core.js:3633
isc_Layout_createMemberCanvii @ ISC_Foundation.js:273
isc_Layout_initWidget @ ISC_Foundation.js:269
isc_Canvas_init @ ISC_Core.js:3363
isc_Class_completeCreation @ ISC_Core.js:393
isc_c_Class_create @ ISC_Core.js:254
__createSCInstance @ ReactComponent.js:171
_createSCInstance @ ReactComponent.js:159
componentDidMount @ ReactComponent.js:83
commitLayoutEffectOnFiber @ react-dom.development.js:23305
commitLayoutMountEffects_complete @ react-dom.development.js:24688
commitLayoutEffects_begin @ react-dom.development.js:24674
commitLayoutEffects @ react-dom.development.js:24612
commitRootImpl @ react-dom.development.js:26823
commitRoot @ react-dom.development.js:26682
finishConcurrentRender @ react-dom.development.js:25981
performConcurrentWorkOnRoot @ react-dom.development.js:25809
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533

App.js

import React, { Component } from 'react';
import HLayoutRight from './HLayoutRight.js';
import { Button } from 'smartclient-pro/react';
class App extends Component {
  constructor(param) {
    super(param);
  };
  render() {
    return (
      <HLayoutRight >
        <members>
          <Button autoFit="true" title="Button 1" />
          <Button autoFit="true" title="Button 2" />
          <Button autoFit="true" title="Button 3" />
        </members>
      </HLayoutRight>
    );
  }
}
export default App;

HLayoutRight.js

import { SC, ReactComponent, HLayout } from 'smartclient-pro/react';
let isc = window.isc;
SC.defineClass("HLayoutRight", HLayout);
class HLayoutRight extends HLayout {
    static ISC_CLASS_NAME = "HLayoutRight";
    static IS_CLASS = true;
    static NUMERIC_PROPERTIES = {};
    static COMPOUND_PROPERTIES = {};
    constructor(props) {
        super(props);
    }
    render() {
        return null;
    }
}
isc.HLayoutRight.addProperties({
    width: "100%",
    height: 20,
    layoutAlign: "right",
    membersMargin: 2 * 5,
    layoutRightMargin: 2 * 5,
    layoutBottomMargin: 2 * 5
});
Object.defineProperty(HLayoutRight, "name", { value: "HLayoutRight" });
ReactComponent.registerClass("HLayoutRight", HLayoutRight);
SC.customClasses["HLayoutRight"] = HLayoutRight;
export default HLayoutRight;

[Isomorphic]

Our documentation provides an example of extending an existing React wrapper class just to change/add properties as you're doing. Applied to your original code, we have:

App.js:

import React, { Component } from 'react';
import 'smartclient-pro/release';
import 'smartclient-pro/skins/Tahoe';

import HLayoutRight from './HLayoutRight.js';
import { Button } from 'smartclient-pro/react';
class App extends Component {
  constructor(param) {
    super(param);
  };
  render() {
    return (
      <HLayoutRight >
        <members>
          <Button autoFit="true" title="Button 1" />
          <Button autoFit="true" title="Button 2" />
          <Button autoFit="true" title="Button 3" />
        </members>
      </HLayoutRight>
    );
  }
}
export default App;

HLayoutRight.js:

import 'smartclient-pro/release';
import 'smartclient-pro/skins/Tahoe';
import { SC, ReactComponent, HLayout } from 'smartclient-pro/react';

let isc = window.isc;
const HLayoutRight = SC.defineClass("HLayoutRight", HLayout);
isc.HLayoutRight.addProperties({
    width: "100%",
    height: 20,
    layoutAlign: "right",
    membersMargin: 2 * 5,
    layoutRightMargin: 2 * 5,
    layoutBottomMargin: 2 * 5
});
export default HLayoutRight;

There's no need to declare HLayoutRight explicitly as a React component using "class ... extends" syntax with this approach, as SC.defineClass() handles creating HLayoutRight.

If you actually need to define or override methods on the new React component class, then you can declare HLayoutRight following the approach in the second custom component example, but you wouldn't override render() to return null as that would just break the framework rendering of the wrapped widget. You also shouldn't need to append code to HLayoutRight.js copied from the implementation of SC.js.

This shouldn't be needed:

Object.defineProperty(HLayoutRight, "name", { value: "HLayoutRight" });
SC.customClasses["HLayoutRight"] = HLayoutRight;