Custom config fails with new Error(`createCSSVariable expected string, got: ${nameProp}`); in Expo Router

[kandizzy]

Current Behavior

Run: npm create tamagui@latest --template expo-router Select: Expo Router (beta) - Expo Router starter with Tamagui set up Customize the config with tokens using createTokens in tamagui.config.ts

Expected Behavior

The expected behavior is to run npm start again and be able to use custom token in a custom button component as detailed in the how to make a button write up

Tamagui Version

^1.9.4

Platform (Web, iOS, Android)

Web

Reproduction

https://github.com/kandizzy/tamagui-expo-tokens

System Info

System:
    OS: macOS 14.3
    CPU: (8) arm64 Apple M1
    Memory: 66.22 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v18.19.0/bin/yarn
    npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm
  Browsers:
    Chrome: 123.0.6312.123
    Safari: 17.3
  npmPackages:
    @babel/core: ^7.23.3 => 7.23.7 
    @expo/metro-runtime: ~3.1.3 => 3.1.3 
    @react-navigation/native: ^6.0.2 => 6.1.9 
    @tamagui/config: ^1.94.4 => 1.94.4 
    @tamagui/metro-plugin: ^1.94.4 => 1.94.4 
    @types/react: ~18.2.14 => 18.2.47 
    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.10 => 0.19.10 
    tamagui: ^1.94.4 => 1.94.4 
    typescript: ^5.3.3 => 5.3.3

[byteab]

it could be that some components are relying on some tokens that don't exist in your config so I would recommend using Tamagui tokens alongside your custom ones, or make sure no component is using Tamagui default ones.

specially make sure color tokens are not missing

color: {
    ...tamaguiConfig.color,
   // then your custom colors here
}

[kandizzy]

@TheEhsanSarshar thanks! That was it. I updated the example repo with this and it builds now

export const config = createTamagui({
  ...configBase,
  tokens: {
    ...configBase.tokens,
    size: {
      ...configBase.tokens.size,
      ...tokens.size,
    },
    space: {
      ...configBase.tokens.space,
      ...tokens.space,
    },
    radius: {
      ...configBase.tokens.radius,
      ...tokens.radius,
    },
    color: {
      ...configBase.tokens.color,
      ...tokens.color,
    },
    zIndex: {
      ...configBase.tokens.zIndex,
      ...tokens.zIndex,
    },
  },
});

[byteab]

Awesome!

[Pamavoc]

Hello, having the same here, but only when I install "@tamagui/lucide-icons": "^1.98.0",, what should I do ? Tamagui was working fine without it.

I'm using the base tamagui config with expo 50, my packages :
"dependencies": { "@expo/metro-runtime": "~3.1.3", "@gorhom/bottom-sheet": "^4", "@hookform/resolvers": "^3.3.4", "@mapbox/search-js-react": "^1.0.0-beta.21", "@react-native-async-storage/async-storage": "1.21.0", "@react-native-community/datetimepicker": "7.6.1", "@react-navigation/drawer": "^6.6.15", "@react-navigation/native": "^6.0.2", "@rnmapbox/maps": "^10.1.23", "@shopify/flash-list": "1.6.3", "@supabase/supabase-js": "^2.42.0", "@tamagui/animations-moti": "^1.97.1", "@tamagui/babel-plugin": "^1.97.1", "@tamagui/config": "^1.97.1", "@tamagui/metro-plugin": "^1.97.1", "@tamagui/themes": "^1.97.1", "babel-preset-expo": "^10.0.0", "date-fns": "^3.6.0", "expo": "50", "expo-asset": "~9.0.2", "expo-background-fetch": "~11.8.1", "expo-battery": "~7.7.2", "expo-build-properties": "~0.11.1", "expo-clipboard": "~5.0.1", "expo-constants": "~15.4.6", "expo-contacts": "~12.8.2", "expo-dev-client": "~3.3.11", "expo-device": "~5.9.4", "expo-document-picker": "~11.10.1", "expo-file-system": "~16.0.9", "expo-font": "~11.10.3", "expo-haptics": "~12.8.1", "expo-image": "~1.10.6", "expo-keep-awake": "~12.8.2", "expo-linear-gradient": "~12.7.2", "expo-linking": "~6.2.2", "expo-localization": "~14.8.4", "expo-location": "~16.5.5", "expo-media-library": "~15.9.2", "expo-notifications": "~0.27.7", "expo-router": "~3.4.10", "expo-screen-orientation": "~6.4.1", "expo-sensors": "~12.9.1", "expo-sharing": "~11.10.0", "expo-splash-screen": "~0.26.5", "expo-status-bar": "~1.11.1", "expo-system-ui": "~2.9.4", "expo-updates": "~0.24.12", "expo-web-browser": "~12.8.2", "i18n-js": "^4.4.3", "react": "18.2.0", "react-dom": "18.2.0", "react-helmet-async": "~2.0.4", "react-hook-form": "^7.51.4", "react-native": "0.73.6", "react-native-gesture-handler": "~2.14.0", "react-native-reanimated": "~3.6.2", "react-native-reanimated-carousel": "^3.5.1", "react-native-safe-area-context": "4.8.2", "react-native-screens": "~3.29.0", "react-native-url-polyfill": "^2.0.0", "react-native-web": "^0.19.9", "superjson": "^2.2.1", "tamagui": "^1.97.1", "typescript": "~5.3.3", "zod": "^3.23.8", "zustand": "^4.5.2" }, "devDependencies": { "@babel/core": "^7.23.3", "@types/react": "~18.2.14", "ajv": "^8.12.0", "firebase-tools": "^13.7.2" },

[YauhenIhnatsyeu]

I created a fresh project using npm create tamagui@latest --template and just run it. I have the same issue

[flrp13]

@YauhenIhnatsyeu same here...