Next.js: Issues with libraries

Created on 28 Oct 2016 · 22Comments · Source: vercel/next.js

Im using material-ui to create my components, every time I click on something like a menu or a radio button that is supposed to change the view somehow I get:
Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs.

I wonder if this is a conflict with this particular library or if other react libraries suffer the same with nextjs.

Source

nsantini

👍8

Most helpful comment

I got slightly further with react-toolbox, but without webpack to load the SASS, it won't work. One idea would be to convert all the SASS into CSS and then insert them into the page via <HEAD>. Haven't tried it though.

ugiacoman on 31 Oct 2016

👍3

All 22 comments

@nsantini Any luck integrating Material-UI? I am facing a Maximum call stack size exceeded error when implementing a RaisedButton component.

ugiacoman on 29 Oct 2016

👍1

Haven't been able to make it work with material-ui, I have been able to make it work with react-bootstrap though.

nsantini on 31 Oct 2016

ugiacoman on 31 Oct 2016

👍3

Ran into this issue as well with material-ui... confused as to what the source might be though

mattapperson on 2 Nov 2016

Has anybody succeeded with any of the existing UI toolkit using Next.js?

frol on 4 Nov 2016

FYI, I have just reported an issue, which seems to reveal the root cause of the issue we encounter in most of the UI toolkits: https://github.com/zeit/next.js/issues/204. Please, have a look and maybe you will have a good guess of how this can be fixed.

frol on 5 Nov 2016

I have succeeded in hacking Next.js to work with React-MD in #221, and it can be also hacked to work with Material-UI, but I have no idea on how to solve the hacks as I have a very little experience with NodeJS world. Thus, I put all my findings into the comments to the PR. I hope somebody will make sense out of my proof of concept and implement a proper PR.

frol on 7 Nov 2016

@nsantini how did you manage to get react-bootstrap working?

jonaswindey on 15 Nov 2016

@jonaswindey for me, it just worked... what sees to be your issue?

mattapperson on 15 Nov 2016

Nevermind, apparently you have to manually load the bootstrap from a CDN

jonaswindey on 15 Nov 2016

👍1

@jonaswindey did you add the css from react-bootstrap?

mattapperson on 15 Nov 2016

@jonaswindey you got it, boostrap is different than matarial-ui in that css is separate and uses className to apply styles, material-ui uses inline styling applied to the components

nsantini on 16 Nov 2016

In general I recommend you load the CSS through <Head> (more on this technique here: https://github.com/zeit/next.js/wiki/Global-styles-and-layouts), but as you can probably guess, the strength of Next.js is in using libraries that already bundle the CSS intelligently.

The reason for this is obvious: why ship more CSS than is actually needed? eg: why ship an entire stylesheet of tools, inputs, textareas, radio buttons if you're only going to use a dropdown menu in a certain page?

For an example of this mindset check out http://jxnblk.com/rebass/ by @jxnblk

Rebass is a React UI component library that uses inline styles to avoid CSS dependencies and prevent leaky global styles from affecting an application. Rebass components inherit styles where appropriate and can be customized using React Context. Rebass components are built as stateless functional components and modeled as presentational components

rauchg on 17 Nov 2016

That said, our goal is to make the framework work with _everything_ that works with React. For that we're exposing the webpack / babel config you can extend. The method we're going with is: #222

rauchg on 17 Nov 2016

Custom webpack config is now supported: https://github.com/zeit/next.js#customizing-webpack-config
@nsantini is this still an active issue? Otherwise it can be closed ❤️

timneutkens on 15 Jan 2017

Closing in favor of custom webpack config. If your issue is not solved. Please do re-open this one. Or create a new one 👍

timneutkens on 16 Jan 2017

@timneutkens I am not sure what to do with my custom webpack config to fix this issue. https://github.com/zeit/next.js/issues/232

cyrus-za on 22 Jul 2017

@cyrus-za do you manage to solve the issue with injectTapEventPlugin?

vozni4iy on 15 Aug 2017

var reactDomLibPath = path.join(__dirname, "./node_modules/react-dom/lib");
var alias = {};
["EventPluginHub", "EventConstants", "EventPluginUtils", "EventPropagators",
 "SyntheticUIEvent", "CSSPropertyOperations", "ViewportMetrics"].forEach(function(filename){
    alias["react/lib/"+filename] = path.join(__dirname, "./node_modules/react-dom/lib", filename);
});

config.resolve = {
      alias: alias
    }

This helps

vozni4iy on 15 Aug 2017

Thanks @vozni4iy that helps

cyrus-za on 15 Aug 2017

+1
Getting RangeError: Maximum call stack size exceeded on RaisedButton for the following line:
var styles = getStyles(this.props, this.context, this.state); // 298

sunlee-newyork on 29 Sep 2017

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.