Switch from Babel to SWC for faster JavaScript transpilation #677
Conversation
This commit migrates the project from Babel to SWC (Speedy Web Compiler) following the Shakapacker documentation. Changes: - Update shakapacker.yml to use 'swc' as javascript_transpiler - Install @swc/core and swc-loader dependencies - Add ajv dependency to resolve module resolution issues SWC is a Rust-based compiler that provides significantly faster compilation times compared to Babel (up to 20x faster according to SWC documentation). The existing Babel configuration and dependencies remain in place as they may still be needed by other tooling like ESLint and Jest. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
🚀 Quick Review App CommandsWelcome! Here are the commands you can use in this PR:
|
WalkthroughSwaps Shakapacker's JavaScript transpiler from Babel to SWC, adds Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor Dev
participant WDS as Webpack Dev Server
participant ENV as Shakapacker env
participant Loader as swc-loader
participant SWC as @swc/core
Dev->>WDS: start dev build
WDS->>ENV: query isDevelopment & runningWebpackDevServer
ENV-->>WDS: return flags
WDS->>Loader: load config/swc.config.js
alt env.isDevelopment && env.runningWebpackDevServer
note right of Loader #D1F2D8: React Refresh enabled
Loader->>SWC: transform(..., react.refresh: true)
else
note right of Loader #F2DCDC: React Refresh disabled
Loader->>SWC: transform(..., react.refresh: false)
end
SWC-->>Loader: transpiled JS
Loader-->>WDS: bundle artifacts
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related issues
Possibly related PRs
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Pull Request Review: Switch from Babel to SWC for faster JavaScript transpilationSummaryThis PR migrates the JavaScript transpiler from Babel to SWC by updating the Shakapacker configuration and installing the required dependencies. The changes are minimal and follow the Shakapacker documentation. ✅ Strengths1. Well-Documented Change
2. Minimal, Focused Changes
3. Proper Dependency Management
🔍 Code Quality & Best PracticesConfiguration (✅ Good)The change in javascript_transpiler: swcDependency Versions (
|
Enable React Fast Refresh in development mode with SWC, matching the functionality previously provided by Babel. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Pull Request Review: Switch from Babel to SWCOverall Assessment✅ Approved with minor suggestions This PR successfully migrates the JavaScript transpiler from Babel to SWC, which should provide significant performance improvements during development and build processes. The implementation follows the Shakapacker documentation and the changes are well-documented. Code Quality & Best Practices✅ Strengths
💡 Suggestions1. SWC Configuration Completeness (config/swc.config.js:3-12) const customConfig = {
options: {
jsc: {
parser: {
syntax: 'ecmascript',
jsx: true,
},
transform: {
react: {
runtime: 'automatic', // Use automatic JSX runtime (React 17+)
refresh: env.isDevelopment && env.runningWebpackDevServer,
},
},
},
},
};This would enable the automatic JSX runtime introduced in React 17, eliminating the need to import React in every JSX file. 2. Missing Version Constraint (package.json:48)
3. ajv Dependency Justification (package.json:49)
Potential Bugs or Issues
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (3)
config/shakapacker.yml(1 hunks)config/swc.config.js(1 hunks)package.json(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: test (22.x, 3.4.6)
🔇 Additional comments (2)
config/swc.config.js (1)
8-8: The React Refresh conditional logic is correct.The condition
env.isDevelopment && env.runningWebpackDevServerappropriately restricts React Fast Refresh to development mode with the webpack dev server running.config/shakapacker.yml (1)
11-11: LGTM!The transpiler change from Babel to SWC is correctly configured for Shakapacker.
| const customConfig = { | ||
| options: { | ||
| jsc: { | ||
| transform: { | ||
| react: { | ||
| refresh: env.isDevelopment && env.runningWebpackDevServer, | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| }; |
There was a problem hiding this comment.
Fix the SWC configuration structure and add missing essential settings.
The current configuration has two issues:
-
Incorrect structure: The
optionswrapper (line 4) is likely incorrect. SWC configurations forswc-loadertypically havejscat the root level, not nested underoptions. -
Missing essential configuration: The config lacks critical settings:
- Parser settings (syntax, JSX support)
- Target environment/ECMAScript version
- Module type (CommonJS, ES modules)
Apply this diff to fix the structure and add essential configuration:
-const customConfig = {
- options: {
- jsc: {
- transform: {
- react: {
- refresh: env.isDevelopment && env.runningWebpackDevServer,
- },
- },
+const customConfig = {
+ jsc: {
+ parser: {
+ syntax: 'ecmascript',
+ jsx: true,
+ },
+ target: 'es2015',
+ transform: {
+ react: {
+ runtime: 'automatic',
+ refresh: env.isDevelopment && env.runningWebpackDevServer,
+ },
},
},
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const customConfig = { | |
| options: { | |
| jsc: { | |
| transform: { | |
| react: { | |
| refresh: env.isDevelopment && env.runningWebpackDevServer, | |
| }, | |
| }, | |
| }, | |
| }, | |
| }; | |
| const customConfig = { | |
| jsc: { | |
| parser: { | |
| syntax: 'ecmascript', | |
| jsx: true, | |
| }, | |
| target: 'es2015', | |
| transform: { | |
| react: { | |
| runtime: 'automatic', | |
| refresh: env.isDevelopment && env.runningWebpackDevServer, | |
| }, | |
| }, | |
| }, | |
| }; |
🤖 Prompt for AI Agents
In config/swc.config.js around lines 3 to 13, remove the incorrect top-level
"options" wrapper so that "jsc" sits at the root of the SWC config; add missing
essential settings under jsc: a parser block (syntax: "ecmascript", jsx: true),
a target (e.g. "es2022" or desired ES version), and keep the existing
transform.react.refresh setting wired to env.isDevelopment &&
env.runningWebpackDevServer; also add a top-level module.type field (e.g.
"commonjs" or "es6") to declare module output format.
| "@swc/core": "^1.13.5", | ||
| "ajv": "^8.17.1", |
There was a problem hiding this comment.
🧩 Analysis chain
Verify that the SWC dependency versions are current.
The versions of SWC-related packages may be outdated. Please ensure you're using the latest stable versions for optimal performance and security.
Since my knowledge may be outdated, please verify the current versions:
Also applies to: 101-101
🌐 Web query:
What are the latest stable versions of @swc/core and swc-loader packages?
💡 Result:
@swc/core — 1.13.1 (latest stable, published Jul 19, 2025). [1]
swc-loader — 0.2.6 (latest stable). [2]
Sources:
[1] Snyk package page for @swc/core.
[2] npm package page for swc-loader.
Update @swc/core to latest stable (1.13.1)
The declared "^1.13.5" isn’t published; change it to "^1.13.1".
🤖 Prompt for AI Agents
package.json around lines 48-49: the dependency entry for "@swc/core" is set to
an unpublished "^1.13.5"; change it to the published latest stable "^1.13.1",
update package.json accordingly, then run your package manager (npm install or
yarn install) to update node_modules and lockfile (package-lock.json or
yarn.lock) and verify the project builds/tests pass.
Project uses Yarn, so npm's package-lock.json should be ignored. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Pull Request Review - Switch from Babel to SWCSummaryThis PR migrates the JavaScript transpiler from Babel to SWC, which should provide significant performance improvements during development and build times. ✅ StrengthsCode Quality
Configuration
|
Pull Request Review: Switch from Babel to SWCSummaryThis PR migrates the JavaScript transpiler from Babel to SWC, a Rust-based compiler that promises significant performance improvements. I've reviewed the code changes, configuration, and potential impacts. ✅ Strengths1. Configuration Quality
2. Appropriate Dependency Additions
3. Smart Migration Approach
4.
|
justin808
force-pushed
the
justin808/babel-to-swc
branch
from
5aa80e9 to
020dae9
Compare
Pull Request Review: Switch from Babel to SWC for JavaScript TranspilationThis PR migrates the JavaScript transpiler from Babel to SWC for improved build performance. The implementation is solid but needs attention in several areas. Strengths
Issues and Recommendations1. Code Quality: SWC Configuration (config/swc.config.js:9)The target es2015 is conservative given your browserslist (>1%, last 5 versions, Safari 7+). Consider es2020 or es2022 for better performance and smaller bundles, or remove the target to let SWC infer from browserslist. 2. Outdated Dependencies@swc/core ^1.13.5 is outdated (latest is 1.9.x+). Update to latest version for bug fixes and performance improvements. Run yarn audit to check for vulnerabilities. 3. Missing Configuration OptionsThe SWC config is minimal. Consider adding:
4. Testing Gap (Major Concern)No evidence of testing the migration. Please document:
5. Missing Performance BenchmarksDocument actual build time improvements with before/after metrics. SWC claims 20x faster, but what is the real impact for this project? 6. Incomplete Migration PlanningYou note Babel config remains but do not clarify:
7. .gitignore AdditionGood - Preventing package-lock.json conflicts is a best practice. Security Considerations
Action ItemsHigh Priority:
Medium Priority:
Overall AssessmentStatus: Approve with suggestions This is a positive change that will improve DX and build performance. The implementation is fundamentally sound but would benefit from:
Safe to merge after addressing high-priority items. Questions
Great work improving the build tooling! Generated with Claude Code |
justin808
force-pushed
the
justin808/babel-to-swc
branch
from
020dae9 to
88f3651
Compare
Pull Request Review: Switch from Babel to SWCSummaryThis PR migrates the JavaScript transpiler from Babel to SWC, which should provide significant build performance improvements. Overall, this is a solid migration with good attention to detail. Below are my findings across several categories. ✅ Code Quality & Best PracticesStrengths:
Suggestions:
const customConfig = {
options: {
jsc: {
parser: {
syntax: 'ecmascript',
jsx: true,
dynamicImport: true,
},
keepClassNames: true,
loose: false,
externalHelpers: false,
transform: {
react: {
refresh: env.isDevelopment && env.runningWebpackDevServer,
runtime: 'automatic', // matches babel.config.js
},
},
},
},
};
jsc: {
target: 'es2015', // or 'es2016' based on your needs
// ... rest of config
}🐛 Potential IssuesMedium Priority
Low Priority
⚡ Performance ConsiderationsPositive:
Suggestions:
🔒 Security ConcernsNo significant security issues identified. Minor notes:
🧪 Test CoverageConcerns:
Recommendations:
📋 Additional Recommendations
✅ ConclusionThis is a well-executed migration that should provide significant performance benefits. The main concerns are:
Recommendation: Approve with minor modifications suggested above. The PR is safe to merge as-is, but would benefit from the Jest migration to Overall Rating: 8/10 - Good work! 🎉 🤖 Generated with Claude Code |
Add keepClassNames: true to SWC configuration to ensure Stimulus controllers work correctly. Without this setting, class names are mangled during transpilation, breaking Stimulus functionality. This fixes failing RSpec tests for Turbo/Stimulus form submission. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
justin808
force-pushed
the
justin808/babel-to-swc
branch
from
88f3651 to
f3d910d
Compare
Match the Babel configuration's React automatic runtime setting, which enables the new JSX transform (no need to import React). 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Pull Request Review: Switch from Babel to SWCOverviewThis PR successfully migrates the JavaScript transpiler from Babel to SWC, a Rust-based compiler that promises significantly faster build times. The implementation is well-executed overall with proper configuration and documentation. ✅ Strengths
🔍 Code Quality & Best Practicesconfig/swc.config.js
config/shakapacker.yml
.gitignore
|
|
Pull Request Review: Switch from Babel to SWC This PR migrates the JavaScript transpiler from Babel to SWC for improved build performance. Overall, this is a well-executed migration that follows Shakapacker documentation. STRENGTHS:
CRITICAL ISSUES TO ADDRESS:
ACTION ITEMS BEFORE MERGE:
Nice to Have:
OVERALL ASSESSMENT: Recommendation: Request Changes - Address the JSX runtime and target configuration issues, verify all tests pass, then this will be ready to merge. Great work on this migration! Address the items above and this will be production-ready. |
Override Shakapacker's default loose: true setting with loose: false to ensure spec-compliant class transforms that work with Stimulus. Without this, Stimulus controllers fail silently even with keepClassNames: true. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
PR Review: Babel to SWC MigrationI've reviewed this PR for the migration from Babel to SWC. Overall, this is a well-structured migration with good documentation. Here's my detailed analysis: ✅ Strengths
🔍 Code Quality & Best Practicesconfig/swc.config.js:16 - The React Fast Refresh configuration is correct: refresh: env.isDevelopment && env.runningWebpackDevServer,This properly guards against enabling refresh in production or when the dev server isn't running. config/swc.config.js:10 - Good catch on config/swc.config.js:7 -
|
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
PR Review: Switch from Babel to SWC for JavaScript TranspilationSummaryThis PR migrates the JavaScript transpiler from Babel to SWC, a Rust-based compiler promising faster build times. Overall, this is a well-executed migration with good documentation, but there are several important considerations and recommendations below. ✅ Strengths1. Clear Documentation
2. Thoughtful Configuration
3. Minimal Surface Area
|
|
✅ Review app for PR #677 was successfully deleted |
Summary
Benefits
Changes
config/shakapacker.ymlto useswcasjavascript_transpiler@swc/coreandswc-loaderto dependenciesajvdependency to resolve module resolution issuesNotes
config/swc.config.jsif neededDocumentation
🤖 Generated with Claude Code
This change is
Summary by CodeRabbit
Chores
Developer Experience