react-webpack-rails-tutorial icon indicating copy to clipboard operation
react-webpack-rails-tutorial copied to clipboard

Migrate from Babel to SWC transpiler

Open justin808 opened this issue 3 months ago • 0 comments

Background

Shakapacker 9.0.0-beta.7+ makes SWC the default JavaScript transpiler instead of Babel. This tutorial currently uses Babel for transpilation.

Benefits of SWC

  • Performance: SWC is significantly faster than Babel (10-20x for large codebases)
  • Modern default: Aligns with Shakapacker 9.0 defaults
  • Active development: SWC is actively maintained and optimized
  • Lower memory footprint: Uses less memory during builds

Migration Plan

1. Configuration Changes

  • [ ] Remove Babel-specific dependencies from package.json:
    • @babel/cli
    • @babel/core
    • @babel/plugin-transform-runtime
    • @babel/preset-env
    • @babel/preset-react
    • @babel/eslint-parser
    • babel-loader
    • babel-jest
    • babel-plugin-macros
    • babel-plugin-transform-react-remove-prop-types
  • [ ] Update shakapacker.yml to set javascript_transpiler: swc
  • [ ] Create .swcrc configuration file with equivalent settings
  • [ ] Update ESLint parser if needed

2. SWC Configuration

Create a .swcrc file with settings equivalent to current Babel config:

{
  "jsc": {
    "parser": {
      "syntax": "ecmascript",
      "jsx": true
    },
    "transform": {
      "react": {
        "runtime": "automatic",
        "development": false,
        "refresh": true
      }
    },
    "target": "es2015"
  },
  "module": {
    "type": "es6"
  }
}

3. Testing

  • [ ] Run full test build: yarn build:test
  • [ ] Run development build: yarn build:dev
  • [ ] Test HMR functionality
  • [ ] Verify React Fast Refresh works
  • [ ] Run all Jest tests
  • [ ] Check that code splitting still works

4. Documentation Updates

  • [ ] Update README with SWC configuration
  • [ ] Document any behavioral differences from Babel
  • [ ] Update troubleshooting guide

Potential Issues

  1. Babel macros: SWC doesn't support Babel macros - need to find alternatives or remove
  2. Custom Babel plugins: Any custom plugins will need SWC equivalents
  3. Jest configuration: May need to update Jest to work with SWC
  4. ESLint parser: May need to switch from @babel/eslint-parser

References

Acceptance Criteria

  • All builds pass (test, development, production)
  • No Babel dependencies remain
  • Build time is noticeably faster
  • All existing functionality works identically
  • Documentation is updated

cc: @justin808

justin808 avatar Oct 03 '25 04:10 justin808