unable to resolve absolute paths with Expo and TypeScript

I am trying to be able to use absolute paths inside my Expo app, with more sad than success.

this is my package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "~36.0.0",
    "expo-google-app-auth": "^8.0.1",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
    "react-native-screens": "2.0.0-alpha.12",
    "react-native-web": "~0.11.7"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@types/react": "~16.9.0",
    "@types/react-native": "~0.60.23",
    "@typescript-eslint/eslint-plugin": "^2.23.0",
    "@typescript-eslint/parser": "^2.23.0",
    "babel-preset-expo": "~8.0.0",
    "eslint": "^6.8.0",
    "eslint-plugin-react": "^7.19.0",
    "eslint-plugin-react-native": "^3.8.1",
    "typescript": "~3.6.3"
  },
  "private": true
}

my tsconfig.json
{
“compilerOptions”: {
“allowSyntheticDefaultImports”: true,
“jsx”: “react-native”,
“lib”: [“dom”, “esnext”],
“moduleResolution”: “node”,
“noEmit”: true,
“skipLibCheck”: true,
“resolveJsonModule”: true,
“baseUrl”: “./src”,
“paths”: {
“src/“: [””]
}
},
“include”: [“./”]
}

and my babel.config.js

module.exports = function(api) {
  api.cache(true)
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'module-resolver',
        {
          root: ['./src'],
          extensions: ['.js', '.jsx', '.es', '.es6', '.mjs', '.ts', '.tsx'],
          alias: {
            contexts: './contexts',
            data: './data',
          },
        },
      ],
    ],
  }
}

And one module located in src/contexts is trying to access data/auth/types bu the bundler says is is unable.

import React from 'react'

import { GoogleAuthContext } from './GoogleAuthProvider'
import { AuthStatus } from 'data/auth/types'
...

What am I doing wrong? Is the typescript configuration affecting somehow the way the app is bundled. To be honest I am quite confused about the boundaries between babel and TS. Is there any place in the Expo documentation where this is explained?

I’ve found a couple of post about the same issue, but didn’t help

It is not a superbig deal, I can go back to relative paths, but at least I want to know why it is failing and therefore understand a bit more the bundling process.

Any help will be appreciated.

Ivan

1 Like

All you have to do is add the baseUrl field to tsconfig.json, define aliases in babel.config.js and run expo start -c :relaxed:

Example application structure:

my-app
my-app/App.tsx
my-app/src/screens/...

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src",
    (...)
  }
}

babel.config.js

plugins: [
  [
    'module-resolver',
    {
      alias: {
        screens: './src/screens'
(...)
5 Likes

ei! thanks @bakal!!

but, do you know what? in order to have the changes applied I’ve had to completely restart the machine, otherwise the expo somehow is keeping the old configuration, even with the -c

another small thing, could you point me to some documentation where I can learn how the whole system works?

basically my doubt is:
-does the bundler need the tsconfig? as far I understand the React Native packager is in charge of the compilation.

Anyway, thanks for you help

Ivan

2 Likes

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