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]

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?

[makivlach]

pls, could you unmark this as solved. This issue has not in reality been solved yet. I think we could continue in the discussions as I am also working on this issue.

[jbroma]

@makivlach please open a bug report and we can move the discussion there if this is still an issue 👍

[makivlach]

Here is a solution #1242 ☺️