Skip to content

Commit 1685fb4

Browse files
justin808claude
andcommitted
Fix CSS modules to use default exports for ReScript compatibility
Shakapacker 9 changed CSS modules default to namedExport: true, but the existing ReScript code expects default exports (import css from). Changes: - Set namedExport: false for all CSS loaders - Change exportLocalsConvention from camelCaseOnly to camelCase - Apply fix to all CSS-related rules, not just SCSS This resolves SSR errors: "Cannot read properties of undefined (reading 'elementEnter')" in ReScript components. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 012b0b7 commit 1685fb4

File tree

1 file changed

+16
-11
lines changed

1 file changed

+16
-11
lines changed

config/rspack/commonRspackConfig.js

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,22 @@ const ignoreWarningsConfig = {
2020
ignoreWarnings: [/Module not found: Error: Can't resolve 'react-dom\/client'/],
2121
};
2222

23+
// Fix all CSS-related loaders to use default exports instead of named exports
24+
// Shakapacker 9 defaults to namedExport: true, but existing code expects default exports
25+
baseClientRspackConfig.module.rules.forEach((rule) => {
26+
if (rule.use && Array.isArray(rule.use)) {
27+
const cssLoader = rule.use.find((loader) => {
28+
const loaderName = typeof loader === 'string' ? loader : loader?.loader;
29+
return loaderName?.includes('css-loader');
30+
});
31+
32+
if (cssLoader?.options?.modules) {
33+
cssLoader.options.modules.namedExport = false;
34+
cssLoader.options.modules.exportLocalsConvention = 'camelCase';
35+
}
36+
}
37+
});
38+
2339
const scssConfigIndex = baseClientRspackConfig.module.rules.findIndex((config) =>
2440
'.scss'.match(config.test) && config.use,
2541
);
@@ -51,17 +67,6 @@ if (scssConfigIndex === -1) {
5167
}
5268
}
5369

54-
// Fix css-loader configuration for CSS modules if namedExport is enabled
55-
// When namedExport is true, exportLocalsConvention must be camelCaseOnly or dashesOnly
56-
const cssLoader = scssRule.use.find((loader) => {
57-
const loaderName = typeof loader === 'string' ? loader : loader?.loader;
58-
return loaderName?.includes('css-loader');
59-
});
60-
61-
if (cssLoader?.options?.modules?.namedExport) {
62-
cssLoader.options.modules.exportLocalsConvention = 'camelCaseOnly';
63-
}
64-
6570
baseClientRspackConfig.module.rules[scssConfigIndex].use.push(sassLoaderConfig);
6671
}
6772

0 commit comments

Comments
 (0)