Skip to content

Commit de1e97c

Browse files
committed
Use Babel for JavaScript files, SWC for TypeScript only
Add Babel loader for .js/.jsx files to fix Stimulus compatibility issues. SWC's class transformation breaks Stimulus event listener binding, so we use Babel for JavaScript (including Stimulus controllers) while keeping SWC for TypeScript files to maintain performance benefits. This hybrid approach matches the reference implementation and resolves the RSpec test failures with Stimulus controllers.
1 parent ce796aa commit de1e97c

File tree

1 file changed

+41
-1
lines changed

1 file changed

+41
-1
lines changed

config/webpack/commonWebpackConfig.js

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,47 @@ if (scssConfigIndex === -1) {
6969
}
7070

7171
// Copy the object using merge b/c the baseClientWebpackConfig and commonOptions are mutable globals
72-
const commonWebpackConfig = () => merge({}, baseClientWebpackConfig, commonOptions, ignoreWarningsConfig);
72+
const commonWebpackConfig = () => {
73+
const config = merge({}, baseClientWebpackConfig, commonOptions, ignoreWarningsConfig);
74+
75+
// Find the SWC rule and get its include/exclude
76+
const swcRuleIndex = config.module.rules.findIndex(rule =>
77+
rule.test && /\.(ts|tsx|js|jsx|mjs|coffee)/.test(rule.test.toString())
78+
);
79+
80+
if (swcRuleIndex !== -1) {
81+
const swcRule = config.module.rules[swcRuleIndex];
82+
83+
// Insert Babel rule BEFORE SWC rule so it matches .js files first
84+
// This allows Babel to handle all JavaScript while SWC continues to match TypeScript
85+
config.module.rules.splice(swcRuleIndex, 0, {
86+
test: /\.(js|jsx|mjs)(\.erb)?$/,
87+
include: swcRule.include,
88+
exclude: swcRule.exclude,
89+
use: {
90+
loader: 'babel-loader',
91+
options: {
92+
presets: [
93+
['@babel/preset-env', {
94+
useBuiltIns: 'entry',
95+
corejs: 3,
96+
modules: 'auto',
97+
bugfixes: true,
98+
exclude: ['transform-typeof-symbol']
99+
}],
100+
['@babel/preset-react', {
101+
runtime: 'automatic',
102+
development: process.env.NODE_ENV !== 'production',
103+
useBuiltIns: true
104+
}]
105+
]
106+
}
107+
}
108+
});
109+
}
110+
111+
return config;
112+
};
73113

74114
module.exports = commonWebpackConfig;
75115

0 commit comments

Comments
 (0)