create-react-app with TypeScript absolute imports

[jamezening]

Hi,

Am having trouble with absolute imports. Any tips would be appreciated!

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "./",
    "paths": {
      "@feature/*": ["src/feature/*"]
    }
  },
  "include": ["src/**/*"]
}

project structure

src
  |-- feature
      |-- reservations
          |-- ViewReservations
              |-- ReservationListContainer.tsx
tsconfig.json

but when I try
import ReservationListContainer from "@feature/reservations/ViewReservations/ReservationListContainer";
I am getting this error:

Module not found: Error: Can't resolve '@feature/reservations/ViewReservations/ReservationListContainer' in '/Users/vanilla.james/projects/...'

Thank you for any help!

[jamezening]

Figured out that compilerOptions > paths cannot be set in create-react-app unless the configuration is overridden using craco etc.

The current version of react-scripts in the project I am working on prevent installation and I am not able to update the scripts due to project requirements...

npm ERR! Could not resolve dependency:
npm ERR! peer react-scripts@"^4.0.0" from @craco/[email protected]

[7anshuai]

On startup, react-scripts (and later, craco) cleans up tsconfig.json to only keep the configuration that it expects to be there for it to work properly. paths property is one of those that it removes when it starts up.

creating tsconfig.paths.json and extending it in tsconfig.json will help us work around that issue.

Try this link https://plusreturn.com/blog/how-to-configure-a-path-alias-in-a-react-typescript-app-for-cleaner-imports/, it works for me.

[lgenzelis]

It'd be great to have a way to make this work without using craco 😞

[7anshuai]

CRA support importing modules using absolute paths(without path alias).
https://create-react-app.dev/docs/importing-a-component#absolute-imports

[lgenzelis]

Thanks @7anshuai ! :) Yep, I meant having a way to use path alias.