root is still react-root using withOptions()

[jaypanares]

Currently experiencing unexpected behavior. I'm using the following code:

import { FlowRouter } from 'meteor/kadira:flow-router';
import { mount, withOptions } from 'react-mounter';

import LoginForm from './components/LoginForm.jsx';

const mountWithOpts = withOptions({ rootId: 'app' }, mount);

FlowRouter.route('/', {
  name: 'login',
  action() {
    mountWithOpts(LoginForm);
  }
});

but the root still has an id of react-root. Was there something I missed? Thanks!

[genyded]

+1 same here - this is a major issue for our app.

[hassanasad]

Yeah - the issue seems to be only for the first '/' route. Works fine for other routes.

[jeroenbe]

the issue seems to be only for the first '/' route. Works fine for other routes.

This is not the case for me.

Does anyone know a fix for this? Thanks!

[jeroenbe]

Ok guys, I figured something out

When you have a look in the actual downloaded code from npm it seems it's a little different from the codebase presented here on GitHub.

When browsing in the module (downloaded from npm), you should notice a dist folder. Browse to index.js and change the contents of the mount function to:

function mount(layoutClass, regions) {
  var options = {
    rootId: (arguments[1] ? arguments[1].rootId : 'react-root'),
    rootProps: (arguments[2] ? arguments[2].rootProps : {})
  }
  mounter(layoutClass, regions, options);
}

This works for me.

I think the code gets transpiled to es2014 or something (I'm just guessing here!). In this translation you see the original content doesn't allow 1 argument. When you only specify the rootId, the arguments object will be ignored and replaced with {}

Hope this helps

PS: @arunoda I wanted to issue a pull request for this but I'm not sure how to do that with different code bases, could you look into this or help me do it?