Inferno: Make compatible with Material-UI

[cia48621793]

Slick material design without bloat vdom library == Material-UI + InfernoJS.

But:

ERROR in ./~/react-addons-create-fragment/index.js
Module not found: Error: Cannot resolve module 'inferno-compat/lib/ReactFragment' in node_modules\react-addons-create-fragment
 @ ./~/react-addons-create-fragment/index.js 1:17-51

ERROR in ./~/react-addons-transition-group/index.js
Module not found: Error: Cannot resolve module 'inferno-compat/lib/ReactTransitionGroup' in node_modules\react-addons-transition-group
 @ ./~/react-addons-transition-group/index.js 1:17-58

Give me a fix or a workaround.

[trueadm]

I'll need to look into this. I believe that this will no longer be part of React 15.4 as it requires an internal API, rather it will be an external lib. I'll look into this later today

[trueadm]

In fact, @cia48621793 have you tried this with React 15.4 at all?

[trueadm]

@cia48621793 can you try with beta16? It was just released.

[cia48621793]

@trueadm it doesn't work either.

ERROR in ./~/react-addons-shallow-compare/index.js
Module not found: Error: Cannot resolve module 'inferno-compat/lib/shallowCompare' in node_modules\react-addons-shallow-compare
 @ ./~/react-addons-shallow-compare/index.js 1:17-52

ERROR in ./~/react-addons-create-fragment/index.js
Module not found: Error: Cannot resolve module 'inferno-compat/lib/ReactFragment' in node_modules\react-addons-create-fragment
 @ ./~/react-addons-create-fragment/index.js 1:17-51

ERROR in ./~/react-addons-transition-group/index.js
Module not found: Error: Cannot resolve module 'inferno-compat/lib/ReactTransitionGroup' in node_modules\react-addons-transition-group
 @ ./~/react-addons-transition-group/index.js 1:17-58

{
  "dependencies": {
   ...
    "inferno": "^1.0.0-beta16",
    "inferno-compat": "^1.0.0-beta16",
    "material-ui": "latest",
    ...
  }
}

[cia48621793]

Even with this simple example:

import React from 'react'
global.React = React
import ReactDOM from 'react-dom'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import FlatButton from 'material-ui/FlatButton'
ReactDOM.render <MuiThemeProvider>
  <FlatButton label='test' />
</MuiThemeProvider>
, document.getElementById 'app'

resolve: alias:
    'react': 'inferno-compat'
    'react-dom': 'inferno-compat'



md5-6eabb735f300a4188a1340908508a3f9



ERROR in ./~/react-addons-create-fragment/index.js
Module not found: Error: Cannot resolve module 'inferno-compat/lib/ReactFragment' in node_modules\react-addons-create-fragment
 @ ./~/react-addons-create-fragment/index.js 1:17-51

ERROR in ./~/react-addons-transition-group/index.js
Module not found: Error: Cannot resolve module 'inferno-compat/lib/ReactTransitionGroup' in node_modules\react-addons-transition-group
 @ ./~/react-addons-transition-group/index.js 1:17-58

ERROR in ./~/react-addons-shallow-compare/index.js
Module not found: Error: Cannot resolve module 'inferno-compat/lib/shallowCompare' in node_modules\react-addons-shallow-compare
 @ ./~/react-addons-shallow-compare/index.js 1:17-52

[cia48621793]

With beta@21:

ERROR in ./~/react-addons-shallow-compare/index.js
Module not found: Error: Cannot resolve module 'inferno-compat/lib/shallowCompare' in node_modules\react-addons-shallow-compare
 @ ./~/react-addons-shallow-compare/index.js 1:17-52

Good work!

[trueadm]

@cia48621793 awesome, I'll get that sorted today for you :)

[cia48621793]

It can now render the flat button as expected. However, when I presses the button

Uncaught TypeError: event.persist is not a function

The same culprit of Preact.

EDIT: The reason: There were no synthetic event in Inferno either for Preact.

[trueadm]

I've pushed a potential fix to dev. Can you let me know if it works? If you cope the contents of this:

https://github.com/trueadm/inferno/blob/master/packages/inferno/dist/inferno-compat.js

to your node_modules/inferno/dist/inferno-compat.js (this is for the event.persist error)

Thanks!

[geohuz]

I'm also trying to use inferno with material-ui, and here is additional issue when react-tap-plugin is used in the project(it's for mobile touchtap and used internally in material-ui):

ERROR in ./~/react-tap-event-plugin/src/injectTapEventPlugin.js
Module not found: Error: Cannot resolve module 'inferno-compat/lib/EventPluginHub' in /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 'inferno-compat/lib/EventConstants' in /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 'inferno-compat/lib/EventPluginUtils' in /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 'inferno-compat/lib/EventPropagators' in /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 'inferno-compat/lib/SyntheticUIEvent' in /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 'inferno-compat/lib/ViewportMetrics' in /node_modules/react-tap-event-plugin/src
 @ ./~/react-tap-event-plugin/src/TapEventPlugin.js 27:22-58

[trueadm]

@geohuz I'll try and add support for EventPluginHub too, although likely to be stubbed out. The other thing is that, and this applies to all react/lib/... requires – they've been removed in React 15.4. So they won't even work with the latest React anyway. How has the materialui dealt with React 15.4?

[trueadm]

Here's some more info on this: http://stackoverflow.com/questions/40642662/material-ui-response-to-breaking-change-in-react-15-4-0-cannot-resolve-module

I've added a no-op for EventPluginHub usage for now. It should hopefully get you further :) I'll do a release to NPM tonight.

[trueadm]

@geohuz can you try beta22 please?

[geohuz]

@trueadm thanks for helping me out! And I can confirm that the EventPluginHub error has gone now. But others are persistent, I'm using the following version:

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

So I'm using all the newest version.

BTW, I noticed somebody in the material-ui said "You need to use the latest version of react-tap-event-plugin which relies on the correct internal library from react-dom instead of react", and I also found those missing js files are under the react-dom/lib directory. Not sure if this is a clue.

[trueadm]

@geohuz what error messages are you getting now? I need to know so I can map the internal API calls to Inferno. Thankfully these will be all gone one day once React cuts of internal private usage.

[geohuz]

@trueadm, here is my error list:

ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'inferno-compat/lib/EventConstants' in /Users/geohu/Codings/Side_Projects/sfbmobile/node_modules/react-tap-event-plugin/src
 @ ./~/react-tap-event-plugin/src/TapEventPlugin.js 22:21-60

ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'inferno-compat/lib/EventPluginUtils' in /Users/geohu/Codings/Side_Projects/sfbmobile/node_modules/react-tap-event-plugin/src
 @ ./~/react-tap-event-plugin/src/TapEventPlugin.js 23:23-64

ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'inferno-compat/lib/EventPropagators' in /Users/geohu/Codings/Side_Projects/sfbmobile/node_modules/react-tap-event-plugin/src
 @ ./~/react-tap-event-plugin/src/TapEventPlugin.js 24:23-64

ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'inferno-compat/lib/SyntheticUIEvent' in /Users/geohu/Codings/Side_Projects/sfbmobile/node_modules/react-tap-event-plugin/src
 @ ./~/react-tap-event-plugin/src/TapEventPlugin.js 25:23-64

ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'inferno-compat/lib/ViewportMetrics' in /Users/geohu/Codings/Side_Projects/sfbmobile/node_modules/react-tap-event-plugin/src
 @ ./~/react-tap-event-plugin/src/TapEventPlugin.js 27:22-62

[trueadm]

@geohuz Thank you, I'll aim to get these sorted tonight. I can't help but think though – it might be easier to alias the TapEventPlugin with an Inferno version.

[trueadm]

I've released beta24 on NPM, please let me know if that fixes your issues.

[geohuz]

@trueadm oh yeah!, thanks a lot! The issues are all gone now!

[cia48621793]

The errors faded away, it however doesn't mean the voyage ended here.

There were still many problems. Some elements depends on tap-event-plugin, and for example, AppBar, will never work.

[trueadm]

@cia48621793 can you list the problems you're having?

[cia48621793]

@trueadm Sorry now but I have abandoned InfernoJs in favor of Preact, they have working examples already.

[trueadm]

@cia48621793 working examples of material ui?

[cia48621793]

＠trueadm Actually, it's 'working', made possible by me, here it is if you're interested.

IIRC only the front page works. The menu/navigation bar isn't functional yet.

I'm really obsessed by the superior performance of InfernoJS but the lack of UI and therefore UX is my main drive to abandon Inferno, while React Bootstrap still can be the worst possible backup for Preact.

[trueadm]

@cia48621793 So you're using React Bootstrap with preact-compat and material UI doesn't work in Preact either?

I'm not sure what Inferno is doing totally wrong here. Unfortunately, any library that pulls in the Tap library will never work properly in either – as it has a solid hard dependency on React's synthetic events system. Inferno has its own system and Preact doesn't have one at all.

On a side note: I'd never advocate using inferno-compat in real apps for performance anyway. There's overhead attached to compatibility layers like inferno-compat and preact-compat and you'll never get the true performance of either library using them.

Unfortunately, this is also a problem of the ecosystem. Bloated, monolithic UI libraries are most definitely part of this problem. Rather than pulling in huge UI libraries, the components should be distributed as part of a kit without having too many dependencies – sort of like how Polymer custom elements work.

I hope to work on improving this, maybe with help with some of the authors of these libraries in the new year. It will benefit many!

[cia48621793]

＠trueadm Well we should've end it here :( yep it doesn't work either. Preact vs Inferno. Just a pot calling the kettle black.
And I also guess you won't appreciate a good UI be working on such a good platform too. 'Shortsighted' people like me, that are being realistic, unfortunately, are depending on those essential 'crappy' tools you hatred.

[trueadm]

@cia48621793 you've got me all wrong – I'm not saying you're shortsighted and unrealistic. I'm saying that we can easily fix/improve on these tools even if they are somewhat crappy. There are other UI kits out there that are better fits too – let me ask around for the names of those that work out of the box with Inferno :)

[Havunen]

Hey

I was looking for this same thing, getting material-ui working with Inferno. I think I could make fork of their upcoming version "next" and port it to Inferno without need of Inferno-compat etc.

I will start working on this tomorrow.

[lovethebomb]

Hello @Havunen, may I ask if you made any progress/found obstacles yet?
Would also be looking forward material-ui+inferno :)

[Havunen]

I started working on it. One of the major issues I faced so far was that material ui is reading children properties before they are mounted. It is very Bad coding practice... And I dont think we want support it.

I have started development and basics are there there, but lately I have been busy with inferno core related issues.

I Will continue this work and Make it public once its in good shape.

Sorry for delay
Havunen

[lovethebomb]

No need to say sorry! :)
Not sure if I can help, but if needed, ask!

Good luck!

[wasd171]

Perhaps we should select more lightweight library to port? I was experimenting a bit with md-components, it looks much cleaner from inside.

[Havunen]

Work will continue regarding this, but closing this ticket as its not Inferno-core related.

[Elia-Sh]

Hi @Havunen , @trueadm ,
Recently we started a big project with inferno,
and I've wanted to utilize the UI library:
https://github.com/carbon-design-system/carbon-components-react

Experimenting: create-inferno-app but got the same error:

./node_modules/carbon-components-react/es/components/Form.js
Module not found: Can't resolve 'react' in '<..my_home_path..>inferno_play_elia/node_modules/carbon-components-react/es/components'

Does this means that inferno does not support carbon-components-react,
and I will not be able to utilize it in the project?

If it helps this is package.json -

{
  "name": "inferno_play_elia",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "carbon-components": "^7.20.0",
    "carbon-components-react": "^3.9.2",
    "carbon-icons": "^6.1.0",
    "inferno": "^3.8.0",
    "inferno-component": "^3.8.0",
    "inferno-scripts": "4.2.0",
    "react": "^15.6.1"
  },
  "scripts": {
    "start": "inferno-scripts start",
    "build": "inferno-scripts build",
    "test": "inferno-scripts test --env=jsdom",
    "eject": "inferno-scripts eject"
  }
}

[byCedric]

@Elia-Sh I'm not sure if this is the right place for this issue report. Anyways, it looks like you don't have the inferno-compat library included. Please check out the inferno-compat library and check how you can use it with create-inferno-app.

Feel free to join the slack group, I think this is a better place instead of a closed issue.

[Elia-Sh]

Thank you very much @byCedric , after adding inferno-compact I was able to import carbon-components-react.

[byCedric]

@Elia-Sh No problem! Feel free to still join the slack, https://inferno-slack.herokuapp.com/! 😄

[viotti]

In case anyone is interested, I made this: https://www.npmjs.com/package/inferno-compat-mui.

Seems to work with Material-UI 1.5.0 and Inferno 5.4.2.

[Havunen]

@viotti If you want you can send PR to add it to website, you can add it here:
https://infernojs.org/docs/guides/libraries

https://github.com/infernojs/inferno-website