14

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 ./~/react-tap-event-plugin/src/injectTapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/EventPluginHub' in /Users/thomas/tom/node_modules/react-tap-event-plugin/src
 @ ./~/react-tap-event-plugin/src/injectTapEventPlugin.js 23:2-37

ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/EventConstants' in /Users/thomas/tom/node_modules/react-tap-event-plugin/src
 @ ./~/react-tap-event-plugin/src/TapEventPlugin.js 22:21-56

ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/EventPluginUtils' in /Users/thomas/tom/node_modules/react-tap-event-plugin/src
 @ ./~/react-tap-event-plugin/src/TapEventPlugin.js 23:23-60

ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/EventPropagators' in /Users/thomas/tom/node_modules/react-tap-event-plugin/src
 @ ./~/react-tap-event-plugin/src/TapEventPlugin.js 24:23-60

ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/SyntheticUIEvent' in /Users/thomas/tom/node_modules/react-tap-event-plugin/src
 @ ./~/react-tap-event-plugin/src/TapEventPlugin.js 25:23-60

ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/ViewportMetrics' in /Users/thomas/tom/node_modules/react-tap-event-plugin/src
 @ ./~/react-tap-event-plugin/src/TapEventPlugin.js 27:22-58

ERROR in ./~/react-portal/build/portal.js
Module not found: Error: Cannot resolve module 'react/lib/CSSPropertyOperations' in /Users/thomas/tom/node_modules/react-portal/build
 @ ./~/react-portal/build/portal.js 17:29-71

I found https://github.com/thereactivestack/meteor-webpack/issues/21 (I see this is very recent, read: yesterday), and after messing around with my packages.json, changing react, react-dom, material-ui version numbers and running npm i --save react-tap-event-plugin, I got down to 'only' 1 error message

ERROR in ./~/react-portal/build/portal.js
Module not found: Error: Cannot resolve module 'react/lib/CSSPropertyOperations' in /Users/thomas/react-airbnb/node_modules/react-portal/build
 @ ./~/react-portal/build/portal.js 17:29-71

I'm pretty new and I'm not sure how to go about fixing this. Any hints greatly welcomed.

Thanks

friartuck
  • 2,954
  • 4
  • 33
  • 67

5 Answers5

26

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.

  • Nice find. Thanks – Sauleil Dec 14 '16 at 21:30
  • simplest solution. – MuSheng Mar 23 '17 at 05:13
  • Nice find, yeah right. I'm pretty sure you just rewrote my answer. Haha. Solve your own issues. – Aiky30 Mar 15 '18 at 15:14
  • What if you're using 16+? This doesn't seem to work. – Oliver Dixon Dec 25 '18 at 16:42
  • @OliverDixon The user that wrote this just copied the details from my answer and has no idea why or how this issue is resolved. You'll find that as of React 16 the tap event plugin is deprecated because the methods that react tap event relies on in react have been removed. See their deprecation notice: https://www.npmjs.com/package/react-tap-event-plugin – Aiky30 Jan 30 '19 at 16:25
7

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},
  ...
}
Pankaj Vishwani
  • 332
  • 1
  • 4
  • 9
  • 1
    In newer version of react, CSSPropertyOperations.js has been moved to react-dom/lib/CSSPropertyOperations but other npm package are looking for CSSPropertyOperations in react/lib/CSSPropertyOperations. So for all such modules, i added an alias like: – Pankaj Vishwani Nov 18 '16 at 08:28
  • "react/lib/CSSPropertyOperations": "react-dom/lib/CSSPropertyOperations". When webpack see "react/lib/CSSPropertyOperations", it will automatically go to "react-dom/lib/CSSPropertyOperations" instead – Pankaj Vishwani Nov 18 '16 at 08:30
  • 1
    My merge request is accepted by owners of https://github.com/strangebnb/react-airbnb. You can simply do git pull and things should work. – Pankaj Vishwani Nov 18 '16 at 18:37
7

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

Aiky30
  • 785
  • 6
  • 13
  • 1
    Thanks for the suggestion. I updated react-tap-event-plugin but still see one last remaining error for "CSSPropertyOperations". Added an alias for that. I have created a pull request for original repo. Hopefully my changes will get merged. – Pankaj Vishwani Nov 18 '16 at 20:05
  • Pankaj makes a good point. I fixed the react-tap-event error by updating, and was left with the CssPropertyOperations, unless they are not mutually exclusive ? – friartuck Nov 19 '16 at 02:15
  • @Prof, The error for the CssPropertyOperations looks like it is for the package: react-portal which I do not have. I would say that that library is still using the internal react-dom version still and requires a fix from them and then an update by you. Please refer to the error: ERROR in ./~/react-portal/build/portal.js Module not found: Error: Cannot resolve module 'react/lib/CSSPropertyOperations' in /Users/thomas/tom/node_modules/react-portal/build @ ./~/react-portal/build/portal.js 17:29-71 – Aiky30 Nov 21 '16 at 11:20
  • As IanH has said, you can just fix the version to the version that you support rather than upgrading. I personally wanted to upgrade. – Aiky30 Nov 21 '16 at 11:21
2

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”,

IanH
  • 191
  • 1
  • 5
0

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

am1991
  • 134
  • 1
  • 7