How to convert create-react-app to Preact?

Question

As per Preact documentation, to convert a React app to Preact you have to alias webpack:

{
  "resolve": {
    "alias": {
      "react": "preact-compat",
      "react-dom": "preact-compat"
    }
  }
}

How can you do this with create-react-app since that hides webpack under react-scripts dependency?

Thank you!

Answer 1

I think the most elegant solution is to use customize-cra. This way you can avoid ejecting or maintaining a separate fork of create-react-app.

• First, you need to install customize-cra:

yarn add customize-cra react-app-rewired --D

• Then, go to package.json, change your scripts to the following (this step is crucial but is not explicitly mentioned in customize-cra's docs):

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

• Go to the root of your project, create a file called config-overrides.js with the following content (assuming you're using Preact X):

const { override, addWebpackAlias } = require('customize-cra');

module.exports = override(
  addWebpackAlias({
    'react': 'preact/compat',
    'react-dom': 'preact/compat'
  })
);

• Run yarn start... And Voila!

Answer 2

There's Preact CLI which allows you to create preact apps without any module bundlers. It's the recommended tool to create starters for Preact apps.

npx preact-cli create default my-project
# Go into the generated project folder
cd my-project
# Start a development server
npm run dev

Watch out for templates which are using Preact 8.x. The newest version (as of 7/25/21) is Preact X (Preact version 10.x). The default template uses Preact X.

If you want to use create-react-app to make a Preact app, you can use this workaround (documented here):

npx create-react-app my-app --scripts-version @just-boris/preact-scripts
cd my-app
# The dependencies used by `create-react-app` are still pointing to
# react, so under root application folder it's required to run:
npm uninstall react react-dom
npm install preact
# `preact-compact` is bundled with `preact` under `preact/compact` in 
# Preact X, but if you are using an older version run this:
# npm install preact-compact

This can also be done with yarn.

• Preact official docs
• Section on how to upgrade from Preact 8.x to Preact X

In my experience, the app created with the 2nd approach started seamlessly. However, I didn't try importing any complex/advanced React components. I had issues porting such components into a Preact app created with preact-cli. I'll try again and provide more details if needed.