1

I'm currently working on a React Native app using Expo, and the project has TypeScript path aliases set up. The aliases seem to work fine; imports resolve correctly, and the app builds as expected. However, VS Code never correctly autocompletes the path aliases when writing import statements.

For example, when I'm typing an import statement, the alias is correctly suggested:

Correct alias is suggested

But when I accept the autocomplete, the alias is replaced with a backslash, and I have to type it out manually:

Alias is not included in autocomplete result

Here's tsconfig.json:

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "baseUrl": ".",
    "paths": {
      "$components": ["App/components/index"],
      "$components/*": ["App/components/*"],
      "$constants": ["App/constants/index"],
      "$constants/*": ["App/constants/*"],
      "$helpers": ["App/helpers/index"],
      "$helpers/*": ["App/helpers/*"],
      "$navigators": ["App/navigators/index"],
      "$navigators/*": ["App/navigators/*"],
      "$screens": ["App/screens/index"],
      "$screens/*": ["App/screens/*"],
      "$services": ["App/services/index"],
      "$services/*": ["App/services/*"],
      "$api/*": ["App/services/api/*"],
      "$state": ["App/state/index"],
      "$state/*": ["App/state/*"],
      "$themes": ["App/themes/index"],
      "$themes/*": ["App/themes/*"],
      "$types": ["App/types/index"],
      "$types/*": ["App/types/*"],
      "$tests/*": ["tests/*"]
    }
  }
}

And the expo/tsconfig.base.json that it extends:

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Expo",

  "compilerOptions": {
    "allowJs": true,
    "esModuleInterop": true,
    "jsx": "react-native",
    "lib": ["DOM", "ESNext"],
    "moduleResolution": "node",
    "noEmit": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "target": "ESNext"
  },

  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
}

Any idea why these autocompletes are failing? It's a relatively minor issue at the end of the day, but frustrating nonetheless.

I've been Googling for solutions but haven't been able to find anyone with a similar issue. I did try making minor changes to tsconfig, like including a slash in baseURL. I also tried modifying VS Code's settings.json to include "typescript.preferences.importModuleSpecifier": "non-relative".

Brandon
  • 385
  • 1
  • 8

0 Answers0