How to use SWC compiler in a React App with CRACO

 

What problem does this solve

 If you need to optimize the build time of your React app swc is a very good option.

Prerequisites

1.  A React app with CRACO configured. 
   

The solution

    Install craco-swc as a dev dependency.

 

yarn add --dev craco-swc

 

    Add this configuration in your craco.config.js

 

const CracoSwcPlugin = require('craco-swc');

module.exports = {

plugins: [

{

plugin: CracoSwcPlugin,

options: {

swcLoaderOptions: {

jsc: {

parser: {

syntax: 'ecmascript',

jsx: true,

dynamicImport: true,

exportDefaultFrom: true,

},

transform: {

react: {

runtime: 'classic',

development: false,

throwIfNamespace: true,

importSource: 'react',

pragma: 'React.createElement',

pragmaFrag: 'React.Fragment',

useBuiltIns: false,

useSpread: false,

},

},

},

},

},

},

],

};

That's It.

    This configuration has build based on babel preset-react default values, to ensure that the swc behaves in the same way as babel.

Thanks for reading!