Styles don't apply when using React.lazy

Question

The problem is that when I start using React.lazy, input styles are not rendering correctly. With lazy I get default Antd input styles, not mine. What's the problem and how I can fix it? You can see my code and its results in the pictures below. Thanks!

This picture shows styles that this component should render

This picture shows what styles are applied when using lazy

Code with lazy

import { lazy, Suspense } from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import { useAppSelector } from '../../../hooks/redux-hooks';
import { selectCurrentUser } from '../../../store/slices/user/userSelectors';
import { Spinner } from '../../common/Spinner/Spinner';

const HomePage = lazy(() => import('../../../pages/HomePage'));
const ShopPage = lazy(() => import('../../../pages/ShopPage'));
const CheckoutPage = lazy(() => import('../../../pages/CheckoutPage'));
const AuthPage = lazy(() => import('../../../pages/AuthPage'));

export const AppRoutes = () => {
  const currentUser = useAppSelector(selectCurrentUser);

  return (
    <Suspense fallback={<Spinner />}>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="shop/*" element={<ShopPage />} />
        <Route path="checkout" element={<CheckoutPage />} />
        <Route
          path="auth"
          element={currentUser ? <Navigate to="/" /> : <AuthPage />}
        />
      </Routes>
    </Suspense>
  );
};

Code without lazy

import { Routes, Route, Navigate } from 'react-router-dom';
import { useAppSelector } from '../../../hooks/redux-hooks';
import { selectCurrentUser } from '../../../store/slices/user/userSelectors';
import HomePage from '../../../pages/HomePage';
import ShopPage from '../../../pages/ShopPage';
import AuthPage from '../../../pages/AuthPage';
import CheckoutPage from '../../../pages/CheckoutPage';

export const AppRoutes = () => {
  const currentUser = useAppSelector(selectCurrentUser);

  return (
    <Routes>
      <Route path="/" element={<HomePage />} />
      <Route path="shop/*" element={<ShopPage />} />
      <Route path="checkout" element={<CheckoutPage />} />
      <Route
        path="auth"
        element={currentUser ? <Navigate to="/" /> : <AuthPage />}
      />
    </Routes>
  );
};

Answer 1

I had the same issue. The possible reason is you are importing the antd css file in a component that is also being lazy loaded and it is not loaded yet. Example You have 5 components in your App.js, and you import the antd css file in Component3 which is a lazy loaded compoent. When you open your app and Component3 is not imported yet, then your other components will not have access to antd css file.

Bottomline is, You can resolve this issue by importing antd css file in a root component that is not lazy loaded, maybe in App.js.

import 'antd/dist/antd.css';

Answer 2

Not all components needs to be loaded lazily. I had same issue across 20 different components where MUI Textfield was not displaying properly. I had to refresh every time to show it nicely.

What I did, I changed one of my components (containing MUI Textfield) from loading lazily back to static import. That way It does have all the necessary styles loaded at the first place and included in bundle.js file. Make sure to empty cache and hard reload the web page. Now, all my forms are shown as expected and in nicer way.