Material-ui – injectTapEventPlugin() #232

nic · 2016-11-08T21:10:56Z

Where is the correct place to call injectTapEventPlugin() in a next.js based application?

QuentinDejean · 2016-11-09T03:12:14Z

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:

import Head                 from 'next/head';
import injectTapEventPlugin from 'react-tap-event-plugin';
import React                from 'React';

class MainLayout extends React.Component {

  componentDidMount() {
    injectTapEventPlugin();
  }

  render() {
    const { children } = this.props;
    return (
      <div>
        <Head>
          <title>My page title</title>
          <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        </Head>
        {children}
      </div>
    )
  }
}

export default MainLayout;

Happy to hear any feedbacks!

frol · 2016-11-09T10:40:40Z

@nic Just for your info, there are some issues with Material-UI and other toolkits: #119, #196, #204, #221.

nic · 2016-11-09T13:53:13Z

@QuentinDejean Thanks a lot for your interested. I try the follow code:

import React                from 'react';
import Head                 from 'next/head';
import injectTapEventPlugin from 'react-tap-event-plugin';
import MuiThemeProvider     from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme          from 'material-ui/styles/getMuiTheme';
import AppBar               from 'material-ui/AppBar';

const muiTheme = getMuiTheme({ userAgent: false });

export default class extends React.Component {

  componentDidMount() {
    injectTapEventPlugin();
  }

  render() {
    return (
      <MuiThemeProvider muiTheme={muiTheme}>
        <div>
          <Head>
            <title>My page title</title>
            <meta name="viewport" content="initial-scale=1.0, width=device-width"/>
          </Head>

          <AppBar
            title="Title"
            iconClassNameRight="muidocs-icon-navigation-expand-more"
          />

          <h1>Page content</h1>

        </div>
      </MuiThemeProvider>
    )
  }
}

And the result is:

After click into the Icon Navigation I get more warnings:

I try to change componentDidMount to componentWillMount but the result is:

{ Error: Invariant Violation: injectTapEventPlugin(): Can only be called once per application lifecycle.

It is recommended to call injectTapEventPlugin() just before you call ReactDOM.render(). If you are using an external library which calls injectTapEventPlugin() itself, please contact the maintainer as it shouldn't be called in library code and should be injected by the application.
    at invariant (/Volumes/Projects/node_modules/react-tap-event-plugin/node_modules/fbjs/lib/invariant.js:39:15)
    at injectTapEventPlugin (/Volumes/Projects/node_modules/react-tap-event-plugin/src/injectTapEventPlugin.js:11:5)
    at _class.componentWillMount (/Volumes/Projects/.next/dist/pages/index.js:66:41)
    at /usr/local/lib/node_modules/next/node_modules/react/lib/ReactCompositeComponent.js:347:23
    at measureLifeCyclePerf (/usr/local/lib/node_modules/next/node_modules/react/lib/ReactCompositeComponent.js:74:12)
    at ReactCompositeComponentWrapper.performInitialMount (/usr/local/lib/node_modules/next/node_modules/react/lib/ReactCompositeComponent.js:346:9)
    at ReactCompositeComponentWrapper.mountComponent (/usr/local/lib/node_modules/next/node_modules/react/lib/ReactCompositeComponent.js:257:21)
    at Object.mountComponent (/usr/local/lib/node_modules/next/node_modules/react/lib/ReactReconciler.js:47:35)
    at ReactCompositeComponentWrapper.performInitialMount (/usr/local/lib/node_modules/next/node_modules/react/lib/ReactCompositeComponent.js:370:34)
    at ReactCompositeComponentWrapper.mountComponent (/usr/local/lib/node_modules/next/node_modules/react/lib/ReactCompositeComponent.js:257:21) framesToPop: 1 }

:(

frol · 2016-11-09T13:58:50Z

After click into the Icon Navigation I get more warnings...

@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.

nic · 2016-11-10T17:50:14Z

@frol Oh!! Now I got it. Thank you so much!! Your PR is very appreciated. I'll try that. You rock Vlad! :)

allpwrfulroot · 2016-11-29T20:37:13Z

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.

EehMauro · 2016-12-20T21:00:13Z

Same problem here, there's any solution for this?

arunoda · 2016-12-20T22:43:50Z

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.

EehMauro · 2016-12-21T21:30:58Z

@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 injectTapEventPlugin(). Tried with different options and still seeing this error:

Invariant Violation: injectTapEventPlugin(): Can only be called once per application lifecycle.

It is recommended to call injectTapEventPlugin() just before you call ReactDOM.render(). If you are using an external library which calls injectTapEventPlugin() itself, please contact the maintainer as it shouldn't be called in library code and should be injected by the application.
    at invariant (/Users/mauro/Workspace/foodvana/foodvana-enduser-web-next/node_modules/fbjs/lib/invariant.js:38:15)
    at injectTapEventPlugin (/Users/mauro/Workspace/foodvana/foodvana-enduser-web-next/node_modules/react-tap-event-plugin/src/injectTapEventPlugin.js:11:5)
    at Function.getInitialProps (/Users/mauro/Workspace/foodvana/foodvana-enduser-web-next/pages/index.js?entry:24:6)
    at _callee3$ (/Users/mauro/Workspace/foodvana/foodvana-enduser-web-next/next/dist/server/render.js:120:81)
    at tryCatch (/Users/mauro/Workspace/foodvana/foodvana-enduser-web-next/next/node_modules/regenerator-runtime/runtime.js:64:40)
    at GeneratorFunctionPrototype.invoke [as _invoke] (/Users/mauro/Workspace/foodvana/foodvana-enduser-web-next/next/node_modules/regenerator-runtime/runtime.js:355:22)
    at GeneratorFunctionPrototype.prototype.(anonymous function) [as next] (/Users/mauro/Workspace/foodvana/foodvana-enduser-web-next/next/node_modules/regenerator-runtime/runtime.js:116:21)
    at step (/Users/mauro/Workspace/foodvana/foodvana-enduser-web-next/next/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
    at /Users/mauro/Workspace/foodvana/foodvana-enduser-web-next/next/node_modules/babel-runtime/helpers/asyncToGenerator.js:28:13

Any idea how to make it work?

Also, great work, 2.0 looks great!

arunoda · 2016-12-21T22:29:30Z

Read error messages :)

Invariant Violation: injectTapEventPlugin(): Can only be called once per application lifecycle.

Just do this in the top of your file:

import injectTapEventPlugin from 'react-tap-event-plugin'
injectTapEventPlugin()

EehMauro · 2016-12-21T23:00:59Z

Thanks a lot for your response @arunoda, really appreciated!
Already tried that and in the first render it works perfectly, but after a hot reload or a transition with a Link, it fails again.
I tried putting it in the top of every Page, also in a parent component I re-use in all pages. But keep failing.

arunoda · 2016-12-21T23:29:10Z

Send me a sample repo. Let's see what we can about this.

EehMauro · 2016-12-22T00:38:20Z

@arunoda here I created one nextjs2-materialui-sample
Thanks for your help!

arunoda · 2016-12-22T06:44:37Z

@EehMauro there's a simple fix for this.
Add following content to a file in components/tap_events.js

import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

Then import it inside each of your pages like this:

import '../components/tap_events'

EehMauro · 2016-12-22T08:32:08Z

Thanks @arunoda, now it's working perfectly!

arunoda · 2016-12-22T08:33:39Z

Great.

maximblack · 2017-01-09T16:53:39Z

It's not working, after hot reload it fails over and over again.

johhansantana · 2017-01-11T16:22:06Z

Tried @arunoda solution but still the same error

EDIT
It does work, you just have to restart the server

ooade · 2017-01-13T02:54:05Z

@JSantana90 Quick fix (Runs injectTapEventPlugin only on the client side):

if (typeof window !== 'undefined') injectTapEventPlugin();

arunoda · 2017-01-13T06:29:27Z

@JSantana90 you can also create a custom document and import the module inside that.
See: https://github.com/zeit/next.js#custom-document

lorensr · 2017-01-13T07:11:53Z

@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:

Invariant Violation: injectTapEventPlugin(): Can only be called once per application lifecycle

in the terminal. Guarding it with if (typeof window !== 'undefined') also doesn't work.

Repro:

npm run dev
https://github.com/GraphQLGuide/guide/tree/repro-tap-plugin

maximblack · 2017-01-13T08:30:28Z

@ooade your solution works for me, btw, you can wrap in try catch like this:
try { injectTapEventPlugin(); } catch (e) { // Do nothing, just preventing error }

ooade · 2017-01-13T08:38:51Z

@maximblack That would work just as fine. Don't forget to change to multiline comments, else the last bracket gets blown off 😄

sekmet · 2017-02-13T03:48:17Z

@maximblack , @ooade Thank you!

jcheroske · 2017-05-09T21:16:49Z

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.

cyrus-za · 2017-07-22T15:13:57Z

@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 next build it can't find the module. It seems to have something to do with react-dom


errors: 
   [ './~/react-tap-event-plugin/src/injectTapEventPlugin.js\nModule not found: Error: Can\'t resolve \'react-dom/lib/EventPluginHub\' in \'\\node_modules\\react-tap-event-plugin\\src\'\nresolve \'react-dom/lib/EventPluginHub\' in \'\\node_modules\\react-tap-event-plugin\\src\'\n  Parsed request is a module\n  using description file: \\node_modules\\react-tap-event-plugin\\package.json (relative path: ./src)\n    Field \'browser\' doesn\'t contain a valid alias configuration\n    aliased with mapping \'react-dom\': \'\\node_modules\\react-dom\\dist\\react-dom.min.js\' to \'\\node_modules\\react-dom\\dist\\react-dom.min.js/lib/EventPluginHub\'\n      using description file: \\node_modules\\react-tap-event-plugin\\package.json (relative path: ./src)\n        Field \'browser\' doesn\'t contain a valid alias configuration\n      after using description file: \\node_modules\\react-tap-event-plugin\\package.json (relative path: ./src)\n        using description file: \\node_modules\\react-dom\\package.json (relative path: ./dist/react-dom.min.js/lib/EventPluginHub)\n          no extension\n            Field \'browser\' doesn\'t contain a valid alias configuration\n            \\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\EventPluginHub doesn\'t exist\n          .js\n            Field \'browser\' doesn\'t contain a valid alias configuration\n            \\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\EventPluginHub.js doesn\'t exist\n          .json\n            Field \'browser\' doesn\'t contain a valid alias configuration\n            \\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\EventPluginHub.json doesn\'t exist\n          as directory\n            \\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\EventPluginHub doesn\'t exist\n[\\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\EventPluginHub]\n[\\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\EventPluginHub.js]\n[\\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\EventPluginHub.json]\n[\\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\EventPluginHub]\n @ ./~/react-tap-event-plugin/src/injectTapEventPlugin.js 23:2-41\n @ ./components/shared/Layout.js\n @ ./pages/discover.js?entry\n @ multi ./pages/discover.js?entry',
     './~/react-tap-event-plugin/src/TapEventPlugin.js\nModule not found: Error: Can\'t resolve \'react-dom/lib/EventConstants\' in \'\\node_modules\\react-tap-event-plugin\\src\'\nresolve \'react-dom/lib/EventConstants\' in \'\\node_modules\\react-tap-event-plugin\\src\'\n  Parsed request is a module\n  using description file: \\node_modules\\react-tap-event-plugin\\package.json (relative path: ./src)\n    Field \'browser\' doesn\'t contain a valid alias configuration\n    aliased with mapping \'react-dom\': \'\\node_modules\\react-dom\\dist\\react-dom.min.js\' to \'\\node_modules\\react-dom\\dist\\react-dom.min.js/lib/EventConstants\'\n      using description file: \\node_modules\\react-tap-event-plugin\\package.json (relative path: ./src)\n        Field \'browser\' doesn\'t contain a valid alias configuration\n      after using description file: \\node_modules\\react-tap-event-plugin\\package.json (relative path: ./src)\n        using description file: \\node_modules\\react-dom\\package.json (relative path: ./dist/react-dom.min.js/lib/EventConstants)\n          no extension\n            Field \'browser\' doesn\'t contain a valid alias configuration\n            \\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\EventConstants doesn\'t exist\n          .js\n            Field \'browser\' doesn\'t contain a valid alias configuration\n            \\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\EventConstants.js doesn\'t exist\n          .json\n            Field \'browser\' doesn\'t contain a valid alias configuration\n            \\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\EventConstants.json doesn\'t exist\n          as directory\n            \\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\EventConstants doesn\'t exist\n[\\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\EventConstants]\n[\\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\EventConstants.js]\n[\\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\EventConstants.json]\n[\\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\EventConstants]\n @ ./~/react-tap-event-plugin/src/TapEventPlugin.js 22:21-60\n @ ./~/react-tap-event-plugin/src/injectTapEventPlugin.js\n @ ./components/shared/Layout.js\n @ ./pages/discover.js?entry\n @ multi ./pages/discover.js?entry',
     './~/react-tap-event-plugin/src/TapEventPlugin.js\nModule not found: Error: Can\'t resolve \'react-dom/lib/EventPluginUtils\' in \'\\node_modules\\react-tap-event-plugin\\src\'\nresolve \'react-dom/lib/EventPluginUtils\' in \'\\node_modules\\react-tap-event-plugin\\src\'\n  Parsed request is a module\n  using description file: \\node_modules\\react-tap-event-plugin\\package.json (relative path: ./src)\n    Field \'browser\' doesn\'t contain a valid alias configuration\n    aliased with mapping \'react-dom\': \'\\node_modules\\react-dom\\dist\\react-dom.min.js\' to \'\\node_modules\\react-dom\\dist\\react-dom.min.js/lib/EventPluginUtils\'\n      using description file: \\node_modules\\react-tap-event-plugin\\package.json (relative path: ./src)\n        Field \'browser\' doesn\'t contain a valid alias configuration\n      after using description file: \\node_modules\\react-tap-event-plugin\\package.json (relative path: ./src)\n        using description file: \\node_modules\\react-dom\\package.json (relative path: ./dist/react-dom.min.js/lib/EventPluginUtils)\n          no extension\n            Field \'browser\' doesn\'t contain a valid alias configuration\n            \\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\EventPluginUtils doesn\'t exist\n          .js\n            Field \'browser\' doesn\'t contain a valid alias configuration\n            \\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\EventPluginUtils.js doesn\'t exist\n          .json\n            Field \'browser\' doesn\'t contain a valid alias configuration\n            \\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\EventPluginUtils.json doesn\'t exist\n          as directory\n            \\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\EventPluginUtils doesn\'t exist\n[\\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\EventPluginUtils]\n[\\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\EventPluginUtils.js]\n[\\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\EventPluginUtils.json]\n[\\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\EventPluginUtils]\n @ ./~/react-tap-event-plugin/src/TapEventPlugin.js 23:23-64\n @ ./~/react-tap-event-plugin/src/injectTapEventPlugin.js\n @ ./components/shared/Layout.js\n @ ./pages/discover.js?entry\n @ multi ./pages/discover.js?entry',
     './~/react-tap-event-plugin/src/TapEventPlugin.js\nModule not found: Error: Can\'t resolve \'react-dom/lib/EventPropagators\' in \'\\node_modules\\react-tap-event-plugin\\src\'\nresolve \'react-dom/lib/EventPropagators\' in \'\\node_modules\\react-tap-event-plugin\\src\'\n  Parsed request is a module\n  using description file: \\node_modules\\react-tap-event-plugin\\package.json (relative path: ./src)\n    Field \'browser\' doesn\'t contain a valid alias configuration\n    aliased with mapping \'react-dom\': \'\\node_modules\\react-dom\\dist\\react-dom.min.js\' to \'\\node_modules\\react-dom\\dist\\react-dom.min.js/lib/EventPropagators\'\n      using description file: \\node_modules\\react-tap-event-plugin\\package.json (relative path: ./src)\n        Field \'browser\' doesn\'t contain a valid alias configuration\n      after using description file: \\node_modules\\react-tap-event-plugin\\package.json (relative path: ./src)\n        using description file: \\node_modules\\react-dom\\package.json (relative path: ./dist/react-dom.min.js/lib/EventPropagators)\n          no extension\n            Field \'browser\' doesn\'t contain a valid alias configuration\n            \\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\EventPropagators doesn\'t exist\n          .js\n            Field \'browser\' doesn\'t contain a valid alias configuration\n            \\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\EventPropagators.js doesn\'t exist\n          .json\n            Field \'browser\' doesn\'t contain a valid alias configuration\n            \\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\EventPropagators.json doesn\'t exist\n          as directory\n            \\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\EventPropagators doesn\'t exist\n[\\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\EventPropagators]\n[\\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\EventPropagators.js]\n[\\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\EventPropagators.json]\n[\\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\EventPropagators]\n @ ./~/react-tap-event-plugin/src/TapEventPlugin.js 24:23-64\n @ ./~/react-tap-event-plugin/src/injectTapEventPlugin.js\n @ ./components/shared/Layout.js\n @ ./pages/discover.js?entry\n @ multi ./pages/discover.js?entry',
     './~/react-tap-event-plugin/src/TapEventPlugin.js\nModule not found: Error: Can\'t resolve \'react-dom/lib/SyntheticUIEvent\' in \'\\node_modules\\react-tap-event-plugin\\src\'\nresolve \'react-dom/lib/SyntheticUIEvent\' in \'\\node_modules\\react-tap-event-plugin\\src\'\n  Parsed request is a module\n  using description file: \\node_modules\\react-tap-event-plugin\\package.json (relative path: ./src)\n    Field \'browser\' doesn\'t contain a valid alias configuration\n    aliased with mapping \'react-dom\': \'\\node_modules\\react-dom\\dist\\react-dom.min.js\' to \'\\node_modules\\react-dom\\dist\\react-dom.min.js/lib/SyntheticUIEvent\'\n      using description file: \\node_modules\\react-tap-event-plugin\\package.json (relative path: ./src)\n        Field \'browser\' doesn\'t contain a valid alias configuration\n      after using description file: \\node_modules\\react-tap-event-plugin\\package.json (relative path: ./src)\n        using description file: \\node_modules\\react-dom\\package.json (relative path: ./dist/react-dom.min.js/lib/SyntheticUIEvent)\n          no extension\n            Field \'browser\' doesn\'t contain a valid alias configuration\n            \\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\SyntheticUIEvent doesn\'t exist\n          .js\n            Field \'browser\' doesn\'t contain a valid alias configuration\n            \\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\SyntheticUIEvent.js doesn\'t exist\n          .json\n            Field \'browser\' doesn\'t contain a valid alias configuration\n            \\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\SyntheticUIEvent.json doesn\'t exist\n          as directory\n            \\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\SyntheticUIEvent doesn\'t exist\n[\\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\SyntheticUIEvent]\n[\\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\SyntheticUIEvent.js]\n[\\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\SyntheticUIEvent.json]\n[\\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\SyntheticUIEvent]\n @ ./~/react-tap-event-plugin/src/TapEventPlugin.js 25:23-64\n @ ./~/react-tap-event-plugin/src/injectTapEventPlugin.js\n @ ./components/shared/Layout.js\n @ ./pages/discover.js?entry\n @ multi ./pages/discover.js?entry',
     './~/react-tap-event-plugin/src/TapEventPlugin.js\nModule not found: Error: Can\'t resolve \'react-dom/lib/ViewportMetrics\' in \'\\node_modules\\react-tap-event-plugin\\src\'\nresolve \'react-dom/lib/ViewportMetrics\' in \'\\node_modules\\react-tap-event-plugin\\src\'\n  Parsed request is a module\n  using description file: \\node_modules\\react-tap-event-plugin\\package.json (relative path: ./src)\n    Field \'browser\' doesn\'t contain a valid alias configuration\n    aliased with mapping \'react-dom\': \'\\node_modules\\react-dom\\dist\\react-dom.min.js\' to \'\\node_modules\\react-dom\\dist\\react-dom.min.js/lib/ViewportMetrics\'\n      using description file: \\node_modules\\react-tap-event-plugin\\package.json (relative path: ./src)\n        Field \'browser\' doesn\'t contain a valid alias configuration\n      after using description file: \\node_modules\\react-tap-event-plugin\\package.json (relative path: ./src)\n        using description file: \\node_modules\\react-dom\\package.json (relative path: ./dist/react-dom.min.js/lib/ViewportMetrics)\n          no extension\n            Field \'browser\' doesn\'t contain a valid alias configuration\n            \\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\ViewportMetrics doesn\'t exist\n          .js\n            Field \'browser\' doesn\'t contain a valid alias configuration\n            \\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\ViewportMetrics.js doesn\'t exist\n          .json\n            Field \'browser\' doesn\'t contain a valid alias configuration\n            \\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\ViewportMetrics.json doesn\'t exist\n          as directory\n            \\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\ViewportMetrics doesn\'t exist\n[\\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\ViewportMetrics]\n[\\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\ViewportMetrics.js]\n[\\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\ViewportMetrics.json]\n[\\node_modules\\react-dom\\dist\\react-dom.min.js\\lib\\ViewportMetrics]\n @ ./~/react-tap-event-plugin/src/TapEventPlugin.js 27:22-62\n @ ./~/react-tap-event-plugin/src/injectTapEventPlugin.js\n @ ./components/shared/Layout.js\n @ ./pages/discover.js?entry\n @ multi ./pages/discover.js?entry',
     'commons.js from UglifyJs\nInvalid assignment [commons.js:18983,31]' ],
  warnings: [] }

eranimo · 2018-02-23T16:18:21Z

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

nkzawa added the question label Nov 14, 2016

arunoda closed this as completed Dec 22, 2016

cyrus-za mentioned this issue Jul 22, 2017

Issues with libraries #119

Closed

lock bot locked as resolved and limited conversation to collaborators Feb 23, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Material-ui – injectTapEventPlugin() #232

Material-ui – injectTapEventPlugin() #232

nic commented Nov 8, 2016

QuentinDejean commented Nov 9, 2016 •

edited

Loading

frol commented Nov 9, 2016

nic commented Nov 9, 2016

frol commented Nov 9, 2016 •

edited

Loading

nic commented Nov 10, 2016

allpwrfulroot commented Nov 29, 2016

EehMauro commented Dec 20, 2016

arunoda commented Dec 20, 2016

EehMauro commented Dec 21, 2016 •

edited

Loading

arunoda commented Dec 21, 2016

EehMauro commented Dec 21, 2016

arunoda commented Dec 21, 2016

EehMauro commented Dec 22, 2016

arunoda commented Dec 22, 2016

EehMauro commented Dec 22, 2016

arunoda commented Dec 22, 2016

maximblack commented Jan 9, 2017

johhansantana commented Jan 11, 2017 •

edited

Loading

ooade commented Jan 13, 2017 •

edited

Loading

arunoda commented Jan 13, 2017

lorensr commented Jan 13, 2017 •

edited

Loading

maximblack commented Jan 13, 2017

ooade commented Jan 13, 2017

sekmet commented Feb 13, 2017

jcheroske commented May 9, 2017

cyrus-za commented Jul 22, 2017 •

edited

Loading

eranimo commented Feb 23, 2018

Material-ui – injectTapEventPlugin() #232

Material-ui – injectTapEventPlugin() #232

Comments

nic commented Nov 8, 2016

QuentinDejean commented Nov 9, 2016 • edited Loading

frol commented Nov 9, 2016

nic commented Nov 9, 2016

frol commented Nov 9, 2016 • edited Loading

nic commented Nov 10, 2016

allpwrfulroot commented Nov 29, 2016

EehMauro commented Dec 20, 2016

arunoda commented Dec 20, 2016

EehMauro commented Dec 21, 2016 • edited Loading

arunoda commented Dec 21, 2016

EehMauro commented Dec 21, 2016

arunoda commented Dec 21, 2016

EehMauro commented Dec 22, 2016

arunoda commented Dec 22, 2016

EehMauro commented Dec 22, 2016

arunoda commented Dec 22, 2016

maximblack commented Jan 9, 2017

johhansantana commented Jan 11, 2017 • edited Loading

ooade commented Jan 13, 2017 • edited Loading

arunoda commented Jan 13, 2017

lorensr commented Jan 13, 2017 • edited Loading

maximblack commented Jan 13, 2017

ooade commented Jan 13, 2017

sekmet commented Feb 13, 2017

jcheroske commented May 9, 2017

cyrus-za commented Jul 22, 2017 • edited Loading

eranimo commented Feb 23, 2018

QuentinDejean commented Nov 9, 2016 •

edited

Loading

frol commented Nov 9, 2016 •

edited

Loading

EehMauro commented Dec 21, 2016 •

edited

Loading

johhansantana commented Jan 11, 2017 •

edited

Loading

ooade commented Jan 13, 2017 •

edited

Loading

lorensr commented Jan 13, 2017 •

edited

Loading

cyrus-za commented Jul 22, 2017 •

edited

Loading