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

CRA uses webpack, and looking at the [webpack module resolution docs](https://webpack.js.org/concepts/module-resolution/#module-paths) I'm guessing the algorithm doesn't work for dynamic imports? — Jared Smith, Dec 29 '20 at 11:55

score 1 · Answer 1 · answered Dec 29 '20 at 11:50

1

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

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

answered Dec 29 '20 at 11:50

Taghi Khavari

6,272
3
15
32

score -2 · Answer 2 · answered Dec 29 '20 at 11:42

-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

answered Dec 29 '20 at 11:42

Vigneshwaran Chandrasekaran

2,967
1
24
19

What does this have to do with the question? – Jared Smith Dec 29 '20 at 11:45
@JaredSmith Reference for how to use Suspense Wrapper component – Vigneshwaran Chandrasekaran Dec 29 '20 at 11:47
No, what does the Suspense wrapper component have to do with *module path resolution*? – Jared Smith Dec 29 '20 at 11:49
Without using Suspense if you try to import lazy load component means react will show error, to avoid that use Suspense, This will wait till the dynamic import component to load. – Vigneshwaran Chandrasekaran Dec 29 '20 at 11:51
I give up on trying to explain it to you. The problem is that module path resolution is failing it has nothing to do with Suspense or lack thereof: *the OPs code works fine with a relative path*. This is an issue with webpack, or CRA's webpack config. – Jared Smith Dec 29 '20 at 11:53

Create react app + React lazy + Absolute Imports

2 Answers2