Skip to content

Switch from Babel to SWC for faster JavaScript transpilation #677

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Oct 8, 2025
Merged

Switch from Babel to SWC for faster JavaScript transpilation #677

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
62ee4f1
Switch from Babel to SWC for faster JavaScript transpilation
justin808 Oct 6, 2025
cf7fd99
Add SWC configuration for React Fast Refresh
justin808 Oct 6, 2025
ffca3cb
Add package-lock.json to gitignore
justin808 Oct 7, 2025
f3d910d
Fix SWC config to preserve class names for Stimulus compatibility
justin808 Oct 7, 2025
ce8f58d
Add React automatic runtime to SWC config to match Babel
justin808 Oct 7, 2025
c336d81
Add loose: false to SWC config for Stimulus compatibility
justin808 Oct 8, 2025
a2654d7
Remove package-lock.json from .gitignore to detect accidental npm usage
justin808 Oct 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion config/shakapacker.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ default: &default
cache_path: tmp/shakapacker
webpack_compile_output: true
nested_entries: true
javascript_transpiler: babel
javascript_transpiler: swc

# Additional paths webpack should lookup modules
# ['app/assets', 'engine/foo/app/assets']
Expand Down
15 changes: 15 additions & 0 deletions config/swc.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
const { env } = require('shakapacker');

const customConfig = {
options: {
jsc: {
transform: {
react: {
refresh: env.isDevelopment && env.runningWebpackDevServer,
},
},
},
},
};
Comment on lines 3 to 21
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Fix the SWC configuration structure and add missing essential settings.

The current configuration has two issues:

  1. Incorrect structure: The options wrapper (line 4) is likely incorrect. SWC configurations for swc-loader typically have jsc at the root level, not nested under options.

  2. 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.

Suggested change
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.


module.exports = customConfig;
3 changes: 3 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,8 @@
"@rails/actioncable": "7.0.5",
"@rescript/core": "^0.5.0",
"@rescript/react": "^0.11.0",
"@swc/core": "^1.13.5",
"ajv": "^8.17.1",
Comment on lines +48 to +49
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 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.

"autoprefixer": "^10.4.14",
"axios": "^0.21.1",
"babel-loader": "^9.1.2",
Expand Down Expand Up @@ -96,6 +98,7 @@
"shakapacker": "9.0.0-beta.8",
"stimulus": "^3.0.1",
"style-loader": "^3.3.1",
"swc-loader": "^0.2.6",
"tailwindcss": "^3.3.3",
"terser-webpack-plugin": "5",
"turbolinks": "^5.2.0",
Expand Down
Loading
Loading