How to convert create-react-app to Preact? - reactjs

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.

Answer 3

Alternatively, you can get it working with craco:
// craco.config.js
module.exports = {
webpack: {
alias: {
"react": "preact/compat",
"react-dom": "preact/compat"
}
}
}
Note: Do not uninstall react, #types/react, or #types/react-dom after adding preact!
react is still required by react-scripts to run craco start and friends.
#types/* are still required by your IDE for type suggestions.
Note: Bundle analyzers may still report that you're using React!
Make sure to double-check your output directory for real build sizes.