[Snyk] Security upgrade react-scripts from 3.4.0 to 5.0.0

[patinthehat]

Snyk has created this PR to fix 2 vulnerabilities in the npm dependencies of this project.

Snyk changed the following file(s):

• demo/package.json

Vulnerabilities that will be fixed with an upgrade:

	Issue	Score
	Server-side Request Forgery (SSRF) SNYK-JS-IP-12704893	280
	Server-side Request Forgery (SSRF) SNYK-JS-IP-12761655	280

---

Important

• Check the changes in this PR to ensure they won't cause issues with your project.
• Max score is 1000. Note that the real score may have changed since the PR was raised.
• This PR was automatically created by Snyk using the credentials of a real user.

---

Note: You are seeing this because you or someone else with access to this repository has authorized Snyk to open fix PRs.

For more information:
🧐 View latest project report
📜 Customise PR templates
🛠 Adjust project settings
📚 Read about Snyk's upgrade logic

---

Learn how to fix vulnerabilities with free interactive lessons:

🦉 Server-side Request Forgery (SSRF)

[amazon-q-developer]

⏳ Code review in progress. Analyzing for code quality issues and best practices. Detailed findings will be posted upon completion.

Using Amazon Q Developer for GitHub

Amazon Q Developer¹ is an AI-powered assistant that integrates directly into your GitHub workflow, enhancing your development process with intelligent features for code development, review, and transformation.

Slash Commands

Command	Description
/q <message>	Chat with the agent to ask questions or request revisions
/q review	Requests an Amazon Q powered code review
/q help	Displays usage information

Features

Agentic Chat
Enables interactive conversation with Amazon Q to ask questions about the pull request or request specific revisions. Use /q <message> in comment threads or the review body to engage with the agent directly.

Code Review
Analyzes pull requests for code quality, potential issues, and security concerns. Provides feedback and suggested fixes. Automatically triggered on new or reopened PRs (can be disabled for AWS registered installations), or manually with /q review slash command in a comment.

Customization

You can create project-specific rules for Amazon Q Developer to follow:

1. Create a .amazonq/rules folder in your project root.
2. Add Markdown files in this folder to define rules (e.g., cdk-rules.md).
3. Write detailed prompts in these files, such as coding standards or best practices.
4. Amazon Q Developer will automatically use these rules when generating code or providing assistance.

Example rule:

All Amazon S3 buckets must have encryption enabled, enforce SSL, and block public access.
All Amazon DynamoDB Streams tables must have encryption enabled.
All Amazon SNS topics must have encryption enabled and enforce SSL.
All Amazon SNS queues must enforce SSL.

Feedback

To provide feedback on Amazon Q Developer, create an issue in the Amazon Q Developer public repository.

For more detailed information, visit the Amazon Q for GitHub documentation.

Footnotes

1. Amazon Q Developer uses generative AI. You may need to verify generated code before using it in your environment. See the AWS Responsible AI Policy. ↩

[coderabbitai]

Important

Review skipped

Ignore keyword(s) in the title.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch snyk-fix-185a436a4fac09b75291ea9c6079e77a

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

• Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
• Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[amazon-q-developer]

Security Upgrade Review Summary

This PR addresses critical SSRF vulnerabilities by upgrading react-scripts from 3.4.0 to 5.0.0, which is an important security improvement. However, this upgrade introduces significant compatibility challenges that need to be addressed before merging.

Critical Issues to Address:

1. Breaking Change: React Scripts 5.0.0 requires React 17+ but this project uses React 16.10.1, which will cause build failures
2. Dependency Chain: Multiple dependencies (Material-UI v4, react-error-boundary v1.2.5) may be incompatible with newer React versions
3. Runtime Requirements: Ensure Node.js 14+ is available in all environments

Recommended Approach:

Consider creating a comprehensive dependency upgrade plan that includes:

• Upgrading React and React DOM to v17 or v18
• Updating Material-UI to v5 (@mui/material)
• Upgrading react-error-boundary to v4+
• Testing thoroughly in a development environment before merging

While the security fixes are important, the current approach may break the application. A phased upgrade strategy would be safer than this isolated react-scripts update.

[amazon-q-developer]

🛑 Breaking Change Risk: This upgrade from react-scripts 3.4.0 to 5.0.0 spans multiple major versions and introduces significant breaking changes. React Scripts 5.0.0 requires React 17+ and Node.js 14+, but this project is still using React 16.10.1. This version mismatch will likely cause build failures and runtime issues¹.

Footnotes

1. CWE-1104: Use of Unmaintained Third Party Components - https://cwe.mitre.org/data/definitions/1104.html ↩

[amazon-q-developer]

The current React version (16.10.1) is incompatible with react-scripts 5.0.0, which requires React 17+. This dependency mismatch will cause build failures. Consider upgrading React and React DOM to version 17 or 18 alongside this react-scripts upgrade to ensure compatibility.

[amazon-q-developer]

Material-UI v4 components may have compatibility issues with newer React versions. If you upgrade React to support react-scripts 5.0.0, consider also upgrading to Material-UI v5 (now @mui/material) to avoid potential deprecation warnings and ensure long-term support.

[amazon-q-developer]

React Scripts 5.0.0 includes webpack 5 and may require Node.js 14+ to run properly. Verify that your development and deployment environments meet these minimum requirements before merging this upgrade.

[amazon-q-developer]

The react-error-boundary version (1.2.5) is quite outdated and may not be compatible with newer React versions. Consider upgrading to react-error-boundary v4+ which provides better TypeScript support and React 18 compatibility.