During Run fastlane, eas build fails for IOS because of global.css - Cannot read properties of undefined (reading 'raw')

[ziadomalik]

Build/Submit details page URL

https://expo.dev/accounts/ziad-lumora/projects/app/builds/f2559c82-28e6-434e-9b3b-80338218b599

Summary

I am trying to build my IOS app on the cloud using eas-cli, I am using Nativewind (Tailwindcss) and have a src/global.css which I am importing in my _layout.tsx.

Here are my files:

babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
  };
};

metro.config.js

const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require("nativewind/metro");

const config = getDefaultConfig(__dirname);

module.exports = withNativeWind(config, { input: "./src/global.css" });

Expected behaviour

Run fastlane passes and all is good.

Actual behaviour

An error during the Bundle\ React\ Native\ code\ and\ images step

Managed or bare?

Managed

Environment

  expo-env-info 1.2.0 environment info:
    System:
      OS: Windows 11 10.0.22631
    Binaries:
      Node: 20.11.0 - C:\Program Files\nodejs\node.EXE
      npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
    npmPackages:
      expo: ~50.0.14 => 50.0.14 
      expo-router: ~3.4.8 => 3.4.8 
      react: 18.2.0 => 18.2.0 
      react-dom: 18.2.0 => 18.2.0 
      react-native: 0.73.6 => 0.73.6 
      react-native-web: ~0.19.6 => 0.19.10 
    Expo Workflow: managed

WARNING: We recommend using PowerShell or Bash via WSL 2 for development with Expo CLI on Windows. You may encounter issues using cmd.exe.

✔ Check Expo config for common issues
✔ Check package.json for common issues
✔ Check native tooling versions
✔ Check dependencies for packages that should not be installed directly
✔ Check for common project setup issues
✔ Check npm/ yarn versions
✔ Check for issues with metro config
✔ Check for legacy global CLI installed locally
✔ Check that native modules do not use incompatible support packages
✔ Check Expo config (app.json/ app.config.js) schema
✔ Check that packages match versions required by installed Expo SDK
✔ Check that native modules use compatible support package versions for installed Expo SDK

Didn't find any issues with the project!

Error output

Executing expo-constants Pods/EXConstants » Copy generated compatibility header
› Compiling Pods/Pods-app » Pods-app-dummy.m
› Packaging Pods/Pods-app » libPods-app.a
› Executing app » [CP] Check Pods Manifest.lock
› Executing app » [Expo] Configure project
› Copying   ios/app/Supporting/Expo.plist ➜ ./Expo.plist
› Compiling app » SplashScreen.storyboard
› Preparing app » Info.plist
› Compiling app » main.m
› Compiling app » app_vers.c
› Compiling app » AppDelegate.mm
› Linking   app » app
⚠️  ld: ignoring duplicate libraries: '-lc++'
› Generating debug app » app.app.dSYM
› Executing app » Bundle React Native code and images

❌  error: src/global.css: Cannot read properties of undefined (reading 'raw')

▸ ** ARCHIVE FAILED **
▸ The following build commands failed:
▸ 	PhaseScriptExecution Bundle\ React\ Native\ code\ and\ images /Users/expo/Library/Developer/Xcode/DerivedData/app-gfczuwoxhhirjpelxqecjxyrawps/Build/Intermediates.noindex/ArchiveIntermediates/app/IntermediateBuildFilesPath/app.build/Release-iphoneos/app.build/Script-00DD1BFF1BD5951E006B06BC.sh (in target 'app' from project 'app')
▸ (1 failure)
** ARCHIVE FAILED **
The following build commands failed:
	PhaseScriptExecution Bundle\ React\ Native\ code\ and\ images /Users/expo/Library/Developer/Xcode/DerivedData/app-gfczuwoxhhirjpelxqecjxyrawps/Build/Intermediates.noindex/ArchiveIntermediates/app/IntermediateBuildFilesPath/app.build/Release-iphoneos/app.build/Script-00DD1BFF1BD5951E006B06BC.sh (in target 'app' from project 'app')
(1 failure)

Reproducible demo or steps to reproduce from a blank project

Follow this project creation guide:

https://www.youtube.com/watch?v=RsFoOlYj-gc&t=218s

have this eas.json

{
  "cli": {
    "version": ">= 7.0.0"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal"
    },
    "production": {
      "env": {
        "NPM_TOKEN": "A6B5091B-1042-4E18-8325-174976E700FA"
      }
    }
  },
  "submit": {
    "production": {}
  }
}

run this command:

eas build -p ios --clear-cache --non-interactive

[szdziedzic]

Does building locally using npx expo run:ios work for you? It can be a good starting point to check it.

[github-actions]

This issue is stale because it has been open for 30 days with no activity. If there is no activity in the next 7 days, the issue will be closed.

[ziadomalik]

Switched to Flutter 👍

[Aycom366]

I'm having this issue as well and I was building for Android.
and It's working locally

I have the same setup as his and I'm on expo SDK 50

@szdziedzic

[kartikguptaofficial]

I am also facing the same issue, did you get any solution for this @ziadomalik ?

@szdziedzic , yes it is working locally with this command npx expo run:android, only the release build is getting this issue.

[OliverGalusinski]

same here as @kartikguptaofficial

[kartikguptaofficial]

Hi, for me I got the solution by upgrading the version of nativewind from v4.0.33 to v4.0.36. This depends on the version of tailwindcss you are using, in my case I was using the latest tailwindcss version i.e. v3.4.10, so in order to use the nativewind, we also require the latest version for nativewind i.e. v4.0.36.
Earlier, I was using tailwindcss with v3.4.6, so nativewind v4.0.33 was working fine, but now upgrading the packages fixed my issue.
@OliverGalusinski