rnx-kit: Aliases not working

What happened?

In my react project I use aliases to import from src e.g.

import { Section } from './src/Section';
// versus
import { Section } from '@demo/Section';

This doesn’t seem to be supported by rnx-start, I get the following error

Reloading app...
App.tsx:29:31 - error TS2307: Cannot find module '@demo/Section' or its corresponding type declarations.

29 import {Section, styles} from '@demo/Section';
                                 ~~~~~~~~~~~~~~~

I’m guessing I probably need a slight config change but haven’t been able to work it out.

I’m happy to provide a PR for documentation if someone can point me in the right direction.

Affected Package

@rnx-kit/cli

Version

0.14.8

Which platforms are you seeing this issue on?

Android
iOS
macOS
Windows

System Information

info Fetching system and libraries information...
System:
    OS: Linux 5.15 Ubuntu 20.04.5 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Memory: 10.86 GB / 30.99 GB
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
    Yarn: 1.22.18 - ~/.nvm/versions/node/v16.15.0/bin/yarn
    npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm
    Watchman: 4.9.0 - /usr/bin/watchman
  SDKs:
    Android SDK:
      API Levels: 30, 31, 32, 33
      Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.2, 30.0.3, 31.0.0, 31.0.0, 32.1.0, 33.0.0, 33.0.0
      System Images: android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom, android-31 | Google APIs Intel x86 Atom_64, android-33 | Google APIs Intel x86 Atom_64
      Android NDK: Not Found
  IDEs:
    Android Studio: AI-213.7172.25.2113.9014738
  Languages:
    Java: 11.0.16 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.1.0 => 18.1.0 
    react-native: 0.70.1 => 0.70.1 
  npmGlobalPackages:
    *react-native*: Not Found

Steps to Reproduce

I’ve provided a demo repo at https://github.com/johnf/rnk-kit-aliases-demo

Simply yarn start

Code of Conduct

I agree to follow this project’s Code of Conduct

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 30 (18 by maintainers)

Most upvoted comments

I’ve tested this again in the released version and it works perfectly. I was able to clear up a bunch of TS errors. Thanks @afoxman and @tido64!

johnf on Jan 11, 2023

The rnx-kit CLI (and typescript-react-native-resolver) doesn’t support TypeScript’s path remapping system – e.g. baseUrl and paths. ☹️

Unfortunately, that code is really complicated, so replicating it will be hard to do and get right. TS doesn’t offer an API-level call that lets you “remap” a path either.

The good news is that with TypeScript 4.7, rnx-kit doesn’t need to overwrite the resolver with its own. TS natively supports RN platform-specific resolution (moduleSuffixes).

I think the path forward here is to update rnx-kit with two changes:

When running against TS < 4.7, fail when baseUrl or paths is set in any tsconfig. Explain the issue and a path forward by upgrading to TS 4.7. This will save users time and energy debugging. See issue #1944.
When running against TS >= 4.7, don’t intercept and replace the resolver. Instead, program it using moduleSuffixes. You’ll get the full TS resolver, including path-remapping support. See issue #1945.

I’ll open two bugs and link them together AND to this issue.

afoxman on Oct 19, 2022