expo: [SDK 50]: `compilerOptions.baseUrl` causes tamagui to not work once migrating from SDK 49.

Minimal reproducible example

Repository

Summary

I upgraded our monorepo from SDK 49 to SDK 50 now when it’s out of beta.

I followed the migration steps carefully, but it seems there might be a bug related to anyone utilizing the experimental path aliases feature where you had to set baseUrl for the path aliases to work properly.

With SDK 50 and this feature now being on by default, there seems to be an issue how imports are resolved causing some dependencies to not work. I saw this with tamagui throwing createTamagui is not a function.

Not sure if this is is a bug or known behavior now when this feature is on by default. If so, maybe a mention in the migration guide / Path Alias documentation might be helpful?

Temporary Fix

By removing baseUrl I was able to get the project to run again.

Environment

expo-env-info 1.2.0 environment info:
    System:
      OS: macOS 14.2.1
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
      Yarn: 1.22.21 - /opt/homebrew/bin/yarn
      npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
      Watchman: 2023.12.04.00 - /opt/homebrew/bin/watchman
    Managers:
      CocoaPods: 1.14.3 - /opt/homebrew/bin/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 23.0, iOS 17.0, macOS 14.0, tvOS 17.0, watchOS 10.0
    IDEs:
      Xcode: 15.0.1/15A507 - /usr/bin/xcodebuild
    npmPackages:
      babel-preset-expo: ^10.0.1 => 10.0.1
      expo: ^50.0.2 => 50.0.2
      expo-router: ^3.4.4 => 3.4.4
      react: 18.2.0 => 18.2.0
      react-dom: 18.2.0 => 18.2.0
      react-native: 0.73.2 => 0.73.2
      react-native-web: ~0.19.10 => 0.19.10
    Expo Workflow: bare
    ```

About this issue

  • Original URL
  • State: open
  • Created 5 months ago
  • Reactions: 3
  • Comments: 16 (2 by maintainers)

Most upvoted comments

I’ve found the solution somewhat, this is actually caused by Metro resolving css incorrectly I believe.

The problem is we generate a tamagui.css in the root folder. What happens is the expo metro config with isCSSEnabled true will actually resolve to tamagui.css when you import { View } from 'tamagui' incorrectly.

Likely it needs some logic to prefer a node module over a css file, which seems right. For now change your tamagui.css output to be a different name and it should fix.

Confusing error! Took me a minute to isolate it.

@EvanBacon I can make our metro plugin change the resolution in this specific case, but I think this is probably a Metro footgun that could be fixed upstream.

In SDK 50, the baseUrl property is now more complaint with TypeScript according to the docs https://www.typescriptlang.org/tsconfig#baseUrl originally it was modeled more after a Vite plugin I found / Next.js (both were incorrect and caused mismatched behavior between the bundler and vs code). I imagine tamagui makes similar assumptions.

In SDK 50, the baseUrl must be defined, it no longer defaults to “.”. Also if the paths are matched and do not have a resolution, then baseUrl is skipped. These are the main changes we made in SDK 50 https://github.com/expo/expo/pull/25510

Since this is a core problem, lets hope it will be fixed soon in: https://github.com/expo/expo/issues/26565