Fix CSS Modules compatibility with Shakapacker 9.0.0+

[justin808]

Summary

Fix CSS Modules compatibility issues with Shakapacker 9.0.0+ to ensure existing import patterns continue to work.

Problem

Shakapacker 9.0+ defaults to namedExport: true for CSS Modules, which breaks existing code using:

import styles from './file.module.css'

This causes errors because named exports expect:

import * as styles from './file.module.css'

Proposed Solution

1. Configure CSS Modules for Backward Compatibility

Update webpack config to set:

loader.options.modules.namedExport = false;
loader.options.modules.exportLocalsConvention = 'camelCase';

2. Fix SCSS Variable Issues

• Import app-variables in CSS Module files to prevent undefined variable errors
• Remove redundant @import statements
• Update both OSS and Pro dummy apps

3. Update Documentation

• Document CSS Modules configuration for Shakapacker 9+
• Add migration guide for upgrading projects
• Include troubleshooting section

Files to Update

From PR #1896 as reference:

• spec/dummy/config/webpack/commonWebpackConfig.js
• react_on_rails_pro/spec/dummy/config/webpack/commonWebpackConfig.js
• spec/dummy/client/app/components/HelloWorld.module.scss
• react_on_rails_pro/spec/dummy/client/app/components/HelloWorld.module.scss
• CSS Modules documentation

Testing

• Test existing CSS Module imports work
• Verify SCSS variables are resolved
• Test in both OSS and Pro dummy apps
• Ensure no console errors or warnings

Related

• Extracted from closed PR Upgrade Shakapacker to 9.3.0 #1896
• Addresses compatibility with Shakapacker 9.0.0+

Labels

bug, enhancement

[justin808]

This issue has already been fixed! ✅

The CSS Modules compatibility fix for Shakapacker 9.0+ was implemented in commit b9f5ceb (Nov 2, 2025).

What was fixed:

1. ✅ OSS dummy app (spec/dummy/config/webpack/commonWebpackConfig.js lines 32-52):

   • Set loader.options.modules.namedExport = false
   • Set loader.options.modules.exportLocalsConvention = 'camelCase'
   • This restores backward compatibility with existing import styles from './file.module.css' patterns

2. ✅ Pro dummy app (react_on_rails_pro/spec/dummy/config/webpack/commonWebpackConfig.js):

   • Same CSS Modules configuration applied
   • Works for both .module.scss and .module.css files

3. ✅ SCSS variables:

   • Added sass-resources-loader to inject app-variables.scss automatically
   • Applied to both regular .scss and .module.scss files

Timeline:

• Fix committed: Nov 2, 2025 (commit b9f5ceb)
• Issue created: Nov 9, 2025 (7 days after fix)

The issue was created after the fix was already implemented, likely because the issue description was extracted from a closed PR (#1896) that had this work.

Closing as already resolved.