How to get absolute imports with typescript

Expo SDK
1

Using managed workflow. My folder structure doesn’t have a src folder so its like this:

  • .expo
  • constants/
  • tsconfig.json
  • babel.config.js

Inside my bable.config.js:

  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'module-resolver',
        {
          alias: {
            constants: './constants',
           }
        }
      ]
    ]
  };
};

Inside tsconfig.json:

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react-native",
    "lib": [
      "es2017"
    ],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": false,
    "target": "esnext"
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ],
  "extends": "expo/tsconfig.base",
  "baseUrl": "./",
  "paths": {
    "constants/*": [
      "./constants/*"
    ]
  }
}

Inside my file I import

import { screenNames } from "constants/screenNames"

but if I hover over it in Visual Code it says:

"Cannot find module “constants/screenNames” or one of its paths

The app seems to run fine so the issue is with the tsconfig

2

Seems like if I set my tsconfig.json as follows it works:

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "baseUrl": "./",
    "paths": {
      "constants/*": [
        "./constants/*"
      ]
    }
  }
}
3

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.