React ExternalPane in VLayout error

[Hirn]

I created a class inheriting from the External Panel and tried to insert it into VLayout. At the same time, the following error appears

Error: Base class provided for custom class MyPane doesn't appear to be valid. Have you imported or defined it?
    at SC.defineClass (SC.js:44:1)
    at ./src/MyPane.js (MyPane.js:3:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:22:1)
    at fn (hot module replacement:61:1)
    at ./src/App.js (index.js:599:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:22:1)
    at fn (hot module replacement:61:1)
    at ./src/index.js (SaveButton.js:26:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:22:1)
    at startup:7:1
    at startup:7:1

class App.js

import React, { Component } from 'react';
import MyPane from './MyPane.js';
import { VLayout } from 'smartclient-pro/react';

class App extends Component {
  constructor(param) {
    super(param);
  };
  render() {
    return (
      <VLayout width="600%" height="400%">
        <members>
          <MyPane width="500" height="300" title="aaaaaa"/>
        </members>
      </VLayout>
    );
  }
}
export default App;

class MyPane.js

import { SC, ReactComponent, ExternalPane } from 'smartclient-pro/react';
SC.defineClass('MyPane', ExternalPane );
class MyPane extends ExternalPane  {
    static ISC_CLASS_NAME = "MyPane";
    static IS_CLASS = true;
    static NUMERIC_PROPERTIES  =  {};
    static COMPOUND_PROPERTIES = {};
    constructor(props) {
        super(props);
        this.props = props;
    }
    buildPane() {
        return window.isc.Button.create(this.props);
    }
}
Object.defineProperty (MyPane, 'name', {value: 'MyPane'});
ReactComponent.registerClass('MyPane', MyPane);
SC.customClasses["MyPane"] = MyPane;
export default MyPane;

[Isomorphic]

ExternalPane is for when you have a complete SmartClient app that you want to wrap in a React component and use in React. Is this what you were trying to test above? If not, then that isn't the right approach.

If, instead, you wanted to create a new React wrapper class that can be added to a VLayout (for example), you should extend our Canvas wrapper class, using one of the two approaches shown under "Custom Components" in our React documentation.

In any case, it's never required to write into SC.customClasses yourself as you've done. In the first custom component approach, this is done for you by SC.defineClass(), so that SC.importClass() works. In the second approach where you explicitly define the new class in JavaScript via "class MyCanvas extends Canvas ..." then you'd import the class through the normal ES6 JavaScript means after having defined your new class as its own module.

We'll try to clarify some of these points in our React documentation.

[Hirn]

If, instead, you wanted to create a new React wrapper class that can be added to a VLayout (for example), you should extend our Canvas wrapper class, using one of the two approaches shown under "Custom Components" in our React documentation.

Yes, I am interested in how to apply READ components inside SC components. Is it possible in principle? Or should I look for other ways?

[Isomorphic]

When you say "READ" above, was that supposed to say "REACT"? So are you talking about embedding third-party REACT components inside of a VLayout or Canvas, for example?

If not, then you can always access SmartClient components via refs, as explained in the docs.

[Hirn]

When you say "READ" above, was that supposed to say "REACT"?

I made a mistake when I wrote READ. I want to insert the REACT component into the VLayout.

[Isomorphic]

We have a standard method for integrating arbitrary third-party components regardless of technology. Please see our DOM Integration overview. We're going to look into whether we can add this as an automatic behavior for React.

Note that it's usually not a good idea to mix and match components from different sources, unless the component you mean to embed is very difficult to achieve in any other way (say, Google Map, molecular rendering engine, etc). What component are you trying to embed in a Canvas?