Create-react-app: Compability with Preact

[just-boris]

I couldn't find an issue about this topic, so I'd like to create this one to discussion.

Surprisingly, Preact is pretty compatible with React, so this project can also support project based on Preact without big changes.

Any chances for any move toward this?

[just-boris]

Actually, there is only one difference: Preact requires different @jsx pragma definition. I tried to build a Preact-based project with react-scripts and realized that we need to tell ESlint and Babel about new rules.

So I tried to add the following babelrc:

{
  "plugins": [
    ["transform-react-jsx", { "pragma": "h" }]
  ]
}

and eslintrc

{
  "settings": {
    "react": {
      "pragma": "h"
    }
  }
}

The only problem is that react-scripts ignores eslintrc and babelrc, so my changes have no effect.

[gaearon]

I think it’s great many projects can run on Preact without significant changes but I don’t think we’ll be spending effort supporting this as a built-in configuration (just like we don’t support, for example, Relay out of the box).

The best course of action for those interested in it would be to fork react-scripts (as described in https://github.com/facebookincubator/create-react-app/pull/779), make the necessary changes, and try to keep it up to date with upstream version.

[just-boris]

Well, forking may be a solution. I will try to create a fork and use it.

Actually, there already was an attempt to do this: https://github.com/alexkuz/create-preact-app
It seems like there were no pulls from upstream since forking, so I have to do this again.

@alexkuz, is there any chance that you will update your create-preact-app fork?

[shrynx]

@just-boris I am working on putting this in my fork. Will get back to you when I am done. I need someone to test complete compatibility, as i don't have a lot experience with preact.

[alexkuz]

@just-boris I could, but tbh I'm not really using preact (at least for now), so I have no big interest to keep it up to date. Just fork it and update. Or I could transfer this fork to you if you want to take care of it from here.

[gaearon]

Oh hi @alexkuz

[just-boris]

Hello again,

So far, I have been working on this solution and have finally published my fork. So, if you want to create a Preact app without any setup, you may run

create-react-app <app-name> --scripts-version @just-boris/preact-scripts 

and it will give you a Preact-based application.

@alexkuz that was not possible to pick up your fork, because the structure of main repo was changed a lot since that time (now this is a monorepo with Lerna).

But it would be helpful if you will put a note about my newer fork in your Readme.

Also, I have opened "Issues" section in my repo, any further suggestions are welcome

[just-boris]

For those, who wants to check out, what was changed, you may look at this diff

[shrynx]

@just-boris For a complete react compatibility wouldn't one need preact-compat too ?
In my fork i alias react and react-dom to preact-compat
https://github.com/shrynx/react-super-scripts/blob/0c4c4ddbabc77847a9694647c28dd94e48251ec3/packages/react-scripts/utils/customWebpackConfig.js#L19-L28

[just-boris]

Yes, just added this feature per request in https://github.com/just-boris/create-preact-app/issues/1.

[just-boris]

Closing this as no any further action from the upstream side.

[gaearon]

Nice, thank you for sharing this!

[ghost]

Well, if anyone still need this, I created a build.js file with the following contents:

process.env.NODE_ENV = "production"

const config = require("react-scripts/config/webpack.config.prod")

config.resolve.alias["react"] = "preact-compat"
config.resolve.alias["react-dom"] = "preact-compat"

require("react-scripts/scripts/build")

It's not ideal, but it's very simple and easy to maintain

[prasadmsvs]

This doesn't work in tests. It gives an error "Cannot find module 'react' from 'App.test.js'". Can't jest read aliases? Is there any way to configure jest to use preact for react?

[gaearon]

Not without ejecting. (Just like you can’t configure any other alias.)

[prasadmsvs]

It worked when I added to preact-compat to ModuleNameMapper in package.json. However, enzyme didn't work. It would be great if we have a full implementation with preact-compat from someone.

[ghost]

@prasadmsvs Have you tried https://github.com/timarney/react-app-rewired ?

[just-boris]

@prasadmsvs I am still maintaining my fork supporting Preact. In version 1.1.0 I have also added a mapping into Jest config.

Also, look at the official Preact documentation: https://preactjs.com/guide/unit-testing-with-enzyme
UPD: there is also Enzyme v3 adapter: https://github.com/aweary/preact-enzyme-adapter, but it is not published to NPM yet.