Skip to content
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

Master #7

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Master #7

wants to merge 3 commits into from

Conversation

rsaccon
Copy link
Contributor

@rsaccon rsaccon commented Mar 13, 2016

menu now works, with react toolbox 0.14.2

@developit
Copy link
Owner

@rsaccon Awesome! You didn't happen to check if the Drawer and Popup examples broke, did you? I actually accidentally updated to 0.14.2 today and I may have seen some issues. Apparently there was an API in React ~0.13 for rendering partial VDOM trees into a different root (which seems like a horrible idea, much better implemented as a module) and it might suddenly be relying on that?

@rsaccon
Copy link
Contributor Author

rsaccon commented Mar 13, 2016

@developit OMG, you are right, Drawer, Dialog and Snackbar are broken now. So I guess you better not merge this.
Btw, have you ever tried to run material-ui on preact ? I think I am gonna give it a try, just to see how far preact gets with that.

@developit
Copy link
Owner

I haven't, but I really (really!) want to see it. It seems to be a lot more polished than toolbox. Thinking about setting up a repo? 💯

@rsaccon
Copy link
Contributor Author

rsaccon commented Mar 13, 2016

I just played around a little bit with the webpack example of material-ui and preact, and there seem to be some issues, e.g. with the React Events and other special React stuff, not covered by preact-compat:

ERROR in ./src/app/app.jsx
Module not found: Error: Cannot resolve module 'preact-compat/lib/ReactMount' in /Users/robertosaccon/material-ui/examples/webpack-example/src/app
 @ ./src/app/app.jsx 1:378-409

ERROR in ./src/app/Main.jsx
Module not found: Error: Cannot resolve module 'preact-compat/lib/ReactMount' in /Users/robertosaccon/material-ui/examples/webpack-example/src/app
 @ ./src/app/Main.jsx 1:378-409

ERROR in ./~/react-tap-event-plugin/src/injectTapEventPlugin.js
Module not found: Error: Cannot resolve module 'preact-compat/lib/EventPluginHub' in /Users/robertosaccon/material-ui/examples/webpack-example/node_modules/react-tap-event-plugin/src
 @ ./~/react-tap-event-plugin/src/injectTapEventPlugin.js 7:2-37

ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'preact-compat/lib/EventConstants' in /Users/robertosaccon/material-ui/examples/webpack-example/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 'preact-compat/lib/EventPluginUtils' in /Users/robertosaccon/material-ui/examples/webpack-example/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 'preact-compat/lib/EventPropagators' in /Users/robertosaccon/material-ui/examples/webpack-example/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 'preact-compat/lib/SyntheticUIEvent' in /Users/robertosaccon/material-ui/examples/webpack-example/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 'preact-compat/lib/ViewportMetrics' in /Users/robertosaccon/material-ui/examples/webpack-example/node_modules/react-tap-event-plugin/src
 @ ./~/react-tap-event-plugin/src/TapEventPlugin.js 27:22-58

ERROR in ./~/material-ui/~/react-addons-transition-group/index.js
Module not found: Error: Cannot resolve module 'preact-compat/lib/ReactTransitionGroup' in /Users/robertosaccon/material-ui/examples/webpack-example/node_modules/material-ui/node_modules/react-addons-transition-group
 @ ./~/material-ui/~/react-addons-transition-group/index.js 1:17-58

ERROR in ./~/material-ui/~/react-addons-create-fragment/index.js
Module not found: Error: Cannot resolve module 'preact-compat/lib/ReactFragment' in /Users/robertosaccon/material-ui/examples/webpack-example/node_modules/material-ui/node_modules/react-addons-create-fragment
 @ ./~/material-ui/~/react-addons-create-fragment/index.js 1:17-51

ERROR in ./~/material-ui/~/react-addons-pure-render-mixin/index.js
Module not found: Error: Cannot resolve module 'preact-compat/lib/ReactComponentWithPureRenderMixin' in /Users/robertosaccon/material-ui/examples/webpack-example/node_modules/material-ui/node_modules/react-addons-pure-render-mixin
 @ ./~/material-ui/~/react-addons-pure-render-mixin/index.js 1:17-71

ERROR in ./~/material-ui/~/react-addons-update/index.js
Module not found: Error: Cannot resolve module 'preact-compat/lib/update' in /Users/robertosaccon/material-ui/examples/webpack-example/node_modules/material-ui/node_modules/react-addons-update
 @ ./~/material-ui/~/react-addons-update/index.js 1:17-44

@developit
Copy link
Owner

Dang. I don't even recognize those modules, kinda seems like it's reaching deep into React. That's a bit disappointing :(

@developit
Copy link
Owner

A bunch of these are fixed now as of Preact 5 :)

@saxicek
Copy link

saxicek commented Aug 11, 2016

@developit Does the fix include Module not found: Error: Cannot resolve module 'preact-compat/lib/ReactMount'? Have problem with that one. :-(

@louisremi
Copy link

This bug seems to be caused by React hot loader : gaearon/react-hot-loader#53

@developit
Copy link
Owner

Correct, that is generally the cause.

@louisremi
Copy link

Do you have any workaround? It seems adopting webpack2 (beta) and switching to react-hot-loader is one way... I haven't tried it yet, but this repo can serve as an example: https://github.com/ctrlplusb/preact-compat-hmr

@developit
Copy link
Owner

@louisremi I just use the Webpack HMR API directly:
https://github.com/developit/preact-boilerplate/blob/master/src/index.js#L6-L18
(Ignore the log stuff unless you want to suppress Webpack HMR logging)

@louisremi
Copy link

Alright, thanks!

Btw, I don't think your requestAnimationFrame throttles calls to init unless you return as soon as you detect that a frame has already been requested, e.g.:

var isFrameRequested = false;
module.hot.accept('./components/app', () => {
  if ( isFrameRequested ) {
    return;
  }
  isFrameRequested = requestAnimationFrame( () => {
    init();
    isFrameRequested = false;
  }
}));

@developit
Copy link
Owner

@louisremi ah, that requestAnimationFrame is actually to wait for Webpack to inject styles prior to re-rendering, not for throttling. Probably unnecessary, but I just didn't like seeing the flicker!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants