Fails to fine tune compilation react-native-paper, remotion & react-native-web

[RohovDmytro]

Current behaviour

react-natie-web & remotion setup fails to compile web version.

Expected behaviour

Compiling nicely.

How to reproduce?

1. Clone https://github.com/RohovDmytro/love-death-react
2. npm run build

Preview

No screenshots.

What have you tried so far?

I've followed the react-native-paper web guide and different variations of loaders, but still no success.

It does not work both with expo or without.

What I find strange is I do make a swap of react-native & react-native-web, but the error still persists with react-native files.

My 'uneducated guess' is react-native-paper somehow manages to load react-native files dynamically and they do not get swapped during compilation process. Not sure though.

3000
ERROR in ./node_modules/react-native/Libraries/Utilities/codegenNativeComponent.js 14:12
Module parse failed: Unexpected token (14:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| import requireNativeComponent from '../../Libraries/ReactNative/requireNativeComponent';
> import type {HostComponent} from '../../Libraries/Renderer/shims/ReactNativeTypes';
| import UIManager from '../ReactNative/UIManager';

Your Environment

software	version
ios	x
android	x
react-native	0.70.5
react-native-paper	5.0.0
node	16.16.0
npm or yarn	x.x.x
expo sdk	x.x.x

[RohovDmytro]

Okay. Don't ask me how, don't ask me when, don't make any blood tests, but what I've figured out is that it is somehow connected to the react-native-safe-area-context module. AFIACT, it does not get replaced during aliasing.

Adding a manual alias "react-native-safe-area-context": "react-native" throws a bunch of errors but makes my scripts run first time in 3 days.

Tea time.

A note, that helped me:

[lukewalczak]

Hey @RohovDmytro, would you like to update the docs and add a note about your finding? 🙏🏽

[RohovDmytro]

I'm quite sure @lukewalczak it's a too dirty solution. It produces a bunch of warnings and my first hacky attempt to make things work.

My best guess is react-native-paper should change a way it uses SafeAreaView in case of a build for web. I've never read about a special attention devoted to safe area in context of react-native-web build, so I'm not sure it's a root cause.

[lukewalczak]

My best guess is react-native-paper should change a way it uses SafeAreaView in case of a build for web. I've never read about a special attention devoted to safe area in context of react-native-web build, so I'm not sure it's a root cause.

If you will have some more findings related to that topic, please collect them in that issue. Currently, I'm busy with other things, so I won't be able to dive into that area, but the issue will remain open.

[RohovDmytro]

Root issue found.

So the webpack config must also contain the web.js item AND it should be on top of the list:

extensions: [
        '.web.js',
        ...(other || []),
      ]

It is important to have web.js on top of the array so the libraries (suck as react-native-paper) will prioritize loading web.js files.

Totally worthy adding this to the web support section:
https://callstack.github.io/react-native-paper/using-on-the-web.html

[lukewalczak]

Hey @RohovDmytro, could you please create a PR into the docs with the updates based on your findings?

[nxnam1102]

Hope this help
https://mmomtchev.medium.com/bundling-react-native-for-the-web-with-webpack-and-typescript-ba42db25584