7

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!

Penny Liu
  • 15,447
  • 5
  • 79
  • 98
zenlight
  • 83
  • 1
  • 6
  • I guess you would have to eject as this config go in webpack. If you are getting started they recommend using `preact-cli` to get the project started – Rikin Sep 25 '19 at 15:44
  • 1
    @Rikin Thank you! I think eject is not an option, as that would bring everything inside my project and make it non-upgradable. But preact-cli is interesting option, hope it'll support react components via preact-compact. – zenlight Sep 25 '19 at 21:40

2 Answers2

8

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!
Huy
  • 261
  • 2
  • 4
  • I used [craco](https://github.com/gsoft-inc/craco) to override CRA, and it works, thx !! – Sylvain DNS Jun 15 '20 at 22:42
  • 3
    Fair warning, customize-cra last update as of writing this comment is 7 months ago and react-scripts 4.0.0 had been released for quite some time which breaks this solution. – CGeorges Dec 14 '20 at 12:37
0

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.

serg06
  • 2,027
  • 1
  • 18
  • 26
  • Does anybody know how to remove react (as we have preact now) in order to optimize bundle size? – Anatolii Olshevskyi Mar 13 '22 at 16:21
  • @AnatoliiOlshevskyi Can I ask why you think React is still in your bundle? – serg06 Mar 13 '22 at 18:42
  • Because when I remove it from my package.json I've got "Error: Cannot find module 'react'" during yarn start. That probably means react scripts require react for some reason as dependency. – Anatolii Olshevskyi Apr 05 '22 at 15:11
  • @AnatoliiOlshevskyi `react-scripts` still needs `react` to start/build/etc, but in my testing it wasn't included in my production bundle. – serg06 Apr 06 '22 at 16:24