Skip to main content

@roots/bud-react

React support can be added by installing the @roots/bud-react extension.

Installation

yarn add @roots/bud-react --dev

React Refresh

This extension enables react-refresh in development. It uses @pmmmwh/react-refresh-webpack-plugin.

For usage guidance, consult the react-refresh-webpack-plugin API documentation.

Configuring react-refresh

To enable react-refresh:

bud.react.refresh.enable()

To disable react-refresh:

bud.react.refresh.disable()

Any @pmmmwh/react-refresh-webpack-plugin options can can be passed to bud.react.refresh.configure:

bud.react.refresh.configure({forceEnable: true})

Compatibility

Babel

react-refresh is automatically enabled when using @roots/bud-babel. This is the integration that is supported out-of-the-box.

TypeScript

react-refresh is automatically enabled when using @roots/bud-typescript.

If you are using babel then react-refresh will be handled using the standard babel plugin. If you are not then the react-refresh-typescript tsc plugin will be used instead.

SWC

react-refresh is automatically enabled when using @roots/bud-swc.

If you are using a custom .swcrc file you will need to supply your own configuration.

ESBuild

There isn't currently any support for esbuild mentioned in the documentation.