React typescript - Cannot find module

Question

Folder structure:

src
  - containers
    - Home.tsx

I want to lazy load, so I'm trying:

const Home = React.lazy(() => import('containers/Home'));

VS Code shows 'containers/Home' as incorrect and when hovering over it complains:

Cannot find module 'containers/Home' or its corresponding type declarations.

I have paths set in tsconfig as:

"baseUrl": "./src",
"paths": {
    "modules/*": [
        "src/modules/*"
    ],
    "containers/*": [
        "src/containers/*"
    ]
}

Why does it not find containers/Home when importing using React.lazy()?

Omar Mohamed · Accepted Answer · 2022-05-21 12:48:27Z

1

set paths in tsconfig this way

"baseUrl": "src",
"paths": {
    "@modules/*": [
        "src/modules/*"
    ],
    "@containers/*": [
        "src/containers/*"
    ]
}

and use it like this

const Home = React.lazy(() => import('@containers/Home'));

answered May 21, 2022 at 12:48

Omar Mohamed

10010 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

StudioTime Over a year ago

Thanks, half works. The key is the change in paths. Typescript still cannot find import('@containers/Home') though, but, it can find as I originally had it: import('containers/Home')

Collectives™ on Stack Overflow

React typescript - Cannot find module

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related