A opção target especifica para qual versão do React o compilador deve gerar o código.
{
target: '19' // ou '18', '17'
}Referência
target
Configura a compatibilidade da versão do React para a saída compilada.
Tipo
'17' | '18' | '19'Valor padrão
'19'
Valores válidos
'19': Destina-se ao React 19 (padrão). Nenhum runtime adicional é necessário.'18': Destina-se ao React 18. Requer o pacotereact-compiler-runtime.'17': Destina-se ao React 17. Requer o pacotereact-compiler-runtime.
Ressalvas
- Sempre use valores de string, não números (por exemplo,
'17'e não17) - Não inclua versões de patch (por exemplo, use
'18'e não'18.2.0') - O React 19 inclui APIs de runtime do compilador integradas
- React 17 e 18 exigem a instalação de
react-compiler-runtime@latest
Uso
Destinando-se ao React 19 (padrão)
Para o React 19, nenhuma configuração especial é necessária:
{
// usa target: '19' por padrão
}O compilador usará as APIs de runtime nativas do React 19:
// A saída compilada usa as APIs nativas do React 19
import { c as _c } from 'react/compiler-runtime';Destinando-se ao React 17 ou 18
Para projetos React 17 e React 18, você precisa de duas etapas:
- Instale o pacote de runtime:
npm install react-compiler-runtime@latest- Configure o destino:
// Para React 18
{
target: '18'
}
// Para React 17
{
target: '17'
}O compilador usará o runtime de polyfill para ambas as versões:
// A saída compilada usa o polyfill
import { c as _c } from 'react-compiler-runtime';Solução de Problemas
Erros de runtime sobre runtime do compilador ausente
Se você vir erros como “Cannot find module ‘react/compiler-runtime’“:
-
Verifique sua versão do React:
npm why react -
Se estiver usando React 17 ou 18, instale o runtime:
npm install react-compiler-runtime@latest -
Certifique-se de que seu
targetcorresponda à sua versão do React:{target: '18' // Deve corresponder à sua versão principal do React}
Pacote de runtime não funcionando
Certifique-se de que o pacote de runtime esteja:
- Instalado em seu projeto (não globalmente)
- Listado nas dependências do seu
package.json - A versão correta (tag
@latest) - Não em
devDependencies(é necessário em tempo de execução)
Verificando a saída compilada
Para verificar se o runtime correto está sendo usado, observe a importação diferente (react/compiler-runtime para integrado, pacote react-compiler-runtime autônomo para 17/18):
// Para React 19 (runtime integrado)
import { c } from 'react/compiler-runtime'
// ^
// Para React 17/18 (runtime polyfill)
import { c } from 'react-compiler-runtime'
// ^