Unable to render imported React Component

[Allow2CEO]

Hi Pavan, just hoping for a bit of advice on this, I am not as strong on the javascript import side.

I created my importable library:

const TabContent = require('./Components/TabContent.js');

module.exports = function(context) {

var wemo = {
    TabContent: TabContent
};

return wemo;

}; and TabContent is a react component:

var React = require('react'); var createReactClass = require('create-react-class');

exports = module.exports = createReactClass({ render: function() { return ( React.createElement(div, {}, "yay") ); } }); and then I import it in the render process prior to displaying:

const epm = require('electron-plugin-manager'); const dir = path.join(remote.app.getPath('appData'), 'allow2automate');

export default class Login extends Component { constructor(...args) { super(...args); const plugin = epm.load(dir, 'pluginName", remote.require); this.plugin = plugin({ updateData: function(data) { } }); }

render() { const TabContent = this.plugin.TabContent;

    return (
        <TabContent {...plugin.data} />
    );

but it fails to render with an error:

Uncaught Error: Could not call remote function ''. Check that the function signature is correct. Underlying error: Cannot read property 'length' of undefined

if you examine this.plugin.TabContent, it's actually a proxy object, not the actual class.

Object
  TabContent: ƒ ()
       [[Handler]]: Object
       [[Target]] : ƒ (...args)
       [[IsRevoked]] : false
  test: (...)
  get TabContent:() => {…}
  set TabContent:(value) => {…}
  get test:() => {…}
  set test:(value) => {…}
  __proto__:Object

Any tips/advice?

[Allow2CEO]

As a punt, I spent tonight adding babel es2015 transpilation to one of the libraries, got that all working but that has a different issue.

I have the main library now as:

import TabContent from './Components/TabContent.js';

export default function(context) {
    var wemo = {
        test: '3',
        TabContent: TabContent
    };

    return wemo;
};

And then import it:

        const plugin = epm.load(dir, this.props.plugin.name, remote.require);
        this.plugin = plugin({
            updateData: function(data) {
            }
        });

but it bombs out on the plugin() function call. The export should be a function, which I intended to call to seed the reverse connection objects. There is probably a better pattern, but that's a different question.

I should be able to do that, right? I don't see anything special.

Object
  default:ƒ ()
      [[Handler]]:Object
      [[Target]]:ƒ (...args)
      [[IsRevoked]]:false
  __esModule:(...)
  get default:() => {…}
  set default:(value) => {…}
  get __esModule:() => {…}
  __proto__:Object

I just seem to be getting proxy objects that I cannot seem to work with. In this case I can see the default function, but cannot invoke it.

Thanks man, sorry if I'm doing something stupid

[pksunkara]

It basically has the same limitations as remote.require. You might need to research a little bit on that. Not everything can be done like that.