Repack v5 : Nativewind transformed styles of host get overridden by those of mini-apps (Module Federation \ Super-app)

[sahajarora1286]

Hello,

I have been trying to get Repack v5 and Nativewind going in my React Native Super App.

While I can successfully get Nativewind to work for the host, it doesn't seem to work well in the super-app / micro-apps setup.

When I start the app and load a host screen, the Nativewind styling is applied properly to the elements. However, when I visit a mini (/remote) app screen, the Nativewind styles get applied to that but with a warning thrown:

"Warning: Cannot update a component (CssInterop.Text) while rendering a different component (CssInterop.Text). To locate the bad setState() call inside CssInterop.Text, follow the stack trace as described in https://reactjs.org/link/setstate-in-render".

Now if I go back to the host screen, the Nativewind styles are no longer applied.

On debugging, I found that the @callstack/repack-plugin-nativewind plugin that is used in my webpack config for all mini-apps (including host) uses a loader function to transform the nativewind/tailwind global css file. This loader transforms CSS to React Native Runtime (js) and then injects the transformed CSS -> JS into the global styling file so that the app can import it at runtime:

/node_modules/@callstack/repack-plugin-nativewind/dist/loader.js
//

const dedent_1 = __importDefault(require("dedent"));
const css_to_rn_1 = require("react-native-css-interop/css-to-rn");
const utils_js_1 = require("./utils.js");
exports.raw = false;
function nativeWindLoader(source) {
    this.cacheable();
    const callback = this.async();
    try {
        const jsCss = (0, css_to_rn_1.cssToReactNativeRuntime)(source);
        const code = (0, dedent_1.default) `
      import { StyleSheet } from "nativewind";
      StyleSheet.registerCompiled((${(0, utils_js_1.stringify)(jsCss)}));
    `;
        callback(null, code);
    }
    catch (error) {
        console.log(`Failed to convert ${this.resourcePath} to JS`, error);
        callback(error);
    }
}

The problem is that when the mini-app loads, it calls StyleSheet.registerCompiled again in the app's runtime but with transformed CSS for the mini-app. This overrides the styles that were registered by the host app at runtime when it launched.
Hence, now the styles seem to be okay for the mini-app but once I navigate back to a host screen, I see that that host screens / components no longer have the styles applied (because they are no longer registered in the Stylesheet).

Any help with this would be greatly appreciated.

I'm currently using @callstack/[email protected].

Thanks in advance!

[jbroma]

Hi @sahajarora1286,

thank you for a very detailed investigation, you've managed to pinpoint the right cause there 👍

to fix this, in your MF2 plugin configuration you have to add a deep import for react-native-css-interop:

shared: {
	// your other shared dependencies
	// add this entry, make sure for it to have `/` at the end!
	'react-native-css-interop/': {
		singleton: true,
		eager: true, // switch to false in miniapp
		requiredVersion: '*' // or version of CSS interop installed
	}
}

let me know if this helps 👍

[sahajarora1286]

That worked! Beautiful. I had already tried adding react-native-css-interop as a shared plugin in the module-federation config but all I was missing was the / at the end. I was not familiar with the deep-import flexibility there. Sigh. I could have saved 24 hours of a beautiful rainy day 😆 .

Thanks a ton, once again, @jbroma !

[sahajarora1286]

Hi @jbroma , I found out today that while the react-native-css-interop/ addition to shared module federation plugins fixed the original issue of this discussion, it opened another one.

The styles on <View> elements in the host app get applied fine but in my mini-apps they don't get applied. However, styles on <Text> elements do get applied even in the mini-apps.

This is not the case if react-native-css-interop/ is not added to the shared module federation plugins but if it isn't added then it brings back the original issue of this discussion.

Any idea how I could fix this ?

[borisyankov]

@sahajarora1286 when some styles are applied but others seem not to be, this might be caused by a very common error, Tailwindcss-specific.

Have a look at your tailwind.config.js file.
There is a line that looks something like content: ['./app/**/*.{js,jsx,ts,tsx}'],
These are the paths that Tailwind goes through to compile all styles. You need to include your mini-app too.
Be careful not to include everything, like the root of the project, or Tailwind will go through your node_modules too, and while this will work, the speed will be very poor.

I suspect there is no difference between a Text and a View component's styles and it just looks like that. If Tailwind did already find a p-4 class for example, it will be applied to another component even if not included in the content path. It is only the classes that are unique in that non-included path that will not be rendered.

[sahajarora1286]

Thanks for your response, @borisyankov!

My tailwind.config.js file is appropriately configured to include source code from mini-apps. That is also why in a mini-app <Text className="m-4">Hello</Text> works fine. However, <View className="m-4"> ..... </View> doesn't work in a mini-app. It works in the host app though.

If the content property wasn't configured properly to include source files of my mini-app then the styles on <Text> in mini-app wouldn't have worked either.

[jbroma]

hmmm lets investigate this in detail, could you please open an issue and create a minimal reproduction repository?