You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
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
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.
Describe the bug
(Write your answer here.)
react-script inner dependency /embed module nth-check-1.0.2
https://nvd.nist.gov/vuln/detail/CVE-2021-3803
Did you try recovering your dependencies?
(Write your answer here.)
Which terms did you search for in User Guide?
(Write your answer here if relevant.)
Environment
see above. kindly provide fixed in react-script update.
(paste the output of the command here.)
Steps to reproduce
(Write your steps here:)
Expected behavior
(Write what you thought would happen.)
Actual behavior
(Write what happened. Please add screenshots!)
Reproducible demo
(Paste the link to an example project and exact instructions to reproduce the issue.)
The text was updated successfully, but these errors were encountered: