amazon-bedrock-agentcore-samples/02-use-cases/text-to-python-ide/docs/ESLINT_FIXES.md

ESLint Error Fixes

Common ESLint Errors and Solutions

1. 'ComponentName' is not defined (react/jsx-no-undef)

Error Example:

ERROR
[eslint] 
src/components/ExecutionResults.js
  Line 67:20:  'Badge' is not defined  react/jsx-no-undef

Solution: Add the missing component to the import statement:

// Before (missing Badge)
import {
  Container,
  Header,
  SpaceBetween,
  Box,
  Button
} from '@cloudscape-design/components';

// After (Badge added)
import {
  Container,
  Header,
  SpaceBetween,
  Box,
  Button,
  Badge
} from '@cloudscape-design/components';

2. Unused Variables Warning

Error Example:

WARNING
[eslint] 
src/components/CodeDisplay.js
  Line 2:35:  'SpaceBetween' is defined but never used  no-unused-vars

Solution: Remove unused imports:

// Before (SpaceBetween unused)
import { Box, Button, SpaceBetween } from '@cloudscape-design/components';

// After (SpaceBetween removed)
import { Box, Button } from '@cloudscape-design/components';

3. Console Statements Warning

Error Example:

WARNING
[eslint] 
src/App.js
  Line 45:7:  Unexpected console statement  no-console

Solution: Either remove console statements for production or use eslint-disable:

// Option 1: Remove console statements
// console.log('Debug info'); // Remove this

// Option 2: Disable eslint for specific line
// eslint-disable-next-line no-console
console.log('Debug info');

// Option 3: Use proper logging in production
if (process.env.NODE_ENV === 'development') {
  console.log('Debug info');
}

Common Cloudscape Components

Here are the most commonly used Cloudscape components that need to be imported:

import {
  // Layout
  AppLayout,
  ContentLayout,
  Container,
  Header,
  Box,
  SpaceBetween,
  ColumnLayout,
  
  // Form Controls
  Button,
  Input,
  Textarea,
  FormField,
  FileUpload,
  Select,
  
  // Feedback
  Alert,
  Spinner,
  StatusIndicator,
  Badge,
  
  // Navigation
  Tabs,
  Modal,
  Link,
  
  // Data Display
  Table,
  CodeEditor
} from '@cloudscape-design/components';

Quick Fix Commands

Run ESLint Check

cd frontend
npm run lint

Auto-fix ESLint Issues

cd frontend
npx eslint src/ --fix

Check Specific File

cd frontend
npx eslint src/components/ExecutionResults.js

Prevention Tips

1. Use IDE Extensions: Install ESLint extension for your IDE
2. Pre-commit Hooks: Set up ESLint to run before commits
3. Regular Checks: Run npm run lint regularly during development
4. Import Organization: Keep imports organized and remove unused ones

Testing Frontend

Run the frontend test script to check for common issues:

node test_frontend.js

This will check for:

• Missing files
• Missing dependencies
• Import issues
• Deprecated component usage