Nativewind not working with Expo in Nx monorepo #29624
Description
Current Behavior
Nativewind not working with Expo in Nx monorepo since more than a month.
After trouble shooting, The issue seems to be metro config related and I have been struggling on this from a month now.
Here is my metro config
const { withNxMetro } = require('@nx/expo');
const { getDefaultConfig } = require('@expo/metro-config');
const { mergeConfig } = require('metro-config');
const exclusionList = require('metro-config/src/defaults/exclusionList');
const { withNativeWind } = require('nativewind/metro');
const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;
/**
* Metro configuration
* https://reactnative.dev/docs/metro
*
* @type {import('metro-config').MetroConfig}
*/
const customConfig = {
cacheVersion: 'Demo',
transformer: {
babelTransformerPath: require.resolve('react-native-svg-transformer'),
},
resolver: {
assetExts: assetExts.filter((ext) => ext !== 'svg'),
sourceExts: [...sourceExts, 'cjs', 'mjs', 'svg'],
blockList: exclusionList([/^(?!.*node_modules).*\/dist\/.*/]),
// unstable_enableSymlinks: true,
// unstable_enablePackageExports: true,
},
};
const nativeWindConfig = withNativeWind(
mergeConfig(defaultConfig, customConfig),
{
input: './global.css',
}
);
module.exports = withNxMetro(nativeWindConfig, {
// Change this to true to see debugging info.
// Useful if you have issues resolving modules
debug: false,
// all the file extensions used for imports other than 'ts', 'tsx', 'js', 'jsx', 'json'
extensions: [],
// Specify folders to watch, in addition to Nx defaults (workspace libraries and node_modules)
watchFolders: [],
});
Expected Behavior
Nativewind should work as expected as It works fine with Regular expo outside Nx monorepo.
GitHub Repo
https://github.com/Shanie1331/Test
Steps to Reproduce
Nx Report
Node : 23.1.0
OS : darwin-arm64
Native Target : aarch64-macos
yarn : 1.22.22
nx (global) : 20.1.3
nx : 20.3.1
@nx/js : 20.3.1
@nx/jest : 20.3.1
@nx/eslint : 20.3.1
@nx/workspace : 20.3.1
@nx/cypress : 20.3.1
@nx/devkit : 20.3.1
@nx/eslint-plugin : 20.3.1
@nx/expo : 20.3.1
@nx/module-federation : 20.3.1
@nx/react : 20.3.1
@nx/web : 20.3.1
@nx/webpack : 20.3.1
typescript : 5.6.3
---------------------------------------
Registered Plugins:
@nx/expo/plugin
@nx/eslint/plugin
@nx/jest/plugin
@nx/cypress/pluginFailure Logs
<img width="379" alt="image" src="https://github.com/user-attachments/assets/848aeec1-e939-4920-85c6-f212ebe7a287" />
(NOBRIDGE) ERROR Warning: Error: Your 'metro.config.js' has overridden the 'config.resolver.resolveRequest' config setting in a non-composable manner. Your styles will not work until this issue is resolved. Note that 'require('metro-config').mergeConfig' is a shallow merge and does not compose existing resolveRequest functions together.
This error is located at:
in App (created by withDevTools(App))
in withDevTools(App)
in RCTView (created by View)
in View (created by CssInterop.View)
in CssInterop.View (created by AppContainer)
in RCTView (created by View)
in View (created by CssInterop.View)
in CssInterop.View (created by AppContainer)
in AppContainer
in main(RootComponent)Package Manager Version
No response
Operating System
- macOS
- Linux
- Windows
- Other (Please specify)
Additional Information
No response