Skip to content
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 12 additions & 2 deletions docs/contributor-info/coding-agents-guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ This guide provides structured instructions for AI coding agents working with Re
### Version Compatibility Matrix

| react_on_rails | Shakapacker | Webpack | Node.js | Ruby |
|----------------|-------------|---------|---------|------|
| -------------- | ----------- | ------- | ------- | ---- |
| v16.x | >= 6.0 | v5 | 20-22 | 3.2+ |
| v14.x | >= 6.0 | v5 | 18-20 | 2.7+ |
| v13.x | >= 6.0 | v5 | 16-18 | 2.7+ |
Expand Down Expand Up @@ -206,25 +206,29 @@ fix_webpack_cache() {
#### 1. Missing Routes File (js-routes gem)

**Detection:**

```regex
/Cannot read properties of undefined.*reading 'module'/
/ProvidedDependencyTemplate\.apply/
```

**Auto-fix:**

```bash
bundle exec rails js:export
```

#### 2. ProvidePlugin Module Missing

**Detection:**

```regex
/Error: Can't resolve.*\$app/
/Module not found.*utils\/routes/
```

**Auto-fix:**

```bash
# Check if file exists, generate if missing
[ -f "app/javascript/utils/routes.js" ] || bundle exec rails js:export
Expand All @@ -236,12 +240,14 @@ grep -q "\$app" config/webpack/*.js || echo "⚠️ Missing webpack alias"
#### 3. Version Incompatibility

**Detection:**

```regex
/webpack.*incompatible/
/peer dep.*react-on-rails/
```

**Auto-fix:**

```bash
# Update to compatible versions
npm install react-on-rails@^16.0.0
Expand Down Expand Up @@ -370,18 +376,21 @@ After successful upgrades, suggest:
### If Build Completely Breaks

1. **Rollback immediately:**

```bash
git checkout HEAD~1 -- Gemfile package.json Gemfile.lock package-lock.json
bundle install
npm install
```

2. **Identify the issue:**

```bash
npm run build 2>&1 | tee build-error.log
```

3. **Apply targeted fixes:**

- Missing routes: `rails js:export`
- Cache issues: `rm -rf node_modules/.cache tmp/cache`
- Dependencies: `bundle update && npm install`
Expand All @@ -391,6 +400,7 @@ After successful upgrades, suggest:
### If Rails Environment Unavailable

Use minimal commands:

```bash
# Skip database operations
DATABASE_URL=sqlite3:tmp/minimal.db rails js:export
Expand All @@ -401,4 +411,4 @@ RAILS_ENV=test rails js:export

---

This guide ensures consistent, reliable React on Rails operations for coding agents while providing clear error recovery paths.
This guide ensures consistent, reliable React on Rails operations for coding agents while providing clear error recovery paths.
1 change: 1 addition & 0 deletions docs/guides/upgrading-react-on-rails.md
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ rails generate react_on_rails:install
**Symptoms:** Webpack cannot find modules referenced in your configuration

**Solutions:**

1. Clear webpack cache: `rm -rf node_modules/.cache`
2. Verify all ProvidePlugin modules exist
3. Check webpack alias configuration
Expand Down
35 changes: 29 additions & 6 deletions docs/javascript/troubleshooting-build-errors.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,80 +15,96 @@ This guide covers common webpack build errors encountered when using react_on_ra
**Note:** This error only occurs if you're using the optional `js-routes` gem to access Rails routes in JavaScript.

### Error Message

```
Cannot read properties of undefined (reading 'module')
TypeError: Cannot read properties of undefined (reading 'module')
at ProvidedDependencyTemplate.apply
```

### Root Cause

This error occurs when:

1. Your webpack config references Rails routes via ProvidePlugin
2. The `js-routes` gem hasn't generated the JavaScript routes file
3. You're using `js-routes` integration but missing the generated file

### When You Need js-routes

`js-routes` is **optional** and typically used when:

- Rails-heavy apps with React components that need to navigate to Rails routes
- Server-side rendered apps mixing Rails and React routing
- Legacy Rails apps migrating ERB views to React
- Apps using Rails routing patterns for RESTful APIs

### When You DON'T Need js-routes

Most modern React apps use:

- Client-side routing (React Router) instead of Rails routes
- Hardcoded API endpoints or environment variables
- SPA (Single Page App) architecture with API-only Rails backend

### Solution (if using js-routes)

1. **Generate JavaScript routes file:**

```bash
bundle exec rails js:export
```

2. **Verify the routes file was created:**

```bash
ls app/javascript/utils/routes.js
```

3. **Check webpack configuration includes ProvidePlugin:**
```javascript
new webpack.ProvidePlugin({
Routes: "$app/utils/routes"
})
Routes: '$app/utils/routes',
});
```

### Alternative Solution (if NOT using js-routes)

Remove the Routes ProvidePlugin from your webpack configuration:

```javascript
// Remove this line if you don't use js-routes
new webpack.ProvidePlugin({
Routes: "$app/utils/routes" // ← Remove this
})
Routes: '$app/utils/routes', // ← Remove this
});
```

## ProvidePlugin Module Resolution Errors

### Common Error Patterns

- `Cannot read properties of undefined (reading 'module')`
- `Module not found: Error: Can't resolve 'module_name'`
- `ERROR in ./path/to/file.js: Cannot find name 'GlobalVariable'`

### Debugging Steps

1. **Check file existence:**

```bash
find app/javascript -name "routes.*" -type f
find app/javascript -name "*global*" -type f
```

2. **Verify webpack aliases:**

```javascript
// In your webpack config
console.log('Webpack aliases:', config.resolve.alias);
```

3. **Test module resolution:**

```bash
# Run webpack with debug output
bin/shakapacker --debug-shakapacker
Expand All @@ -109,6 +125,7 @@ new webpack.ProvidePlugin({
## Environment Setup Dependencies

### Rails Environment Required

Some operations require a working Rails environment:

- `rails js:export` (generates routes - **only needed if using js-routes gem**)
Expand All @@ -118,17 +135,20 @@ Some operations require a working Rails environment:
### Common Issues

1. **Database Connection Errors:**

```
MONGODB | Error checking localhost:27017: Connection refused
```

**Solution:** These are usually warnings and don't prevent operation. To silence:

```bash
# Run with minimal environment
RAILS_ENV=development bundle exec rails js:export
```

2. **Missing Dependencies:**

```
sidekiq-pro is not installed
```
Expand All @@ -138,6 +158,7 @@ Some operations require a working Rails environment:
### Workarounds

1. **Skip database initialization:**

```bash
DATABASE_URL=sqlite3:tmp/db.sqlite3 rails js:export
```
Expand All @@ -152,14 +173,15 @@ Some operations require a working Rails environment:
### Version Compatibility Matrix

| react_on_rails | Shakapacker | Webpack | Node.js |
|----------------|-------------|---------|---------|
| -------------- | ----------- | ------- | ------- |
| v16.x | >= 6.0 | v5 | 20-22 |
| v14.x | >= 6.0 | v5 | 18-20 |
| v13.x | >= 6.0 | v5 | 16-18 |

### Common Upgrade Issues

1. **Webpacker to Shakapacker migration incomplete:**

```bash
# Remove webpacker references
grep -r "webpacker" config/
Expand All @@ -172,6 +194,7 @@ Some operations require a working Rails environment:
```

### Migration Steps

1. Follow the [Shakapacker upgrade guide](https://github.com/shakacode/shakapacker/blob/main/docs/v6_upgrade.md)
2. Update webpack configurations
3. Regenerate configurations with `rails generate react_on_rails:install`
Expand Down Expand Up @@ -254,4 +277,4 @@ fi

- Check the [general troubleshooting guide](./troubleshooting-when-using-shakapacker.md)
- Review [webpack configuration docs](./webpack.md)
- Contact [[email protected]](mailto:[email protected]) for professional support
- Contact [[email protected]](mailto:[email protected]) for professional support
46 changes: 0 additions & 46 deletions lib/generators/react_on_rails/bin/dev

This file was deleted.

4 changes: 2 additions & 2 deletions lib/generators/react_on_rails/generator_messages.rb
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ def clear
@output = []
end

def helpful_message_after_installation(component_name: "HelloWorld")
def helpful_message_after_installation(component_name: "HelloWorld", route: "hello_world")
process_manager_section = build_process_manager_section
testing_section = build_testing_section
package_manager = detect_package_manager
Expand All @@ -62,7 +62,7 @@ def helpful_message_after_installation(component_name: "HelloWorld")
./bin/dev prod # Production-like mode for testing
./bin/dev help # See all available options

3. Visit: #{Rainbow('http://localhost:3000/hello_world').cyan.underline}
3. Visit: #{Rainbow(route ? "http://localhost:3000/#{route}" : 'http://localhost:3000').cyan.underline}
✨ KEY FEATURES:
─────────────────────────────────────────────────────────────────────────
β€’ Auto-registration enabled - Your layout only needs:
Expand Down
15 changes: 12 additions & 3 deletions lib/generators/react_on_rails/install_generator.rb
Original file line number Diff line number Diff line change
Expand Up @@ -136,11 +136,13 @@ def shakapacker_in_gemfile?
end

def add_bin_scripts
directory "#{__dir__}/bin", "bin"
# Copy bin scripts from templates
template_bin_path = "#{__dir__}/templates/base/base/bin"
directory template_bin_path, "bin"

# Make these and only these files executable
files_to_copy = []
Dir.chdir("#{__dir__}/bin") do
Dir.chdir(template_bin_path) do
files_to_copy.concat(Dir.glob("*"))
end
files_to_become_executable = files_to_copy.map { |filename| "bin/#{filename}" }
Expand All @@ -149,7 +151,14 @@ def add_bin_scripts
end

def add_post_install_message
GeneratorMessages.add_info(GeneratorMessages.helpful_message_after_installation)
# Determine what route will be created by the generator
route = "hello_world" # This is the hardcoded route from base_generator.rb
component_name = options.redux? ? "HelloWorldApp" : "HelloWorld"

GeneratorMessages.add_info(GeneratorMessages.helpful_message_after_installation(
component_name: component_name,
route: route
))
end

def shakapacker_loaded_in_process?(gem_name)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ def add_redux_specific_messages
require_relative "generator_messages"
GeneratorMessages.output.clear
GeneratorMessages.add_info(
GeneratorMessages.helpful_message_after_installation(component_name: "HelloWorldApp")
GeneratorMessages.helpful_message_after_installation(component_name: "HelloWorldApp", route: "hello_world")
)
end
end
Expand Down
17 changes: 1 addition & 16 deletions lib/generators/react_on_rails/templates/base/base/bin/dev
Original file line number Diff line number Diff line change
Expand Up @@ -28,19 +28,4 @@ rescue LoadError
end

# Main execution
case ARGV[0]
when "production-assets", "prod"
ReactOnRails::Dev::ServerManager.start(:production_like)
when "static"
ReactOnRails::Dev::ServerManager.start(:static, "Procfile.dev-static-assets")
when "kill"
ReactOnRails::Dev::ServerManager.kill_processes
when "help", "--help", "-h"
ReactOnRails::Dev::ServerManager.show_help
when "hmr", nil
ReactOnRails::Dev::ServerManager.start(:development, "Procfile.dev")
else
puts "Unknown argument: #{ARGV[0]}"
puts "Run 'bin/dev help' for usage information"
exit 1
end
ReactOnRails::Dev::ServerManager.run_from_command_line(ARGV)
Loading
Loading