Next.js: Error with onTouchTap and material-ui

Created on 29 Jan 2017 · 14Comments · Source: vercel/next.js

A previous issue was closed dealing with how to initialize the injectTapEventPlugin function. However, after having solved that according to the issue, I'm still getting errors using a dropdown menu in material-ui.

Code:

const Header = (props) => {
  const { position, referralLink } = props;
  return (
    <AppBar
      className="flex-container-left appbar"
      title={(
        <a href="/" className="logo-title">
          <img src="/static/images/image.svg" height="50" alt="company logo"/>
        </a>
      )}
      iconElementLeft={<span />}
      iconElementRight={(
        <IconMenu
          className="navigation-close"
          iconButtonElement={<IconButton><NavigationMenu /></IconButton>}
          targetOrigin={{ horizontal: 'right', vertical: 'top' }}
          anchorOrigin={{ horizontal: 'right', vertical: 'top' }}
        >
          <MenuItem
            primaryText="Home"
            onTouchTap={() => console.log('/home')}
          />
          <MenuItem
            primaryText="Status & Leaderboard"
            onTouchTap={() => console.log('/status')}
          />
        </IconMenu>
      )}
    />
  );
}

Error:
screen shot 2017-01-29 at 9 28 40 am

screen shot 2017-01-29 at 9 35 11 am

Source

tgoldenberg

👍2

Most helpful comment

Here's a sample repo: https://github.com/tgoldenberg/next-sample

tgoldenberg on 29 Jan 2017

👍2

All 14 comments

@tgoldenberg is it possible to have a sample repo? It's quite hard to figure it out like this.

arunoda on 29 Jan 2017

@arunoda sure, I'll try to get one ready.

tgoldenberg on 29 Jan 2017

👍1

I would like to just share my experience with React-MD, which is an alternative implementation of Google Material UI for React. React-MD just works with Next.js like a charm for me.

frol on 29 Jan 2017

Here's a sample repo: https://github.com/tgoldenberg/next-sample

tgoldenberg on 29 Jan 2017

👍2

@frol Are you using a custom webpack config to get it working?

ugiacoman on 29 Jan 2017

@tgoldenberg I'll have a look at this too.

arunoda on 30 Jan 2017

May be this issue is related too: https://github.com/zeit/next.js/issues/882#issuecomment-275940934

arunoda on 30 Jan 2017

@ugiacoman No, I have just installed it (npm install --save react-md), import it (import ... from 'react-md/...'), and added compiled CSS files and fonts using <Head>. That is it.

frol on 30 Jan 2017

@frol, I'll checkout react-md, but I think the issue still remains. A lot of people use material-ui, and migrating isn't always that easy.

tgoldenberg on 30 Jan 2017

@frol could you please elaborate on how you compile and add compiled files to Head? (I'm new to next.js)