Lesson 22 / 31

SWC Configuration and Options

Configure SWC with .swcrc targets, parser settings and module options, and use the automatic JSX runtime.

.swcrc is simpler than .babelrc

SWC's config is more opinionated: fewer options, clearer structure. You specify targets, features to enable/disable, and that's mostly it.

Full .swcrc example

A typical SWC config includes env (targets), jsc (parser/syntax), and module settings.

{
  "env": {
    "targets": { "chrome": "90", "firefox": "88" }
  },
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true
    },
    "transform": {
      "react": { "runtime": "automatic" }
    }
  },
  "module": {
    "type": "es6"
  }
}

SWC's JSX is automatic by default

SWC uses React 17+ automatic JSX by default (no React import needed). Less boilerplate than Babel's classic setup.