Babel is not running to compile and transform NativeWind styles only for Production Builds. Works fine for all other build types

[alexwolf22]

Build/Submit details page URL

https://expo.dev/accounts/awolfscratchodds/projects/scratch-odds/builds/46477e87-5f0c-4dc8-a3ef-4b4dcefd14c5

Summary

So I have been stuck on this bug all week.

I posted the same github issue in nativewind as well.

Essentially I coded an app locally on my computer using the IOS/Android simulator, and I'm getting ready to publish to the app stores.

I have been using expo development builds and running them on IOS and Android simulators.

I use Nativewind for styling my React components, which is configured in expo a few steps as described here.

I am finally testing my my app on a real Android and IOS devices, using an EAS internal distribution build. However when I open the app, after the splash screen, non of the NativeWind styles applied using className's are converted to react native style sheets, which should from my understanding happen during the babel/EAS build process.

This ONLY happens when running my app on a physical device. I don't get the issue when running the app with npx expo run:ios --no-build-cache or with an EAS development build and the expo dev client running on a simulator.

I think there may be an issue during the internal EAS build process in which it is not running babel/compiling and transforming all the className values to react Native StyleSheets, so the bundled JS installed on physcial android/IOS devices don't have the correct style.

Nativewind/tailwind css requires to specify the content glob pattern path to the files which contain those className styles and need to be transpiled.

Are there any differences between the file path on a internal/production EAS build vs a development one?

When I add this to the babel.config.js as described in the Nativewind set up, when would that nativewind babel plugin actually run for EAS internal distribution builds? Is this something I can see in the build logs?

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

if there is anything you may know to point me to the right direction of a solution it would be very much appreciated.

I am very stuck on this don't know what else I can do to resolve the problem besides getting community support.

Managed or bare?

managed

Environment

❯ npx expo-env-info

expo-env-info 1.2.0 environment info:
System:
OS: macOS 14.4
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
Yarn: 1.22.22 - ~/.nvm/versions/node/v20.11.0/bin/yarn
npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
Watchman: HEAD-bdf2469 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.15.2 - /Users/alexwolf/.rbenv/shims/pod
SDKs:
iOS SDK:
Platforms: DriverKit 23.2, iOS 17.2, macOS 14.2, tvOS 17.2, visionOS 1.0, watchOS 10.2
IDEs:
Android Studio: 2023.1 AI-231.9392.1.2311.11255304
Xcode: 15.2/15C500b - /usr/bin/xcodebuild
npmPackages:
expo: ~51.0.14 => 51.0.14
react: 18.2.0 => 18.2.0
react-native: 0.74.2 => 0.74.2
npmGlobalPackages:
eas-cli: 9.1.0
Expo Workflow: managed

----------------------------------------------------------------

❯ npx expo-doctor

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

Error output

There isn't one =/.

I checked the build logs for the Internal distribution, sentry, and the x-code logs and I don't see any error at all; None for Nativewind, Babel. or anything else which is why I'm so stuck here.

Reproducible demo or steps to reproduce from a blank project

working on making a reproducible example from a blank project now.

[alexwolf22]

I think the issue may have to do with some package version difference between an internal distribution build versus when running a development EAS build.

When running a EAS development build with expo dev client does it use the node_modules in your project dir on your local machine or is it a part of the build?

What about runing an the app on a simulator with npx expo run:ios --no-build-cache? Does that use node_modules or is the javascript bundled into the code? The styles applied by Nativewind are working when running the app that way as well.

[alexwolf22]

Okay I figured out the issue!!!!! =)

I had for someone reason tailwind.config.js in my .gitignore file which expo uses for it's .expo ignore; I think the auto .gitignore lib I used added it there =/

So during the build process it wasn't on the expo server, and babel wasn't running for nativewind.