tamagui: Error when running yarn ios using starters

Current Behavior

using npm create tamagui@latest --template expo-router and follow the steps to create a project, then run yarn ios to start development via expo go or expo-dev-client, the same error is encountered in both ways

 ERROR  ReferenceError: Property 'document' doesn't exist, js engine: hermes
    at ContextNavigator (http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=com.anonymous.expo-router-example&transform.routerRoot=app&transform.engine=hermes:148411:24)
    at ExpoRoot (http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=com.anonymous.expo-router-example&transform.routerRoot=app&transform.engine=hermes:148367:28)
    at App
    at ErrorToastContainer (http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=com.anonymous.expo-router-example&transform.routerRoot=app&transform.engine=hermes:341210:24)
    at ErrorOverlay
    at withDevTools(ErrorOverlay) (http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=com.anonymous.expo-router-example&transform.routerRoot=app&transform.engine=hermes:340744:27)
    at RCTView
    at View (http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=com.anonymous.expo-router-example&transform.routerRoot=app&transform.engine=hermes:40740:43)
    at RCTView
    at View (http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=com.anonymous.expo-router-example&transform.routerRoot=app&transform.engine=hermes:40740:43)
    at AppContainer (http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=com.anonymous.expo-router-example&transform.routerRoot=app&transform.engine=hermes:40551:36)
    at main(RootComponent) (http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=com.anonymous.expo-router-example&transform.routerRoot=app&transform.engine=hermes:124413:28)

and then a same error is repeated continuously

λ Bundled 6992ms (node_modules/expo-router/node/render.js)
Web Bundled 7092ms (node_modules/expo-router/entry.js)
λ  WARN  props.pointerEvents is deprecated. Use style.pointerEvents
λ  WARN  "shadow*" style props are deprecated. Use "boxShadow".
 styleq (node_modules/styleq/dist/styleq.js:62:39)
λ  WARN  accessibilityRole is deprecated. Use role.
λ  WARN  accessibilityLabel is deprecated. Use aria-label.
λ  WARN  Image: style.resizeMode is deprecated. Please use props.resizeMode.
λ  WARN  Image: style.tintColor is deprecated. Please use props.tintColor.
ERROR  There was a problem connecting to the react-native-css-interop Metro server
image

Expected Behavior

start the project on expo go or expo-dev-client without error

Tamagui Version

1.89.26

Platform (Web, iOS, Android)

iOS

Reproduction

Expo go steps:
1. run `npm create tamagui@latest --template expo-router`
2. select `Expo Router (beta) - Expo Router starter with Tamagui set up`
3. `cd` into the project and run `yarn ios`
4. press `i` to expo-go app in iOS simulator

Dev build step
1. run `npm create tamagui@latest --template expo-router`
2. select `Expo Router (beta) - Expo Router starter with Tamagui set up`
3. run `npx expo run:ios` to create a dev build
4. upon build succeeded, press `i` to launch dev build in iOS simulator

System Info

System:
    OS: macOS 14.2.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 4.32 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.1.0 - ~/.nvm/versions/node/v21.1.0/bin/node
    Yarn: 4.0.2 - ~/.nvm/versions/node/v21.1.0/bin/yarn
    npm: 10.2.0 - ~/.nvm/versions/node/v21.1.0/bin/npm
    pnpm: 8.14.1 - /opt/homebrew/bin/pnpm
    bun: 1.0.26 - ~/.bun/bin/bun
    Watchman: 2023.12.04.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 119.1.60.118
    Chrome: 121.0.6167.184
    Safari: 17.2.1
  npmPackages:
    @babel/core: ^7.23.3 => 7.23.9
    @expo/metro-runtime: ~3.1.3 => 3.1.3
    @react-navigation/native: ^6.0.2 => 6.1.10
    @tamagui/config: ^1.89.26 => 1.89.26
    @tamagui/metro-plugin: ^1.89.26 => 1.89.26
    @types/react: ~18.2.14 => 18.2.55
    babel-preset-expo: ^10.0.1 => 10.0.1
    expo: ~50.0.6 => 50.0.6
    expo-font: ~11.10.2 => 11.10.2
    expo-linking: ~6.2.1 => 6.2.2
    expo-router: ~3.4.7 => 3.4.7
    expo-splash-screen: ~0.26.4 => 0.26.4
    expo-status-bar: ~1.11.1 => 1.11.1
    expo-system-ui: ~2.9.3 => 2.9.3
    expo-web-browser: ~12.8.2 => 12.8.2
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    react-helmet-async: ~2.0.4 => 2.0.4
    react-native: 0.73.4 => 0.73.4
    react-native-reanimated: ~3.6.2 => 3.6.2
    react-native-safe-area-context: 4.8.2 => 4.8.2
    react-native-screens: ~3.29.0 => 3.29.0
    react-native-web: ^0.19.9 => 0.19.10
    tamagui: ^1.89.26 => 1.89.26
    typescript: ^5.3.3 => 5.3.3

About this issue

  • Original URL
  • State: open
  • Created 4 months ago
  • Reactions: 11
  • Comments: 25 (11 by maintainers)

Most upvoted comments

I’ll check that over weekend

+7
TheEhsanSarshar on Feb 22, 2024

Same here image

+6
youssdevx on Feb 20, 2024

There is a fix for windows users on master branch, and will be available with next release

+2
TheEhsanSarshar on Apr 22, 2024

@ddikodroid +1 on removing the css imports.

this issue should be re-opened.

error i got before removing:

iOS Bundling failed 9500ms (node_modules/expo-router/entry.js)
Unable to resolve "react-native-reanimated" from "node_modules/react-native-css-interop/dist/runtime/native/utils.js"
+2
kiprasmel on Apr 2, 2024

I’m getting the error if I add import '@tamagui/core/reset.css'; or import '../tamagui-web.css'; into app/_layout.tsx

If I delete that, the error is gone.

+2
ddikodroid on Apr 2, 2024

Got the same problem when running the project on macos with version 1.90.14. The same result after updating to the newest version 1.91.3. - Any workarounds? On Windows it works with 1.90.14 - with 1.91.3 haven’t tested yet.

I created the project using command from tamagui official website npm create tamagui@latest --template expo-router

+2
Jankaz2 on Mar 5, 2024

if you want to add Tamagui to an existing project make sure to follow Tamagui expo router starter and apply same changes! as this tamagui starter is working fine, I’ll close this issue as done

+2
TheEhsanSarshar on Feb 28, 2024

@TheEhsanSarshar Yes. I’ve tested this in every which way I could think of: on native, on web, on iOS and Android, using yarn and npm. Still the same error. I’m a bit surprised that not more people are getting this. I’ve used nothing but the official template and the exact instructions from the docs. Are you able to reproduce it? .

I got the same problem, with template created 2 days ago My workaround was to dynamically import the css in app/_layout.tsx:

import { Platform } from "react-native";

if (Platform.OS === "web") {
  import("../tamagui-web.css");
}

And the application seems to work fine in android. At least the error doesn’t show. But I don’t know how this impact in tamagui correct functionality.

+2
giornn0 on Feb 27, 2024

@TheEhsanSarshar I created a new Expo project with npx create-expo-app --template (File based router), then followed the instructions on https://tamagui.dev/docs/guides/expo to add Tamagui to the project, and I’m getting the same endless stream of There was a problem connecting to the react-native-css-interop Metro server in the console.

Here’s my example project: https://github.com/kasparas-ban/tamagui-test

+2
kasparas-ban on Feb 26, 2024

Upgrading to 1.90.6 resolved my issue

this error still keeps repeating in the terminal: ERROR There was a problem connecting to the react-native-css-interop Metro server

+2
tkhg on Feb 22, 2024

although I wasn’t able to reproduce it with Tamagui official starter, yeah I’ll check it again, maybe something is broken since then

+1
TheEhsanSarshar on Mar 23, 2024
Read more comments on GitHub
← tamagui: Default font family not being passed down to Text component on Web
tamagui: Expo eas build fails Unable to resolve module @tamagui/use-did-finish-ssr →