This is a craco plugin that sets up Preact for create-react-app version >= 2.

This plugin add the preact/compat alias so that import React from 'react' will be translated to import React from 'preact/compat'. (preact/compat is a drop-in replacement for React with the same API.)

Use react-app-rewired for create-react-app version 1.

craco-preact is tested with:

• preact: ^10.4.7
• preact/compat: ^10.4.7
• react-scripts: ^4.42.0
• @craco/craco: ^5.6.4

First, follow the craco Installation Instructions to install the craco package, create a craco.config.js file, and modify the scripts in your package.json.

Here is a complete craco.config.js configuration file that adds preact/compat to the create-react-app webpack config:

module.exports = {
  plugins: [{ plugin: require("craco-preact") }]
};

This plugin does not have any options.

View the "Switching to Preact" Documentation.

If you are using a React component library such as Ant Design, these React components should work out of the box with the preact/compat alias. However, Preact does not currently support some of the very latest features in React 16+, such as Hooks and Suspense. Here is the Preact GitHub issue about adding the Hooks API. Here are some more Preact issues about supporting other features in React 16+:

• #468 - Beyond (P)react 16
• #432 - Will Preact stay API compatible with React 16?

(We have subscribed to these issues, and will update this README if anything changes.)

If you are building a new Preact app from scratch and you don't need any React libraries, then you don't need the craco-preact plugin. Instead, you should follow the Preact "Getting Started" documentation.

You should still be able to use the create-react-app webpack config with a native Preact application. Just be aware that npm install will always install an unused copy of React, because this is a dependency of react-scripts. This is not an issue. React will not be included in your webpack build unless you explicitly require it with an import statement. (If you use the craco-preact plugin, then all import 'react' statements are translated to import 'preact'.)

If you need to configure anything else for the webpack build, take a look at the Configuration Overview section in the craco README. You can use CracoPreactPlugin while making other changes to babel and webpack, etc.

Install dependencies:

$ yarn install

# OR

$ npm install

Run tests:

$ yarn test

Before submitting a pull request, please check the following:

• All tests are passing
  • Run yarn test
• 100% test coverage
  • Coverage will be printed after running tests.
  • Check the coverage results in your browser: open coverage/lcov-report/index.html
• No ESLint errors
  • yarn lint
• All code is formatted with Prettier
  • yarn format
  • If you use VS Code, you should enable the formatOnSave option.

MIT