New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Material-UI broken with external React #4845

Closed
ericsage opened this Issue Jul 28, 2016 · 14 comments

Comments

8 participants
@ericsage

ericsage commented Jul 28, 2016

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

This comment has been minimized.

Show comment
Hide comment
@nathanmarks

nathanmarks Jul 28, 2016

Member

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

Member

nathanmarks commented Jul 28, 2016

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

@ericsage

This comment has been minimized.

Show comment
Hide comment
@ericsage

ericsage Jul 29, 2016

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

ericsage commented Jul 29, 2016

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

@nathanmarks

This comment has been minimized.

Show comment
Hide comment
@nathanmarks

nathanmarks Jul 29, 2016

Member

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

Member

nathanmarks commented Jul 29, 2016

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

@mpontikes mpontikes referenced this issue Aug 5, 2016

Closed

[core] Organizing Issues #4911

12 of 13 tasks complete
@ricardopolo

This comment has been minimized.

Show comment
Hide comment
@ricardopolo

ricardopolo Aug 22, 2016

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

ricardopolo commented Aug 22, 2016

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

@samrispaud

This comment has been minimized.

Show comment
Hide comment
@samrispaud

samrispaud Nov 16, 2016

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

samrispaud commented Nov 16, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@ericsage

ericsage Nov 19, 2016

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.

ericsage commented Nov 19, 2016

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

This comment has been minimized.

Show comment
Hide comment
@ocolot

ocolot 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)

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

This comment has been minimized.

Show comment
Hide comment
@samrispaud

samrispaud Nov 22, 2016

@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",

samrispaud commented Nov 22, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@ocolot

ocolot 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",

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

This comment has been minimized.

Show comment
Hide comment
@ricardopolo

ricardopolo Nov 23, 2016

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

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

ricardopolo commented Nov 23, 2016

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

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

@radik909

This comment has been minimized.

Show comment
Hide comment
@radik909

radik909 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?

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

This comment has been minimized.

Show comment
Hide comment
@gotdibbs

gotdibbs Jan 11, 2017

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

gotdibbs commented Jan 11, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@radik909

radik909 Jan 26, 2017

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

radik909 commented Jan 26, 2017

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

@oliviertassinari

This comment has been minimized.

Show comment
Hide comment
@oliviertassinari

oliviertassinari Jul 28, 2017

Member

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 :).

Member

oliviertassinari commented Jul 28, 2017

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 :).

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