Accounts-ui with React/1.3-rc.12

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,
  componentWillUnmount() {
    // Clean up Blaze view
  render() {
    return <span ref="container" />

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.


That worked! Thanks @gadicc!

1 Like

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

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

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) {

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


  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

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

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

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

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

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

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:

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