Generator produces invalid JavaScript syntax for CSS modules

[justin808]

Bug Report

Summary

The react_on_rails:generate_packs generator produces invalid JavaScript syntax when creating files for CSS modules, resulting in build failures due to syntax errors.

Environment

• react_on_rails version: 15.0.0
• Ruby version: 3.3.7
• Node version: v22.12.0
• npm version: 11.4.1
• Rails version: 8.0.2.1

Steps to Reproduce

1. Create a React component with CSS modules (e.g., Component.module.css)
2. Run bundle exec rails react_on_rails:generate_packs
3. Attempt to build with webpack
4. Build fails with syntax errors

Expected Behavior

Generated files should contain valid JavaScript syntax that compiles successfully.

Actual Behavior

The generator creates files with invalid JavaScript syntax:

Generated file: app/javascript/packs/generated/HeavyMarkdownEditor.module.js

import ReactOnRails from 'react-on-rails/client';
import HeavyMarkdownEditor.module from '../../src/HeavyMarkdownEditor/ror_components/HeavyMarkdownEditor.module.css';

ReactOnRails.register({HeavyMarkdownEditor.module});

Generated file: app/javascript/generated/server-bundle-generated.js

import ReactOnRails from 'react-on-rails';

import HeavyMarkdownEditor from '../src/HeavyMarkdownEditor/ror_components/HeavyMarkdownEditor.jsx';
import HeavyMarkdownEditor.module from '../src/HeavyMarkdownEditor/ror_components/HeavyMarkdownEditor.module.css';
import HelloWorld from '../src/HelloWorld/ror_components/HelloWorld.jsx';
import HelloWorld.module from '../src/HelloWorld/ror_components/HelloWorld.module.css';

ReactOnRails.register({HeavyMarkdownEditor,
HeavyMarkdownEditor.module,
HelloWorld,
HelloWorld.module});

Build Error

ERROR in ./app/javascript/packs/generated/HeavyMarkdownEditor.module.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token, expected "from" (2:26)

  1 | import ReactOnRails from 'react-on-rails/client';
> 2 | import HeavyMarkdownEditor.module from '../../src/HeavyMarkdownEditor/ror_components/HeavyMarkdownEditor.module.css';
    |                           ^
  3 |
  4 | ReactOnRails.register({HeavyMarkdownEditor.module});

Issues with Generated Code

1. Invalid variable names: HeavyMarkdownEditor.module is not a valid JavaScript identifier (contains a dot)
2. Invalid object properties: {HeavyMarkdownEditor.module} uses invalid syntax for object properties
3. Incorrect CSS module imports: CSS modules export named exports, not default exports

Suggested Fix

The generated code should be:

// Valid JavaScript syntax
import ReactOnRails from 'react-on-rails/client';
import * as HeavyMarkdownEditorModule from '../../src/HeavyMarkdownEditor/ror_components/HeavyMarkdownEditor.module.css';

ReactOnRails.register({HeavyMarkdownEditorModule});

Impact

This bug completely breaks the build process for any React on Rails application that uses CSS modules, making it impossible to use CSS modules with the current generator without manual fixes to auto-generated files.

Workaround

Manually fix the generated files after each generation:

1. Replace Component.module variable names with valid identifiers like ComponentModule
2. Change imports to use import * as ComponentModule syntax
3. Update the register calls to use the corrected variable names

This workaround needs to be applied every time the generator runs, which is not sustainable.

Additional Context

This appears to be a bug in the template generation logic that doesn't properly handle the naming convention for CSS modules. The generator should sanitize the variable names and use proper CSS module import syntax.