Why lazy loading doesn't work in my react project?

Question

I have a project: link.

The project has router and lazy-components for every page.

Short example router-component:


export const RoutersComponent = () => {
  return (
    <HashRouter basename={'/'}>
      <Routes>
        <Route
          path="/"
          element={<Navigate replace to={routerConfig.log.url} />}
        />
        <Route
          path={routerConfig.reg.url}
          element={<LazyRegistrationPage />}
        />
        <Route
          path={routerConfig.log.url}
          element={<LazyLogginPage />}
        />
      </Routes>
    </HashRouter>
  )
}

Full component router on link.

Short example lazy-component:

Folder src/pages/registration

File index.js

export * from './registration'
export * from './lazy'

File lazy.js

import { Suspense, lazy } from 'react'
import { Loading } from '../../components'

const Registration = lazy(() =>
  import('./registration').then((module) => ({
    default: module.Registration
  }))
)

export const LazyRegistrationPage = () => {
  return (
    <Suspense fallback={"Loading..."}>
      <Registration />
    </Suspense>
  )
}

Short file registration.js:

export const Registration = () => {
  return (
    <section className="log">
      Registration
    </section>
  )
}

Full component registration on link

I use library:

"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-router-dom": "^6.3.0",

If i start command:

npm run build

then i will get one file ***.js

But why???

In my short project everything is working:

import { Suspense, lazy } from "react";
import "./App.css";

const A = lazy(() =>
  import("./A").then((module) => ({
    default: module.A,
  }))
);

const LazyA = () => {
  return (
    <Suspense fallback={"loading..."}>
      <A />
    </Suspense>
  );
};

const B = lazy(() => import("./B"));

const LazyB = () => {
  return (
    <Suspense fallback={"loading..."}>
      <B />
    </Suspense>
  );
};

function App() {
  return (
    <>
      <div className="App">hello</div>
      <LazyA />
      <LazyB />
    </>
  );
}

export default App;

After build I have 4 file ***.js.

I don't understand.

The way you are trying to code-split/lazy-load seems a little unconventional. Even more so with the routing code. Check the official example to see if you can get something that aligns more with the established pattern. — Drew Reese
– Drew Reese, Commented Apr 21, 2023 at 7:37

Roma N · Accepted Answer · 2023-05-24 20:23:45Z

As is often the case, when you ask something that no one wants to understand, you find the answer yourself.

If you make a checkout for this commit "7089bce" in the project in the "main" branch, then you can find the file "index.js" on this path "src/pages/index.js". If shorter:

git clone https://github.com/tyt34/postcomm.git
git checkout 7089bce
vim src/pages/index.js

The contents of which:

// file on path: src/pages/index.js
export * from './all-posts-page'
export * from './all-users-page'
export * from './loggin'
export * from './post-page'
export * from './profile-page'
export * from './registration'

Due to such an import architecture, there was a problem with the lazy loading.

That is, it does not matter that in the end such a page component as:

export const Registration = () => <div>Example</div>

Used in lazy loading as a module, for example:

const Registration = lazy(() =>
  import('./registration').then((module) => ({
    default: module.Registration
  }))
)

export const LazyRegistrationPage = () => {
  return (
    <Suspense fallback={<Loading />}>
      <Registration />
    </Suspense>
  )
}

The "index.js" file that was shown above crossed out everything.

Collectives™ on Stack Overflow

Why lazy loading doesn't work in my react project?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related