Inferno: Using 3d party react components with inferno

[yury-dymov]

Hey guys,

It seems that you created a really nice alternative to react, great job!

I have a question regarding using 3d party components developed by the react community with inferno. I checked the site, the docs, and issues and was not able to find any guides or best practices, how to do this.

I assume, that if React API and Inferno API are so similar, than it should be possible to use React components with some aliasing in webpack config. Is this correct? If yes, than it would be very nice if you could also share some pitfalls and issues folks can face. This kind of information might become important part of the documentation and might bring a lot more people here, which will benefit everyone.

Kind regards,
Yury

[Havunen]

Hey!

Inferno has already pretty good compatibility with React when no internal React API is used. Using inferno-babel-plugin should cover all basic scenarios with JSX syntax. We have also built inferno-compat package which gives better compatibility with React. However it adds more overhead and performance won't be as good as purely written for Inferno.

[yury-dymov]

Hi @Havunen,

First of all, thank you for your quick response.

My use-case is following, let's say there is some random react-super-package, which I want to use in my project. Somewhere in the source code there is import React from 'react'; line and in peerDependencies there is a react mention.

Obviously, I don't want to have both inferno and react in my project. I also don't want to modify react-super-package in any way. To make things easier, let's assume that react-super-package doesn't rely on any internal React API, basically, if you replace all mentions of react to inferno everything will work fine.

So, how can I make things work? I checked the inferno-babel-plugin and was not able to understand if this use-case is covered.

[Havunen]

inferno-babel-plugin takes care of JSX syntax only, I know some people already did some aliasing with webpack to mask React with Inferno. ping @LukeSheard @nightwolfz @lukeed

[lukeed]

Hey @yury-dymov, what build tools are you using? Webpack? Browserify? Rollup?

Most build tools out there include an alias option. See here for a bunch of examples.

[yury-dymov]

@Havunen, @lukeed, thank you! I am using webpack, and as I mentioned, I considered an alias option, but wanted to confirm that it is a recommended way.

I think that adding "migrating from React smoothly" section to the documentation would be very helpful.

I am closing the issue as for now but feel free to reopen it if you have something to add.