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

[wizbit]

Snyk has created this PR to fix 1 vulnerabilities in the yarn dependencies of this project.

Snyk changed the following file(s):

• example/package.json
• example/yarn.lock

Note for zero-installs users

If you are using the Yarn feature zero-installs that was introduced in Yarn V2, note that this PR does not update the .yarn/cache/ directory meaning this code cannot be pulled and immediately developed on as one would expect for a zero-install project - you will need to run yarn to update the contents of the ./yarn/cache directory.
If you are not using zero-install you can ignore this as your flow should likely be unchanged.

Vulnerabilities that will be fixed with an upgrade:

	Issue	Score
	Regular Expression Denial of Service (ReDoS) SNYK-JS-MINIMATCH-15309438	828

Breaking Change Risk

Notice: This assessment is enhanced by AI.

---

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:

🦉 Regular Expression Denial of Service (ReDoS)

[wizbit]

This is a major version upgrade from react-scripts v3 to v5, which includes significant breaking changes across two major versions (v4 and v5). Action is required to ensure compatibility.

react-scripts@4.0.0 Breaking Changes:

• Fast Refresh: Replaces hot-reloading with Fast Refresh, which may affect how component state is preserved during development.
• ESLint 7: Upgrades from ESLint 6 to 7, which may introduce new linting rules and require configuration updates.
• React 17 & New JSX Transform: Adopts React 17, which no longer requires import React from 'react' in every file to use JSX.
• Jest 26: Upgrades the testing framework to version 26.

react-scripts@5.0.0 Breaking Changes:

• Webpack 5: This is the most significant change. Webpack 5 no longer provides automatic browser polyfills for Node.js core modules. This means if your project or its dependencies rely on packages like crypto, buffer, or stream, the build will fail without manual configuration.
• Node.js Version Support: Drops support for Node.js versions 10 and 12.
• Dependency Upgrades: Includes major bumps for Jest 27, ESLint 8, and PostCSS 8.

Recommendation:

1. Address Webpack 5 Polyfills: This is the most critical step. Identify any dependencies that rely on Node.js polyfills and either replace them with browser-compatible alternatives or use a tool like craco or react-app-rewired to add the necessary fallbacks.
2. Upgrade Node.js: Ensure your development and deployment environments are using a supported version of Node.js (v14+).
3. Review Linters and Tests: Expect to fix new ESLint errors and potentially update Jest tests due to the major version upgrades.
4. Clean Installation: It is highly recommended to delete your node_modules folder and package-lock.json or yarn.lock file and perform a clean install after updating.

Source: Create React App v4 Changelog, Create React App v5 Changelog

Notice 🤖: This content was augmented using artificial intelligence. AI-generated content may contain errors and should be reviewed for accuracy before use.