react-scripts - CVE-2021-3803 - react-script module nth-check denial of service CVSS 7.5 about create-react-app

[Shubhamsoni9139]

Description of the Bug

The React app created using Create React App (CRA) has encountered a CSS issue after implementing React code splitting. When navigating to a code-split component for the first time, the CSS for that component is not applied. However, if the user navigates to another component and then returns, the CSS is correctly applied.

Additionally, there is an inner dependency issue with react-scripts related to the nth-check module, version 1.0.2, which has a vulnerability as described in CVE-2021-3803. This vulnerability involves inefficient regular expression complexity.
Did You Try Recovering Your Dependencies?

Yes, attempts to recover dependencies were made, but the issue persists.
Which Terms Did You Search for in User Guide?

Code splitting
CSS issues with code splitting
React Suspense CSS
CRA CSS not loading
CVE-2021-3803
React-scripts dependency update

Environment

Create React App version: 5.0.0 (example version)
React version: 18.0.0 (example version)
react-scripts version: 5.0.0 (example version)
Browser: Chrome 90, Firefox 88 (example versions)
Operating System: macOS 11.4, Windows 10 (example versions)

Steps to Reproduce

Create a React app using CRA.
Implement code splitting using React's lazy and Suspense.
Add CSS imports in the code-split component.
Navigate to the code-split component for the first time.
Observe that CSS is not applied.
Navigate to another component and return to the code-split component.
Observe that CSS is now correctly applied.

Expected Behavior

The CSS should be applied correctly the first time the code-split component is mounted.
Actual Behavior

The CSS is not applied the first time the code-split component is mounted. It only applies after navigating away and then returning to the component.
Reproducible Demo

Here is a simplified version of the project setup:

import React, { Suspense, lazy } from 'react';
import './styles.scss'; // Ensure global styles are loaded

const Search = lazy(() => import('./search/search'));

function Parent() {
return (
<Suspense fallback={

Loading...

}>


);
}

export default Parent;
import React from 'react';
import './search.scss';

function Search() {
return (

{/* Your search component code */}

);
}

export default Search;
Additional Notes
Vulnerability in nth-check

The react-scripts package includes an outdated version of the nth-check module, which is vulnerable to inefficient regular expression complexity as detailed in CVE-2021-3803. This issue needs to be addressed in an update to react-scripts to include a patched version of nth-check.