-
Notifications
You must be signed in to change notification settings - Fork 26.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Material-ui – injectTapEventPlugin() #232
Comments
Hey @nic, I am also interested in this answer. But personally I don't think a next.js application is any different from other React apps. Personally what I've done is to inject it in the main layout of my app, when component is mounted. Here is the code:
Happy to hear any feedbacks! |
@QuentinDejean Thanks a lot for your interested. I try the follow code:
After click into the Icon Navigation I get more warnings: I try to change componentDidMount to componentWillMount but the result is:
:( |
@nic This is exactly what #204 and #221 are about. Material-UI is using react-addons-transition-group, which inlines React into your bundle, so you end up with two Reacts on the same page (one from Next bundle, and one from yours). Try to follow the #221 and see if that will help you with Material-UI as it helped me with React-MD. |
@frol Oh!! Now I got it. Thank you so much!! Your PR is very appreciated. I'll try that. You rock Vlad! :) |
Still not quite getting it, similar to above I have a button that turns black and spews errors after clicking. I see the PR but am not sure how to translate for Material UI rather than React-MD? I keep trying but so far no luck. |
Same problem here, there's any solution for this? |
2.0 is coming and it has all the fixes for these and you will be able to use them like as you are doing with other React apps. |
@arunoda I'm testing with the 2.0 beta and still can't make it work, I can't find the right place to put
Any idea how to make it work? Also, great work, 2.0 looks great! |
Read error messages :)
Just do this in the top of your file: import injectTapEventPlugin from 'react-tap-event-plugin'
injectTapEventPlugin() |
Thanks a lot for your response @arunoda, really appreciated! |
Send me a sample repo. Let's see what we can about this. |
@arunoda here I created one nextjs2-materialui-sample |
@EehMauro there's a simple fix for this. import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin(); Then import it inside each of your pages like this: import '../components/tap_events' |
Thanks @arunoda, now it's working perfectly! |
Great. |
It's not working, after hot reload it fails over and over again. |
Tried @arunoda solution but still the same error EDIT |
@JSantana90 Quick fix (Runs injectTapEventPlugin only on the client side): if (typeof window !== 'undefined') injectTapEventPlugin(); |
@JSantana90 you can also create a custom document and import the module inside that. |
@arunoda I tried that: https://github.com/GraphQLGuide/guide/blob/repro-tap-plugin/pages/_document.js#L4-L7 On first pageload I get: and no error in the terminal. After saving a file, I get:
in the terminal. Guarding it with Repro:
|
@ooade your solution works for me, btw, you can wrap in try catch like this: |
@maximblack That would work just as fine. Don't forget to change to multiline comments, else the last bracket gets blown off 😄 |
@maximblack , @ooade Thank you! |
Just ran into this. Wanted to just say that I'd love to see some kind of initialization infrastructure in next.js. Having a simple place (not _document.js!) to put server-only and client-only init code would be fantastic. Having hooks that only ran once on the server and client, as well as hooks that allowed for easy decorating of pages, both on the server and client, would be really fantastic. |
@arunoda I am still having issues with this. I've been calling it on the top of my file and not having any issues running in dev but as soon as I try to run
|
I think with the above solution it imports correctly without errors but the plugin itself does nothing. Internally it tries to hook into React's event system, but with Next.js this fails silently (does nothing). I don't think modules that hook into the event system will work with next.js at all |
Where is the correct place to call injectTapEventPlugin() in a next.js based application?
The text was updated successfully, but these errors were encountered: