Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Jump to bottom

React-MD UI toolkit doesn't work with Next.js #196

Closed
frol opened this issue Nov 4, 2016 · 1 comment
Closed

React-MD UI toolkit doesn't work with Next.js #196

frol opened this issue Nov 4, 2016 · 1 comment

Comments

@frol
Copy link
Contributor

frol commented Nov 4, 2016 •
edited
Loading

I am trying to use different UI toolkits and so far I haven't succeeded with any. Material-UI issue is already reported as #119, but React-MD raises another error, so I thought it should be reported separately.

Here is the pages/index.js:

import React from 'react'
import Head from 'next/head'
import { RaisedButton } from 'react-md/lib/Buttons'

export default class App extends React.Component {
  handleClick() {
    console.log("clicked!")
  }
  render() {
    return <div>
      <Head>
        <link rel="stylesheet" href="https://npmcdn.com/react-md/dist/react-md.css" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
      </Head>
      <div>
        <RaisedButton label="Hello, World!" onClick={this.handleClick} />
      </div>
    </div>
  }
}

Here are the npm dependencies:

$ npm install --save next react-md react-addons-transition-group react-addons-pure-render-mixin react-addons-css-transition-group

On page load I see the following warnings:

Warning: getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.
Warning: getInitialState was defined on ReactTransitionGroup, a plain JavaScript class. This is only supported for classes created using React.createClass. Did you mean to define a state property instead?

The first warning points to this line: https://github.com/mlaursen/react-md/blob/bec6b087eb0a6af38f0a0613d25d8a17f6c7b0a6/src/js/Inks/injectInk.js#L243. However, I couldn't locate the real source of the second warning.

And here is what I get on a button click:

Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded
Uncaught TypeError: Cannot read property 'componentWillLeave' of undefined

The line of code where the error occurs is inside React: https://github.com/facebook/react/blob/c78464f8ea9a5b00ec80252d20a71a1482210e57/src/addons/transitions/ReactTransitionGroup.js#L194

I do get clicked! logged, but the "bubble" animation doesn't work.

It seems that something magical happens and it feels like there are two Reacts are loaded somehow, so the ref keys are not registered.
This was referenced Nov 4, 2016
Closed
Closed
@frol
Copy link
Contributor Author

frol commented Nov 5, 2016

I am closing this in favor of a more specific #204 bug report.

@frol frol closed this as completed Nov 5, 2016
This was referenced Nov 7, 2016
Closed
Closed
@lock lock bot locked as resolved and limited conversation to collaborators May 12, 2018
# for free to subscribe to this conversation on GitHub. Already have an account? #.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@frol