adding injectTapEventPlugin() break my hot-reload setup

[sulliwane]

After I add this:

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

// Needed for onTouchTap
// Can go away when react 1.0 release
// Check this repo:
// https://github.com/zilverline/react-tap-event-plugin
injectTapEventPlugin();

Both of my hot reload setup don't "hot reload" anymore:

• https://github.com/mxstbr/react-boilerplate
• https://github.com/kriasoft/react-starter-kit

If I remove it, then my changes on save are hot-reloaded in the browser (without the need to refresh the page).

any ideas?

thanks.

[diegoaguilar]

@sulliwane did you solve or figured out about this?

[julienvincent]

Just wrap in a try catch. Quick 'hacky' fix.

[madjam002]

I've tried to reproduce this, do you get any other errors in the console output?

[julienvincent]

I only received the error while using jspm's hot reloader, not webpack. I don't have the environment that was producing the error on hand, but this is the code that produced it:

  alreadyInjected = true;

  require('react/lib/EventPluginHub').injection.injectEventPluginsByName({
    'TapEventPlugin':       require('./TapEventPlugin.js')(shouldRejectClick)
  });

Here is the blob

Hope that helps.

Note: I do realise that this is more a problem with my hot-reload setup then with your library

[peteruithoven]

How I'm doing this with the SystemJS hot reloader:

import getHotReloadStore from 'systemjs-hot-reloader-store';
const hotStore = getHotReloadStore('myproject:index'); // store for state over hot reloads

if (!hotStore.tapInjected) {
  injectTapEventPlugin();
  hotStore.tapInjected = true;
}

[julienvincent]

That is definitely a cleaner way of doing it. Can I just point out you wrote hotStore.tabInjected instead of hotStore.tapInjected. Sorry - just my OCD acting up ;)

[diegoaguilar]

@julienvincent I'm a bit confused, any way to use injectTabEventPlugin and still get webpack's hot reload working? I generally use ES6 module imports.

[julienvincent]

@diegoaguilar I have never experienced any issues with webpack hot-reloading and this plugin. What would be helpful in finding the issue is creating a bare, minimal repo that uses the latest webpack, babel (or whatever your transpiler is) and injectTabEventPlugin.

[julienvincent]

If said repo still fires the error you are experiencing, then link it here

[peteruithoven]

@julienvincent Thanks, fixed it.

[nomadtechie]

hi guys--wondering if there is:

A) Consensus on a workaround for this
B) If there is a fix for this now?

Thanks!

cc @guybedford

[extonec]

import React, {Component} from 'react';
import injectTapEventPlugin from 'react-tap-event-plugin';

class App extends Component {
  componentWillMount() {
    injectTapEventPlugin();
  }
  render() {...};
}

[natdm]

@extonec - that still gives me the same issue. Strange that it works for you.

class App extends Component {
	componentWillMount() {
		// Needed for onTouchTap 
		// http://stackoverflow.com/a/34015469/988941 
		injectTapEventPlugin()
	}

	render() {
		return (
			<Provider store={store}>
				<MuiThemeProvider>
					<Router history={browserHistory}>
						{routes}
					</Router>
				</MuiThemeProvider>
			</Provider>
		)
	}
}

const render = () => {ReactDOM.render(<App />, document.getElementById('app'))};
store.subscribe(render);
store.subscribe(() => console.log(store.getState()))
render();

Yields:

bundle.js:1710 [HMR] Cannot check for update (Full reload needed)handleError @ bundle.js:1710applyCallback @ bundle.js:1640hotApply @ bundle.js:526cb @ bundle.js:1647hotUpdateDownloaded @ bundle.js:310hotAddUpdateChunk @ bundle.js:282webpackHotUpdateCallback @ bundle.js:4(anonymous function) @ 0.8cd3b21….hot-update.js:1
bundle.js:1711 [HMR] 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 (http://localhost:3001/static/bundle.js:30063:16)
    at injectTapEventPlugin (http://localhost:3001/static/bundle.js:30003:6)
    at App.componentWillMount (http://localhost:3001/static/bundle.js:1844:39)
    at http://localhost:3001/static/bundle.js:17272:24
    at measureLifeCyclePerf (http://localhost:3001/static/bundle.js:16999:13)
    at ReactCompositeComponentWrapper.performInitialMount (http://localhost:3001/static/bundle.js:17271:10)
    at ReactCompositeComponentWrapper.mountComponent (http://localhost:3001/static/bundle.js:17182:22)
    at Object.mountComponent (http://localhost:3001/static/bundle.js:9752:36)
    at ReactCompositeComponentWrapper.performInitialMount (http://localhost:3001/static/bundle.js:17295:35)
    at ReactCompositeComponentWrapper.mountComponent (http://localhost:3001/static/bundle.js:17182:22)

[peteruithoven]

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

Let's the story, the place you're calling it causes it to be called multiple times.

We moved the injection into a separate module, since this module doesn't change it's never reimported and therefore only executed once.

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

// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
// Used by Material-ui
injectTapEventPlugin();