Comments (3)
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={
);
}
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.
from create-react-app.
Has this issue been resolved? I am currently facing the same problem.
from create-react-app.
Any updates on this?
from create-react-app.
Related Issues (20)
- Issue in creating react app HOT 4
- cra打包路由切换FiberRootNode会新增,webpack打包就不会 HOT 1
- Error -4048 and Error -4058 and ENOENT, HOT 1
- Des erreurs apres installation de mui sur un projet React 18.0.0 ou supérieur HOT 1
- del proyecto
- how i can run react program in vs code HOT 5
- React JS HOT 4
- @babel/plugin-proposal-private-property-in-object missing from babel-preset-react-app dependencies HOT 1
- Npx create-react-app: 8 vulnerabilities (2 moderate, 6 high) in new react app HOT 3
- 不动 啊 HOT 1
- React Application Embedded Script HOT 1
- Allow user to config publicPath of webpack and set its default value to auto
- Cannot find module 'ajv/dist/compile/codegen' HOT 2
- I am so angry i just cant take it HOT 2
- An Error HOT 1
- Bad Resource link in https://create-react-app.dev/ HOT 2
- About deprecated packages HOT 1
- Is there a good fork of CRA? HOT 1
- Broken and soon to be discontiued short links (goo.gl)
- Create react app
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from create-react-app.