ERROR in ./~/react-tap-event-plugin/src/injectTapEventPlugin.js

Question

React noob here. Trying to clone and run https://github.com/strangebnb/react-airbnb

I clone. run npm install. Then webpack but I get

ERROR in ./~/rea         


        

Answer 1

In the short term, you could fix React to a specific earlier version.

If your package.json file contains something like: "react": "^15.3.2", in the dependencies section, you could change it to say "react": "=15.3.2”,

Answer 2

Due to update in React, react-tap-event-plugin breaks

Change react-tap-event-plugin to ^2.0.0 in your package.json if using react version ^15.4.0.

Answer 3

UPDATE: As of React 16 the react-tap-event-plugin is deprecated and no longer required https://www.npmjs.com/package/react-tap-event-plugin

Old solution redundant as of React 16 Updating the react tap event plugin to over 2.0.1 will fix your issue if you're using React 15.4.0.

A new React version has been released (https://github.com/facebook/react/blob/master/CHANGELOG.md), and I read recently that there have been big changes where react-dom still secretly lived on in the react package but is now being removed. If you read 15.4.0, the first point: 'React package and browser build no longer "secretly" includes React DOM. (@sebmarkbage in #7164 and #7168)'

Also reading the tap event plugins npm docs: Only the latest tap event plugin (v2.0.1 currently) supports React 15.4+. https://www.npmjs.com/package/react-tap-event-plugin

Check the version of React and react-tap-event-plugin. npm list --depth=0

Answer 4

I forked that repo and fixed this issue in my repo. Also, sent pull request to the owner of original repo. Here's link to my forked repo: https://github.com/pankajvishwani/react-airbnb

If you don't want to clone my repo, you can add the following in webpack.config.js:

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);
});

module.exports = {
  ...
  resolve: {alias: alias},
  ...
}

Answer 5

For react 16+ react-tap-event-plugin is not required anymore: react-tap-event-plugin