CSS is not working correctly after applying the React code Splitting.

[lalit-tudip]

I have created my react app using the CRA and I recently added the react code splitting to it. After adding it, my CSS is not working properly.

• So if I have a search component that I have included in code splitting.
• When I navigate to it for the first time it doesn't add the CSS.
• if I go to another component and come back the CSS is working correctly.

Parent.js

const Search = lazy(() => import("./search/search"));
<Suspense fallback={<Shimmer />}>
  <Search />
</Suspense>

Search.js

import "./search.scss";
import "../../../styles.scss";

What can I do, so my CSS will work on the first component mounting?

Note: The CSS was working before adding the code splitting.

[Shubhamsoni9139]

When you encounter issues with CSS not being applied correctly after implementing React code splitting, it often involves the timing of when styles are loaded and applied to the DOM. Here are several strategies to address this problem:

1. Ensure CSS is Loaded in Time

Ensure that your CSS is being loaded before the component is rendered. This can be tricky with code splitting since the component and its CSS might not be fetched and applied in time for the first render.

2. Import CSS in the Main Entry Point

One way to mitigate this issue is to import your global styles in your main index.js or App.js file, rather than within the components themselves. This ensures that the styles are available globally and are loaded when the application starts.

import './styles.scss';

When you encounter issues with CSS not being applied correctly after implementing React code splitting, it often involves the timing of when styles are loaded and applied to the DOM. Here are several strategies to address this problem:

1. Ensure CSS is Loaded in Time

Ensure that your CSS is being loaded before the component is rendered. This can be tricky with code splitting since the component and its CSS might not be fetched and applied in time for the first render.

2. Import CSS in the Main Entry Point

One way to mitigate this issue is to import your global styles in your main index.js or App.js file, rather than within the components themselves. This ensures that the styles are available globally and are loaded when the application starts.

javascript

// index.js or App.js import './styles.scss';

3. CSS-in-JS Solutions

Consider using a CSS-in-JS solution like styled-components or emotion. These libraries handle the loading of styles in a way that ensures they are available when components are rendered.

4. Check for CSS Order Issues

CSS loading order might be affecting the application of styles. Ensure that the CSS is loaded in the correct order, especially if you have dependencies between styles.

5. Fallback Component Styling

In the Suspense fallback, ensure that some minimal styles are applied so the user doesn't see a flash of unstyled content (FOUC).

6. Use React.StrictMode

If you are not already using React.StrictMode, wrap your application in it. This can help catch potential issues in your code.