PanResponder not working correctly with Webpack 5 Module Federation

[heineiuo]

The problem

PanResponder not working correctly with Webpack 5 Module Federation

How to reproduce

Simplified test case: https://stackblitz.com/edit/github-l3cwda?file=app1%2Fsrc%2FApp.js

Steps to reproduce:

1. Copy & paste ReactNative official website example code
2. Copy & paste Webpack Module Federation official example code
3. Drag box in app1, move correctly
4. Drag box in app2, move incorrectly

Expected behavior

Drag box in app2 should move correctly

Environment (include versions). Did this work in previous versions?

• React Native for Web (version): 0.17.7
• React (version): 17.0.2
• Browser: Chrome 100.0.4896.75 (Official Build) (arm64)

Screen.Recording.2022-04-09.at.20.05.38.mov

Additional:

• Add react-native to ModuleFederationPlugin shared field: not working
• Add react-native-web to ModuleFederationPlugin shared field: not working

[necolas]

What is Webpack Module Federation and why does it need weird code changes to work?

[heineiuo]

@necolas Module Federation can help multiple separate builds share dependencies with each other. https://webpack.js.org/concepts/module-federation/

I found a solution to solve this issue is add both react-native and react-native-web to ModuleFederationPlugin shared field, and set singleton to true. https://stackblitz.com/edit/github-l3cwda-lqkjpy?file=app2%2Fwebpack.config.js

You are right, it doesn't need weird code changes.