Skip to content

Commit 2406819

Browse files
justin808claude
andcommitted
Add css_modules_export_mode setting as preferred solution
Shakapacker 9.3.1+ supports css_modules_export_mode in shakapacker.yml, which is simpler than manual webpack configuration. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
1 parent cd1bf8c commit 2406819

File tree

1 file changed

+20
-3
lines changed

1 file changed

+20
-3
lines changed

docs/migrating/migrating-to-rspack.md

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,9 +53,23 @@ console.log(css.someClass); // undefined!
5353
- SSR: `Cannot read properties of undefined (reading 'someClassName')`
5454
- Build: `ESModulesLinkingWarning: export 'default' (imported as 'css') was not found in './Component.module.scss'`
5555

56-
### The Solution
56+
### The Solution (Shakapacker 9.3.1+)
5757

58-
Configure CSS loader to preserve default export behavior in your webpack config:
58+
The simplest solution is to use the `css_modules_export_mode` setting in `shakapacker.yml`:
59+
60+
```yaml
61+
# config/shakapacker.yml
62+
default: &default # ... existing configuration ...
63+
css_modules_export_mode: default # Use v8-style default exports
64+
```
65+
66+
This single setting restores the previous behavior without any webpack config changes.
67+
68+
See the [Shakapacker CSS Modules Export Mode documentation](https://github.com/shakacode/shakapacker/blob/main/docs/css-modules-export-mode.md) for more details.
69+
70+
### Alternative: Manual Webpack Configuration
71+
72+
If you're on an older Shakapacker version (< 9.3.1) or need more control, configure the CSS loader directly:
5973

6074
```javascript
6175
// config/webpack/commonWebpackConfig.js
@@ -238,6 +252,8 @@ Add to `package.json`:
238252

239253
## Complete Configuration Example
240254

255+
> **Note:** If using Shakapacker 9.3.1+, you can skip the CSS modules webpack config by setting `css_modules_export_mode: default` in `shakapacker.yml` (see Step 2).
256+
241257
Here's a complete example of a dual Webpack/Rspack compatible configuration:
242258

243259
```javascript
@@ -364,7 +380,7 @@ module.exports = configureServer;
364380
365381
**Cause:** Shakapacker 9's `namedExport: true` default.
366382
367-
**Solution:** Apply the CSS modules fix in Step 2.
383+
**Solution:** Set `css_modules_export_mode: default` in `shakapacker.yml` (Shakapacker 9.3.1+), or apply the manual webpack configuration fix in Step 2.
368384
369385
## Performance Benefits
370386
@@ -376,6 +392,7 @@ After migrating to Rspack, you should see significant build time improvements:
376392
377393
## Additional Resources
378394
395+
- [Shakapacker CSS Modules Export Mode](https://github.com/shakacode/shakapacker/blob/main/docs/css-modules-export-mode.md) - Configuration for CSS modules export behavior
379396
- [Shakapacker Rspack Support Issue](https://github.com/shakacode/shakapacker/issues/693)
380397
- [Rspack Documentation](https://rspack.dev/)
381398
- [Shakapacker Documentation](https://github.com/shakacode/shakapacker)

0 commit comments

Comments
 (0)