Could not load react-native-web/Libraries/Utilities/codegenNativeComponent

[belaziv]

The problem
I have a react native application that i'm trying to use on web as well
When I'm trying to build I get the following error:

Could not load react-native-web/Libraries/Utilities/codegenNativeComponent (imported by node_modules/react-native-safe-area-context/lib/module/specs/NativeSafeAreaView.js): ENOENT: no such file or directory, open 'react-native-web/Libraries/Utilities/codegenNativeComponent
error during build:
ENOENT: no such file or directory, open 'react-native-web/Libraries/Utilities/codegenNativeComponent'

The correct file path is:
react-native/Libraries/Utilities/codegenNativeComponent.js
It seems that the error comes from react-native-safe-area-context
And it occurs because of react-native-web alias in my vite.config.ts:

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      'react-native': 'react-native-web'
    }
  }
})

What does it mean?
Is react-native-web/Libraries/Utilities/codegenNativeComponent really missing in the implementation of react-native-web ?

How to reproduce
https://stackblitz.com/edit/vitejs-vite-betvra

Simplified test case:

Steps to reproduce:

1. go to the link above (How to reproduce section)
2. run npm i
3. run npm run build

Expected behavior
The web app will work fine with the native components

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

• React Native for Web (version): 0.17.7
• React (version): 17.0.2
• Browser: chrome

[necolas]

Your bundler should be using the web implementation of react-native-safe-area-context instead of the native export. If you continue to have trouble loading the web implementation you should open an issue against their repository

[mmomtchev]

@necolas I have a draft story on medium with my experience with bundling react-native for the web with webpack, feel free to comment on it as I went through all the problems that are posted in an issue here every few days:

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

[zico4reel]

Hi @necolas , so the issue I'm having with vite, is more of the Utilities/Platform, on webpack or CRA this issue is quite easy to resolve, but webpack is just too messy or too big.

I've been able to solve the issue on this thread, but for some reason I'm having issue with aliasing for Utilities/Platform

[codelocksdev]

@mmomtchev thank you for that! It worked for me.