1"use strict";(self.rspackChunkrsbuild_website=self.rspackChunkrsbuild_website||[]).push([["b"],{Uc(s,e,r){r.r(e);var n=r("E"),i=r("H"),l=r("x");function o(s){let e={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...(0,i.R)(),...s.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.h1,{id:"react-plugin",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#react-plugin",children:"#"}),"React plugin"]}),"\n","\n",(0,n.jsx)(l.x,{href:"https://github.com/web-infra-dev/rsbuild/tree/main/packages/plugin-react"}),"\n",(0,n.jsx)(e.p,{children:"The React plugin provides support for React, integrating features such as JSX compilation and React Refresh."}),"\n",(0,n.jsxs)(e.h2,{id:"quick-start",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#quick-start",children:"#"}),"Quick start"]}),"\n",(0,n.jsxs)(e.h3,{id:"install-plugin",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#install-plugin",children:"#"}),"Install plugin"]}),"\n",(0,n.jsx)(e.p,{children:"Run the following command:"}),"\n","\n",(0,n.jsx)(l.ky,{command:"add @rsbuild/plugin-react -D"}),"\n",(0,n.jsxs)(e.h3,{id:"register-plugin",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#register-plugin",children:"#"}),"Register plugin"]}),"\n",(0,n.jsx)(e.p,{children:"Register the plugin in Rsbuild config:"}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"rsbuild.config.ts",lang:"ts",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { pluginReact } "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@rsbuild/plugin-react'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(e.span,{className:"line"}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" plugins"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"pluginReact"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"()]"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,n.jsx)(e.p,{children:"After registration, you can develop React directly."}),"\n",(0,n.jsxs)(e.h2,{id:"options",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#options",children:"#"}),"Options"]}),"\n",(0,n.jsxs)(e.h3,{id:"swcreactoptions",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#swcreactoptions",children:"#"}),"swcReactOptions"]}),"\n",(0,n.jsxs)(e.p,{children:["Configure the behavior of SWC to transform React code, the same as SWC's ",(0,n.jsx)(e.a,{href:"https://swc.rs/docs/configuration/compilation#jsctransformreact",rel:"noopener noreferrer",target:"_blank",children:"jsc.transform.react"})," option."]}),"\n",(0,n.jsxs)(e.ul,{children:["\n",(0,n.jsx)(e.li,{children:(0,n.jsx)(e.strong,{children:"Type:"})}),"\n"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"interface"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" ReactConfig"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" pragma"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" pragmaFrag"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" throwIfNamespace"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" boolean"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" development"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" boolean"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" refresh"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" boolean"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" refreshReg"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" refreshSig"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" emitFullSignatures"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" boolean"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" runtime"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'automatic'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'classic'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'preserve'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" importSource"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,n.jsxs)(e.ul,{children:["\n",(0,n.jsx)(e.li,{children:(0,n.jsx)(e.strong,{children:"Default:"})}),"\n"]}),"\n",(0,n.jsx)(e.p,{children:"Uses the automatic JSX runtime. Development transforms and Fast Refresh are enabled when applicable."}),"\n",(0,n.jsxs)(e.h3,{id:"swcreactoptionsruntime",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#swcreactoptionsruntime",children:"#"}),"swcReactOptions.runtime"]}),"\n",(0,n.jsx)(e.p,{children:"Decides which runtime to use when transforming JSX."}),"\n",(0,n.jsxs)(e.ul,{children:["\n",(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Type:"})," ",(0,n.jsx)(e.code,{children:"'automatic' | 'classic' | 'preserve'"})]}),"\n",(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Default:"})," ",(0,n.jsx)(e.code,{children:"'automatic'"})]}),"\n"]}),"\n",(0,n.jsxs)(e.h4,{id:"automatic",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#automatic",children:"#"}),"automatic"]}),"\n",(0,n.jsxs)(e.p,{children:["By default, Rsbuild uses ",(0,n.jsx)(e.code,{children:"runtime: 'automatic'"})," to leverage the ",(0,n.jsx)(e.a,{href:"https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html",rel:"noopener noreferrer",target:"_blank",children:"new JSX runtime"})," introduced in React 17."]}),"\n",(0,n.jsx)(e.p,{children:"This approach eliminates the need to manually import React in every file that uses JSX."}),"\n",(0,n.jsx)(l.Pq,{type:"tip",title:"Tip",children:(0,n.jsx)(e.p,{children:"\nReact 16.14.0 and later versions supp
1ort the new JSX runtime."})}),"\n",(0,n.jsxs)(e.h4,{id:"classic",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#classic",children:"#"}),"classic"]}),"\n",(0,n.jsxs)(e.p,{children:["For React versions prior to 16.14.0, set ",(0,n.jsx)(e.code,{children:"runtime"})," to ",(0,n.jsx)(e.code,{children:"'classic'"}),":"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"pluginReact"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"({"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" swcReactOptions"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" runtime"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'classic'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,n.jsx)(e.p,{children:"When using the classic JSX runtime, you must manually import React in your code:"}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"App.jsx",lang:"jsx",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" React "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(e.span,{className:"line"}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" App"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"() {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h1"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Hello World</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h1"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,n.jsxs)(e.h4,{id:"preserve",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#preserve",children:"#"}),"preserve"]}),"\n",(0,n.jsxs)(e.p,{children:["Use ",(0,n.jsx)(e.code,{children:"runtime: 'preserve'"})," to leave JSX syntax unchanged without transforming it, this is useful when you are building a library that expects JSX to be left as is."]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"pluginReact"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"({"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" swcReactOptions"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" runtime"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'preserve'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,n.jsxs)(e.h3,{id:"swcreactoptionsimportsource",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#swcreactoptionsimportsource",children:"#"}),"swcReactOptions.importSource"]}),"\n",(0,n.jsxs)(e.ul,{children:["\n",(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Type:"})," ",(0,n.jsx)(e.code,{children:"string"})]}),"\n",(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Default:"})," ",(0,n.jsx)(e.code,{children:"'react'"})]}),"\n"]}),"\n",(0,n.jsxs)(e.p,{children:["With ",(0,n.jsx)(e.code,{children:"runtime"})," set to ",(0,n.jsx)(e.code,{children:"'automatic'"}),", you can specify the JSX runtime import path through ",(0,n.jsx)(e.code,{children:"importSource"}),"."]}),"\n",(0,n.jsxs)(e.p,{children:["For example, when using ",(0,n.jsx)(e.a,{href:"https://emotion.sh/",rel:"noopener noreferrer",target:"_blank",children:"Emotion"}),", you can set ",(0,n.jsx)(e.code,{children:"importSource"})," to ",(0,n.jsx)(e.code,{children:"'@emotion/react'"}),":"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"pluginReact"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"({"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" swcReactOptions"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" importSource"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@emotion/react'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,n.jsxs)(e.blockquote,{children:["\n",(0,n.jsxs)(e.p,{children:["See ",(0,n.jsx)(e.a,{href:"/guide/framework/react.html#customize-jsx",children:"Customize JSX"})," for more details."]}),"\n"]}),"\n",(0,n.jsxs)(e.h3,{id:"swcreactoptionsrefresh",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#swcreactoptionsrefresh",children:"#"}),"swcReactOptions.refresh"]}),"\n",(0,n.jsxs)(e.ul,{children:["\n",(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Type:"})," ",(0,n.jsx)(e.code,{children:"boolean"})]}),"\n",(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Default:"})," enabled for development web builds when ",(0,n.jsx)(e.a,{href:"#fastrefresh",children:"fastRefresh"})," and ",(0,n.jsx)(e.a,{href:"/config/dev/hmr.html",children:"dev.hmr"})," are enabled"]}),"\n"]}),"\n",(0,n.jsxs)(e.p,{children:["Whether to enable ",(0,n.jsx)(e.a,{href:"https://npmjs.com/package/react-refresh",rel:"noopener noreferrer",target:"_blank",children:"React Fast Refresh"}),"."]}),"\n",(0,n.jsxs)(e.p,{children:["Most of the time, you should use the plugin's ",(0,n.jsx)(e.a,{href:"#fastrefresh",children:"fastRefresh"})," option to enable or disable Fast Refresh."]}),"\n",(0,n.jsxs)(e.h3,{id:"reactcompiler",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#reactcompiler",children:"#"}),"reactCompiler"]}),"\n",(0,n.jsxs)(e.p,{children:["Enable or configure ",(0,n.jsx)(e.a,{href:"https://react.dev/learn/react-compiler",rel:"noopener noreferrer",target:"_blank",children:"React Compiler"}),", which Rsbuild passes to Rspack's ",(0,n.jsx)(e.a,{href:"https://rspack.rs/guide/integrations/react#using-builtinswc-loader",rel:"noopener noreferrer",target:"_blank",children:(0,n.jsx)(e.code,{children:"builtin:swc-loader"})})," as the ",(0,n.jsx)(e.code,{children:"jsc.transform.reactCompiler"})," option."]}),"\n",(0,n.jsx)(l.Pq,{type:"tip",title:"Tip",children:(0,n.jsxs)(e.p,{children:["\nThis option is only supported in ",(0,n.jsx)(e.code,{children:"@rsbuild/core"})," v2.1.0 and later."]})}),"\n",(0,n.jsxs)(e.ul,{children:["\n",(0,n.jsx)(e.li,{children:(0,n.jsx)(e.strong,{children:"Type:"})}),"\n"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"type"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" ReactCompiler"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" boolean"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" compilationMode"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'infer'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'syntax'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'annotation'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'all'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" panicThreshold"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'none'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'critical_errors'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'all_errors'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" target"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '17'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '18'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '19'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" noEmit"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" boolean"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" outputMode"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'client'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'ssr'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'lint'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ignoreUseNoForget"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" boolean"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" flowSuppressions"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" boolean"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" enableReanimated"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" boolean"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" isDev"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" boolean"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" eslintSuppressionRules"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}
1),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"[];"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" customOptOutDirectives"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"[];"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" gating"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" source"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" importSpecifierName"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" dynamicGating"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" source"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})})]})})}),"\n",(0,n.jsxs)(e.ul,{children:["\n",(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Default:"})," ",(0,n.jsx)(e.code,{children:"undefined"})]}),"\n"]}),"\n",(0,n.jsxs)(e.p,{children:["Set ",(0,n.jsx)(e.code,{children:"reactCompiler"})," to ",(0,n.jsx)(e.code,{children:"true"})," to enable React Compiler with the default options:"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"pluginReact"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"({"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" reactCompiler"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" true"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,n.jsxs)(e.p,{children:["For React 17 and 18 projects, install ",(0,n.jsx)(e.a,{href:"https://npmjs.com/package/react-compiler-runtime",rel:"noopener noreferrer",target:"_blank",children:(0,n.jsx)(e.code,{children:"react-compiler-runtime"})})," and set the compiler target:"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"pluginReact"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"({"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" reactCompiler"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" target"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '18'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,n.jsxs)(e.p,{children:["The ",(0,n.jsx)(e.code,{children:"reactCompiler"})," options are aligned with the React Compiler configuration. For example, you can use ",(0,n.jsx)(e.a,{href:"https://react.dev/reference/react-compiler/compilationMode",rel:"noopener noreferrer",target:"_blank",children:(0,n.jsx)(e.code,{children:"compilationMode"})})," to control which functions are compiled:"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"pluginReact"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"({"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" reactCompiler"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" compilationMode"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'annotation'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,n.jsxs)(e.p,{children:["For more options, refer to the official ",(0,n.jsx)(e.a,{href:"https://react.dev/reference/react-compiler/configuration",rel:"noopener noreferrer",target:"_blank",children:"React Compiler configuration documentation"}),"."]}),"\n",(0,n.jsxs)(e.h3,{id:"splitchunks",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#splitchunks",children:"#"}),"splitChunks"]}),"\n",(0,n.jsxs)(e.p,{children:["When using Rsbuild's ",(0,n.jsx)(e.a,{href:"/config/split-chunks.html#default",children:"default split chunks preset"}),", this plugin splits ",(0,n.jsx)(e.code,{children:"react"})," and ",(0,n.jsx)(e.code,{children:"react-router"})," related packages into separate chunks:"]}),"\n",(0,n.jsxs)(e.ul,{children:["\n",(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"lib-react.js"}),": includes ",(0,n.jsx)(e.code,{children:"react"}),", ",(0,n.jsx)(e.code,{children:"react-dom"}),", and their sub-dependencies (",(0,n.jsx)(e.code,{children:"scheduler"}),"). In development, it also includes React Fast Refresh runtime packages (",(0,n.jsx)(e.code,{children:"react-refresh"}),", ",(0,n.jsx)(e.code,{children:"@rspack/plugin-react-refresh"}),")."]}),"\n",(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"lib-router.js"}),": includes ",(0,n.jsx)(e.code,{children:"react-router"}),", ",(0,n.jsx)(e.code,{children:"react-router-dom"}),", and their sub-dependencies (",(0,n.jsx)(e.code,{children:"history"}),", ",(0,n.jsx)(e.code,{children:"@remix-run/router"}),")."]}),"\n"]}),"\n",(0,n.jsxs)(e.p,{children:["This option is used to control this behavior and determine whether the ",(0,n.jsx)(e.code,{children:"react"})," and ",(0,n.jsx)(e.code,{children:"router"})," related packages need to be split into separate chunks."]}),"\n",(0,n.jsxs)(e.ul,{children:["\n",(0,n.jsx)(e.li,{children:(0,n.jsx)(e.strong,{children:"Type:"})}),"\n"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"type"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" SplitChunks"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" boolean"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" react"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" boolean"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" router"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" boolean"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})})]})})}),"\n",(0,n.jsxs)(e.ul,{children:["\n",(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Default:"})," ",(0,n.jsx)(e.code,{children:"true"})," (equivalent to ",(0,n.jsx)(e.code,{children:"{ react: true, router: true }"}),")"]}),"\n"]}),"\n",(0,n.jsx)(e.p,{children:"For example, to disable all chunk splitting:"}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,n.jsx)(e.code,{children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"pluginReact"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"({ splitChunks"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]})})})}),"\n",(0,n.jsxs)(e.p,{children:["Or to disable only the ",(0,n.jsx)(e.code,{children:"router"})," chunk splitting:"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"pluginReact"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"({"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" splitChunks"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" react"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" true"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" router"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,n.jsxs)(e.h3,{id:"enableprofiler",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#enableprofiler",children:"#"}),"enableProfiler"]}),"\n",(0,n.jsxs)(e.ul,{children:["\n",(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Type:"})," ",(0,n.jsx)(e.code,{children:"boolean"})]}),"\n",(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Default:"})," ",(0,n.jsx)(e.code,{children:"false"})]}),"\n"]}),"\n",(0,n.jsxs)(e.p,{children:["When set to ",(0,n.jsx)(e.code,{children:"true"}),", enables the React Profiler for performance analysis in production builds. Use the React DevTools to examine profiling results and identify potential performance optimizations. Profiling adds a slight overhead, so it is disabled by default in production mode."]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"rsbuild.config.ts",lang:"ts",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"pluginReact"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"({"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // Only enable the profiler when REACT_PROFILER is true,"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // as the option will increase the build time and add some small additional overhead."})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" enableProfiler"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" process"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"env"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)
1"},children:"REACT_PROFILER"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ==="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'true'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,n.jsxs)(e.p,{children:["Set ",(0,n.jsx)(e.code,{children:"REACT_PROFILER=true"})," when running build script:"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"package.json",lang:"json",children:(0,n.jsxs)(e.code,{children:[(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:' "scripts"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:' "build:profiler"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:' "REACT_PROFILER=true rsbuild build"'})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,n.jsxs)(e.p,{children:["As Windows does not support the above usage, you can also use ",(0,n.jsx)(e.a,{href:"https://npmjs.com/package/cross-env",rel:"noopener noreferrer",target:"_blank",children:"cross-env"})," to set environment variables. This ensures compatibility across different systems:"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"package.json",lang:"json",children:(0,n.jsxs)(e.code,{children:[(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:' "scripts"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:' "build:profiler"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:' "cross-env REACT_PROFILER=true rsbuild build"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:' "devDependencies"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:' "cross-env"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:' "^7.0.0"'})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,n.jsxs)(e.blockquote,{children:["\n",(0,n.jsxs)(e.p,{children:["See the ",(0,n.jsx)(e.a,{href:"https://legacy.reactjs.org/docs/optimizing-performance.html#profiling-components-with-the-devtools-profiler",rel:"noopener noreferrer",target:"_blank",children:"React docs"})," for details about profiling using the React DevTools."]}),"\n"]}),"\n",(0,n.jsxs)(e.h3,{id:"reactrefreshoptions",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#reactrefreshoptions",children:"#"}),"reactRefreshOptions"]}),"\n",(0,n.jsxs)(e.ul,{children:["\n",(0,n.jsx)(e.li,{children:(0,n.jsx)(e.strong,{children:"Type:"})}),"\n"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"type"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" ReactRefreshOptions"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // @link https://rspack.rs/config/module-rules#condition"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" test"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Rspack"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"RuleSetCondition"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" include"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Rspack"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"RuleSetCondition"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" exclude"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Rspack"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"RuleSetCondition"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" resourceQuery"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Rspack"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"RuleSetCondition"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" library"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" forceEnable"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" boolean"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" injectLoader"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" boolean"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" injectEntry"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" boolean"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" reloadOnRuntimeErrors"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" boolean"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" reactRefreshLoader"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,n.jsxs)(e.ul,{children:["\n",(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Default:"})," React Fast Refresh applies to files handled by Rsbuild's built-in JavaScript rule, except files imported with ",(0,n.jsx)(e.code,{children:"?raw"}),"."]}),"\n"]}),"\n",(0,n.jsxs)(e.p,{children:["Set the options for ",(0,n.jsx)(e.a,{href:"https://github.com/rstackjs/rspack-plugin-react-refresh",rel:"noopener noreferrer",target:"_blank",children:"@rspack/plugin-react-refresh"}),". The passed value will be shallowly merged with the default value."]}),"\n",(0,n.jsxs)(e.ul,{children:["\n",(0,n.jsx)(e.li,{children:(0,n.jsx)(e.strong,{children:"Example:"})}),"\n"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"pluginReact"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"({"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" reactRefreshOptions"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" exclude"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/some-module-to-exclude/"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" /[\\\\/]node_modules[\\\\/]/"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"]"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,n.jsxs)(e.h3,{id:"fastrefresh",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#fastrefresh",children:"#"}),"fastRefresh"]}),"\n",(0,n.jsxs)(e.ul,{children:["\n",(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Type:"})," ",(0,n.jsx)(e.code,{children:"boolean"})]}),"\n",(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Default:"})," ",(0,n.jsx)(e.code,{children:"true"})]}),"\n"]}),"\n",(0,n.jsxs)(e.p,{children:["Whether to enable ",(0,n.jsx)(e.a,{href:"https://npmjs.com/package/react-refresh",rel:"noopener noreferrer",target:"_blank",children:"React Fast Refresh"})," in development mode."]}),"\n",(0,n.jsxs)(e.p,{children:["If ",(0,n.jsx)(e.code,{children:"fastRefresh"})," is set to ",(0,n.jsx)(e.code,{children:"true"}),", ",(0,n.jsx)(e.code,{children:"@rsbuild/plugin-react"})," will automatically register the ",(0,n.jsx)(e.a,{href:"https://github.com/rstackjs/rspack-plugin-react-refresh",rel:"noopener noreferrer",target:"_blank",children:"@rspack/plugin-react-refresh"})," plugin for development web builds with HMR enabled."]}),"\n",(0,n.jsxs)(e.p,{children:["To disable Fast Refresh, set it to ",(0,n.jsx)(e.code,{children:"false"}),":"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"pluginReact"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"({"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" fastRefresh"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})})]})}function a(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}={...(0,i.R)(),...s.components};return e?(0,n.jsx)(e,{...s,children:(0,n.jsx)(o,{...s})}):o(s)}a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["en%2Fplugins%2Flist%2Fplugin-react.mdx"]={toc:[{id:"quick-start",text:"Quick start",depth:2},{id:"install-plugin",text:"Install plugin",depth:3},{id:"register-plugin",text:"Register plugin",depth:3},{id:"options",text:"Options",depth:2},{id:"swcreactoptions",text:"swcReactOptions",depth:3},{id:"swcreactoptionsruntime",text:"swcReactOptions.runtime",depth:3},{id:"automatic",text:"automatic",depth:4},{id:"classic",text:"classic",depth:4},{id:"preserve",text:"preserve",depth:4},{id:"swcreactoptionsimportsource",text:"swcReactOptions.importSource",depth:3},{id:"swcreactoptionsrefresh",text:"swcReactOptions.refresh",depth:3},{id:"reactcompiler",text:"reactCompiler",depth:3},{id:"splitchunks",text:"splitChunks",depth:3},{id:"enableprofiler",text:"enableProfiler",depth:3},{id:"reactrefreshoptions",text:"reactRefreshOptions",depth:3},{id:"fastrefresh",text:"fastRefresh",depth:3}],title:"React plugin",headingTitle:"React plugin",frontmatter:{description:"The React plugin provides support for Re
1act, integrating features such as JSX compilation and React Refresh."}},r.d(e,{default:()=>a})}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.