Material-ui: Material-UI broken with external React

[ericsage]

Problem description

I'm working on a Biomedical project that uses material-ui for many components, some of which are shipped as separate npm modules. We have made React an external in webpack:

  externals: {
    "react":"React",
    "react-dom":"ReactDOM",
    'react-addons-transition-group': 'var React.addons.TransitionGroup',
    'react-addons-pure-render-mixin': 'var React.addons.PureRenderMixin',
    'react-addons-create-fragment': 'var React.addons.createFragment',
    'react-addons-update': 'var React.addons.update'
  },

This breaks React-Tap-Event-Plugin which is looking for specific React subfiles, for example:

ERROR in ./~/react-tap-event-plugin/src/injectTapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/EventPluginHub' in /root/Code/src/NDExValetUser/node_modules/react-tap-event-plugin/src
 @ ./~/react-tap-event-plugin/src/injectTapEventPlugin.js 7:2-37

We've spent some time looking for a solution to this problem, and we desperately need a fix for this. This project is used by several cancer research laboratories who depend on our timely releases.

• Material-UI: 0.15.2
• React: 15.0.2
• React-Tap-Event-Plugin: 1.0
• Browser: Chrome

[nathanmarks]

@ericsage Check out the setup in this pull request https://github.com/callemall/material-ui/pull/4342

[ericsage]

@nathanmarks Yes, this would fix the problem, I would love to see this merged into a release as soon as possible.

[nathanmarks]

@ericsage Can you just use the tap event plugin the same way until then?

[ricardopolo]

@nathanmarks @ericsage What did you do in this case? The references issue does not look like it will be merge soon :disappointed:

[samrispaud]

@nathanmarks @ericsage @ricardopolo also having the same issue. did you find a fix for this? if you bump down the versions for those packages do you still see problems?

[ericsage]

So I've come back to this because our code base broke _again_ because of the tap event plugin. The new release of React (15.4.0) has this to say about tap event using the React internal APIs

If you only use the official and documented React APIs you won't need to change anything in your application.

However, there is a possibility that you imported private APIs from react/lib/*, or that a package you rely on might use them. We would like to remind you that this was never supported, and that your apps should not rely on internal APIs. The React internals will keep changing as we work to make React better.

The plugin says it only supports up to 15.4.0, and will break because of the above reason when used with 15.4.0. This is a serious bug that needs to be fixed ASAP, and tap event plugin needs to be moved inside of material-ui so that we can stop suffering from this hack.

[ocolot]

I got this trace (related to the above comment) when I tried updating from react 15.3 to 15.4:

1:03:18 PM web.1 |  Error: Cannot find module 'react/lib/ReactDOM'
1:03:18 PM web.1 |      at Function.Module._resolveFilename (module.js:469:15)
1:03:18 PM web.1 |      at Function.Module._load (module.js:417:25)
1:03:18 PM web.1 |      at Module.require (module.js:497:17)
1:03:18 PM web.1 |      at require (internal/module.js:20:19)
1:03:18 PM web.1 |      at Object.<anonymous> (/Users/oliviercolot/dev/hazaway/node_modules/react-dom/index.js:3:18)
1:03:18 PM web.1 |      at Module._compile (module.js:570:32)
1:03:18 PM web.1 |      at Module._extensions..js (module.js:579:10)
1:03:18 PM web.1 |      at Object.require.extensions.(anonymous function) [as .js] (/Users/oliviercolot/dev/hazaway/node_modules/babel-register/lib/node.js:152:7)
1:03:18 PM web.1 |      at Module.load (module.js:487:32)
1:03:18 PM web.1 |      at tryModuleLoad (module.js:446:12)
1:03:18 PM web.1 |      at Function.Module._load (module.js:438:3)
1:03:18 PM web.1 |      at Module.require (module.js:497:17)
1:03:18 PM web.1 |      at require (internal/module.js:20:19)
1:03:18 PM web.1 |      at Object.<anonymous> (/Users/oliviercolot/dev/hazaway/node_modules/material-ui/internal/FocusRipple.js:35:17)
1:03:18 PM web.1 |      at Module._compile (module.js:570:32)
1:03:18 PM web.1 |      at Module._extensions..js (module.js:579:10)
1:03:18 PM web.1 |      at Object.require.extensions.(anonymous function) [as .js] (/Users/oliviercolot/dev/hazaway/node_modules/babel-register/lib/node.js:152:7)

[samrispaud]

@ericsage @ocolot I believe your issue is related to an update with react breaking react-tap-event-plugin. see this issue. the PR was merged in so as long as you use "react-tap-event-plugin": "git+https://github.com/zilverline/react-tap-event-plugin.git#master" you should be good to go. Things are working for me and I'm using the following set up

"react": "^15.4.0",
"react-dom": "^15.4.0",
"material-ui": "^0.15.4",
"react-tap-event-plugin": "git+https://github.com/zilverline/react-tap-event-plugin.git#master",

[ocolot]

@samrispaud thx!

It's now working with the following versions:

"react": "^15.4.1",
"react-dom": "^15.4.1",
"material-ui": "^0.16.4",
"react-tap-event-plugin": "^2.0.1",

[ricardopolo]

@codingneat look at this.... is what we need!! 😄

Would you please schedule to check if this work? Thanks!

[radik909]

@ocolot
I use the same versions as you but still I get the error Uncaught Error: Cannot find module 'react-dom/lib/ReactPerf' from 'react/lib/ReactAddonsDOMDependencies.js'

How to fix this?

[gotdibbs]

@radik909 Did you get it working? I just came across this wheninstalling the material-ui package followed by the react-tap-event-plugin (after I realized it was required, getting started docs are a bit inconsistent/unclear to that regard). However, after uninstalling the packages @ocolot mentioned, then installing those exact versions, I'm off to the races.

[radik909]

@gotdibbs Sorry for the late reply. Nope. I didn't get it working, so just dumped the versions.

[oliviertassinari]

We have removed the react-tap-event-plugin dependency on the v1-beta branch. People can rely on the onClick callback instead. We can close :).