Create react app + React lazy + Absolute Imports

Question

I have set up jsconfig.json as described in cra documentation. [ https://create-react-app.dev/docs/importing-a-component#absolute-imports][1]

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

It is working fine if write directly to the file.

import Test from 'pages/Test'

But when I try to load it lazy, it is creating problem.

const TestPage= React.lazy(() => import('pages/Test'));

Doing this giving error cannot able to find module: pages/Test

But if I write relative path, it is working fine.

const TestPage= React.lazy(() => import('../../pages/Test'));

So, my question is how to import module on dynamically by using absolute path?

Thanks

Answer 1

try to add a "paths" property to "compilerOptions" for pages like this:

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
       "pages": "src/pages"
    }
  },
  "include": ["src"]
}

Answer 2

I think you may Suspense missed wrapper component.

import React, { lazy, Suspense } from 'react';

const TestPage= React.lazy(() => import('pages/Test'));

const renderLoader = () => <p>Loading</p>;

const DetailsComponent = () => (
   <Suspense fallback={renderLoader()}>
      <TestPage />
   </Suspense>
)

https://reactjs.org/docs/code-splitting.html