Material-UI broken with external React #4845

Open
ericsage opened this Issue Jul 28, 2016 · 13 comments

Projects

None yet

7 participants

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

@ericsage Check out the setup in this pull request #4342

@ericsage

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

@nathanmarks
Collaborator
nathanmarks commented Jul 29, 2016 edited

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

@mpontikes mpontikes referenced this issue Aug 5, 2016
Open

[core] Organizing Issues #4911

9 of 13 tasks complete
@ricardopolo

@nathanmarks @ericsage What did you do in this case? The references issue does not look like it will be merge soon ๐Ÿ˜ž

@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
ericsage commented Nov 19, 2016 edited

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
ocolot commented Nov 22, 2016

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
ocolot commented Nov 23, 2016

@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
radik909 commented Dec 9, 2016

@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
gotdibbs commented Jan 11, 2017 edited

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment