Accounts-ui with React/1.3-rc.12

help
1

Trying to use the accounts-ui package it my React/1.3 project. Problem is, whenever I click on the ‘Create Account’ link, it reloads the entire page. I suspect that the click event on the link is getting bubbled up to the browser. Any ideas?

import { Blaze } from 'meteor/blaze'
import { Template } from 'meteor/templating'
import React from 'react'
import ReactDOM from 'react-dom'

export default class AccountsUIWrapper extends React.Component {
  componentDidMount() {
    // Use Meteor Blaze to render login buttons
    this.view = Blaze.render(Template.loginButtons,
      ReactDOM.findDOMNode(this.refs.container))
  }
  componentWillUnmount() {
    // Clean up Blaze view
    Blaze.remove(this.view)
  }
  render() {
    return <span ref="container" />
  }
}
2

That’s surprising. And no errors on the console anywhere? I’m using it via my own wrapper - gadicc:blaze-react-component - and it’s working great:

import Blaze from 'meteor/gadicc:blaze-react-component';

const App = () => (
  ...
    <Blaze template="loginButtons" align="right" />
  ...
);

As an aside, although not needed for accounts-ui, this also handles changes of props and without recreating the view.

3 Likes
3

That worked! Thanks @gadicc!

1 Like
4

And it stopped working…I think I’m just going to build my own basic Account UI.

5

Hey, can you be more specific? Even if you do build your own accounts package, if there’s a problem with my solution I’d like to fix it for the benefit of others.

Particularly if you can note any errors you received in the console.

1 Like
6

Here my LoginButtons.jsx (works fine without importing Blaze and Template)
Make sure you didn’t remove blaze-html-templates

import React from 'react';
import ReactDOM from 'react-dom';

class LoginButtons extends React.Component{
  
  constructor(props) {
    super(props);
    
  }

  componentDidMount() {
    // Use Meteor Blaze to render login buttons
    this.view = Blaze.renderWithData(Template.loginButtons, {align: this.props.align},
      ReactDOM.findDOMNode(this.refs.container));
  }

  componentWillUnmount(){
    
    Blaze.remove(this.view);
  }

  render() {
    // Just render a placeholder container that will be filled in
    return <span ref="container" />;
  }

}

LoginButtons.propTypes = {
    align: React.PropTypes.string
  };

LoginButtons.defaultProps = {align: 'right'};

export default LoginButtons;
1 Like
7

Off topic but I keep getting "not supported Windows each time I try to use a 1.3.rc? Is it just me?

8

Figured out the problem. React-router doesn’t like it when you have random links on the page. It wants every link to be in a <Link> component.

What I do with react-bootstrap is use react-router-bootstrap to wrap my links, but I don’t think there’s a way to use that here.

I don’t know of any workarounds. Looks like I have to be pure-React with react-router.

1 Like
9

Thanks for reporting back. Yes, it does sound like there’s no way around that, but I’ve never used react-router myself.

10

why don’t you use one the package from the reactive stack

here how to import it import { BlazeToReact } from 'meteor/thereactivestack:blazetoreact';

11

Did you ever find a solution to this problem - it seems to be very similar to what I have - i.e. React + ReactRouter + Blaze loginButtons.

I just get a loading spinner when I try to login:

12

Actually it turns out this wasn’t the problem at all, I think all my problems were caused by using a hotel WiFi and proxy issues. I’d solved the proxy issues, but still couldn’t login / logout with the blaze accounts UI.

However a restart of vagrant and then my whole machine got the login / logout working again.

So I never actually had the same issue, since the create account / login / logout doesn’t cause a full page refresh