Issues with libraries #119

nsantini · 2016-10-27T23:25:04Z

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.

ugiacoman · 2016-10-29T02:54:14Z

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

nsantini · 2016-10-31T01:20:53Z

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

ugiacoman · 2016-10-31T01:35:42Z

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.

mattapperson · 2016-11-01T23:50:36Z

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

frol · 2016-11-04T07:48:09Z

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

frol · 2016-11-05T07:58:34Z

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: #204. Please, have a look and maybe you will have a good guess of how this can be fixed.

frol · 2016-11-07T14:01:32Z

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.

jonaswindey · 2016-11-15T14:39:56Z

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

mattapperson · 2016-11-15T14:41:04Z

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

jonaswindey · 2016-11-15T14:44:23Z

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

mattapperson · 2016-11-15T15:04:23Z

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

nsantini · 2016-11-16T19:49:49Z

@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

rauchg · 2016-11-17T04:06:10Z

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 · 2016-11-17T04:07:01Z

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

timneutkens · 2017-01-15T22:27:59Z

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 · 2017-01-16T21:40:20Z

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

cyrus-za · 2017-07-22T15:17:56Z

@timneutkens I am not sure what to do with my custom webpack config to fix this issue. #232

vozni4iy · 2017-08-15T07:29:24Z

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

vozni4iy · 2017-08-15T07:49:49Z

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

cyrus-za · 2017-08-15T07:55:06Z

Thanks @vozni4iy that helps

sunlee-newyork · 2017-09-29T18:15:56Z

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

lock · 2018-05-10T21:43:42Z

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.

nkzawa added the help wanted label Oct 29, 2016

frol mentioned this issue Nov 4, 2016

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

Closed

frol mentioned this issue Nov 5, 2016

TransitionGroup addon causes "Only a ReactOwner can have refs" #204

Closed

frol mentioned this issue Nov 7, 2016

PROOF-OF-CONCEPT: Externalized React, React-DOM to support React Addons #221

Closed

frol mentioned this issue Nov 9, 2016

Material-ui – injectTapEventPlugin() #232

Closed

timneutkens closed this as completed Jan 16, 2017

gustavlrsn mentioned this issue May 2, 2017

how could I use bootstrap.css or other library css in our app #105

Closed

lock bot locked as resolved and limited conversation to collaborators May 10, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Issues with libraries #119

Issues with libraries #119

nsantini commented Oct 27, 2016

ugiacoman commented Oct 29, 2016

nsantini commented Oct 31, 2016

ugiacoman commented Oct 31, 2016

mattapperson commented Nov 1, 2016

frol commented Nov 4, 2016

frol commented Nov 5, 2016

frol commented Nov 7, 2016

jonaswindey commented Nov 15, 2016

mattapperson commented Nov 15, 2016

jonaswindey commented Nov 15, 2016 •

edited

Loading

mattapperson commented Nov 15, 2016

nsantini commented Nov 16, 2016

rauchg commented Nov 17, 2016

rauchg commented Nov 17, 2016

timneutkens commented Jan 15, 2017

timneutkens commented Jan 16, 2017

cyrus-za commented Jul 22, 2017

vozni4iy commented Aug 15, 2017

vozni4iy commented Aug 15, 2017

cyrus-za commented Aug 15, 2017

sunlee-newyork commented Sep 29, 2017

lock bot commented May 10, 2018

Issues with libraries #119

Issues with libraries #119

Comments

nsantini commented Oct 27, 2016

ugiacoman commented Oct 29, 2016

nsantini commented Oct 31, 2016

ugiacoman commented Oct 31, 2016

mattapperson commented Nov 1, 2016

frol commented Nov 4, 2016

frol commented Nov 5, 2016

frol commented Nov 7, 2016

jonaswindey commented Nov 15, 2016

mattapperson commented Nov 15, 2016

jonaswindey commented Nov 15, 2016 • edited Loading

mattapperson commented Nov 15, 2016

nsantini commented Nov 16, 2016

rauchg commented Nov 17, 2016

rauchg commented Nov 17, 2016

timneutkens commented Jan 15, 2017

timneutkens commented Jan 16, 2017

cyrus-za commented Jul 22, 2017

vozni4iy commented Aug 15, 2017

vozni4iy commented Aug 15, 2017

cyrus-za commented Aug 15, 2017

sunlee-newyork commented Sep 29, 2017

lock bot commented May 10, 2018

jonaswindey commented Nov 15, 2016 •

edited

Loading