Replacing React with Inferno using aliases - possible?


#1

Hi,

I’d like to try replacing React with Inferno (http://infernojs.org) for my Meteor project. Using WebPack or Browserify, this would be trivial: https://github.com/trueadm/inferno/tree/master/packages/inferno-compat.

Is there any way that we can do this with Meteor’s build system ?

I can’t even do a search and replace to import Inferno instead since this won’t work for npm packages - I really need to use an aliasing solution.

Tim


How do you switch from React to Inferno/Preact?
#2

You can use the babel plugin and put the settings in a .babelrc file in the root of your Meteor project; https://github.com/trueadm/inferno/tree/master/packages/inferno-compat#usage-with-babel


#3

@tarmes Did you get inferno working? How were the results?

I tried the babel suggestion but it didn’t work for me, I think because my project relies on too many other React specific npm packages.


#4

@sashko When trying to use a .babelrc to create an alias, are there any other steps needed to get Meteor to use this alias?

I tried it with inferno in the past and it never worked, and just now, am trying it unsuccessfully with nervjs, but still getting errors preventing Meteor from building:

.bablerc used as recommended

{
  "plugins": [
    ["module-resolver", {
      "root": ["."],
      "alias": {
        "react": "nervjs",
        "react-dom": "nervjs"
      }
    }]
  ]
}

When react is uninstalled, the website gives the error: “Error: Cannot find module ‘react’”, which seems to indicate Meteor/babel isn’t using this alias.

Or if the React NPM package is left installed, the console log error says “Uncaught TypeError: Cannot call a class as a function” and “modules.js?hash=30a4ebd94a67e3ad36ff662764332b3eb7b466a4:25461 Warning: The component appears to have a render method, but doesn’t extend React.Component. This is likely to cause errors. Change MainLayout to extend React.Component instead.” (even though it does extend React.Component and works just fine with React)


#5

Found a solution. Although not an elegant one.

The cause seems to be that Babel doesn’t compile node_modules by default, so when react-dom (or other NPM packages) call react, it isn’t aliased.

Setting ignore to false in babel-register didn’t change this behavior actually.

For a minimal test, I used a create-react-app app, and haven’t yet tested again on my meteor app. But I got it working with a janky solution of:

cd node_modules
ln -s nervjs react
ln -s nervjs react-dom

I still think there is a better solution and open to ideas.

Sidenote: A nervjs based minimal create-react-app is incredibly small! Less than 15kb! This looks promising for reducing Meteor bundle sizes & parsing time significantly.


#6

sym links don’t work in production : (

I also tried the NPM module-alias package, but the author says it doesn’t work because Meteor using it’s own require implementation.

Running out of ideas for how to achieve an alias within meteor.


#7

Any way to solve this? I tried using the babel approach but ran into the same issue with the node_modules directory being ignored. Neither did the meteorInstall method mentioned here work.

@sashko Really need your help here. What else can we do to get aliases to work? I’m trying to use preact but I’m simply unable to use any modules written for React because of the alias issue.