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

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'
(...)
1 Like

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

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