Error while building react native project

[AhmadKerdieh]

@parcel/core: Failed to resolve 'react-native/Libraries/Utilities/codegenNativeComponent' from
'./node_modules/react-native-safe-area-context/lib/module/specs/NativeSafeAreaView.js'

Package.json
{
"name": "findex",
"version": "0.0.1",
"private": false,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"lint": "eslint .",
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"@react-native-community/masked-view": "^0.1.11",
"@react-native-masked-view/masked-view": "^0.2.9",
"@react-navigation/native": "^6.1.6",
"@react-navigation/native-stack": "^6.9.12",
"add": "^2.0.6",
"link": "^1.5.1",
"localforage": "^1.10.0",
"match-sorter": "^6.3.1",
"react": "18.2.0",
"react-dom": "^18.2.0",
"react-native": "^0.71.6",
"react-native-gesture-handler": "^2.9.0",
"react-native-maps": "^1.4.0",
"react-native-safe-area-context": "^4.5.0",
"react-native-safe-area-view": "^1.1.1",
"react-native-screens": "^3.20.0",
"react-native-web": "^0.19.1",
"react-navigation": "4.1.1",
"react-navigation-stack": "^2.10.4",
"sort-by": "^1.2.0",
"yarn": "^1.22.19"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@babel/preset-env": "^7.20.0",
"@babel/runtime": "^7.20.0",
"@react-native-community/eslint-config": "^3.2.0",
"@tsconfig/react-native": "^2.0.2",
"@types/jest": "^29.2.1",
"@types/react": "^18.0.24",
"@types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.2.1",
"eslint": "^8.19.0",
"jest": "^29.2.1",
"metro-react-native-babel-preset": "0.73.9",
"parcel": "^2.8.3",
"prettier": "^2.4.1",
"process": "^0.11.10",
"react-native-codegen": "^0.71.5",
"react-test-renderer": "18.2.0",
"typescript": "4.8.4"
},
"jest": {
"preset": "react-native"
},
"alias": {
"react-native": "react-native-web"

},
}

The file codegenNativeComponent.js is in the correct directory.
NB: This error only occurs when importing @react-navigation/native-stack in App.js (and other files most likely)

App.js

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import ResultsScreen from "./ResultsScreen";

const Stack = createNativeStackNavigator();

function App() {
return (

<Stack.Navigator>
<Stack.Screen name="Home" component={ResultsScreen} />
</Stack.Navigator>

);
}

export default App;

Index.js and html.js are from the parcel docs

Build

React native app initialization then followed the docs (both parcel's and react native navigation's)

PS

First time filling an issue if anything is missing (or unnecessary info is added) please let me know.

[mischnic]

Unfortunately, React Native Web doesn't work with Parcel.

This import here https://github.com/th3rdwave/react-native-safe-area-context/blob/cbd7a3dd770f25c081c57418acb9a4dccb3de03c/src/index.tsx#L2
currently resolves to the native view SafeAreaView.js: https://github.com/th3rdwave/react-native-safe-area-context/blob/cbd7a3dd770f25c081c57418acb9a4dccb3de03c/src/SafeAreaView.tsx
but instead the bundler should prefer SafeAreaView.web.js: https://github.com/th3rdwave/react-native-safe-area-context/blob/cbd7a3dd770f25c081c57418acb9a4dccb3de03c/src/SafeAreaView.web.tsx

[mikelgarciaurbina]

I have a similar issue with react-native-svg. @mischnic there is no way to make parcel know about this .web.js components?
My error:

[mikypilota]

@mischnic Am I correct to understand that if parcel preferred the .web.js extension to the .js it would work with react-native-web ?

[mikelgarciaurbina]

@mikypilota correct

[mikypilota]

@mischnic correct

I assume this was for me :) I would just like to make sure that the file resolution issue is definitely the only blocker. Does it work for you if you manually change the imports in the react-native-svg module to their .web counterparts?

[mikypilota]

@mischnic Hi, I just wanted to ask you if you were aware of any plans of adding compatibility to resolve .web.js at some point.

@mikelgarciaurbina Did you perhaps find a workaround to use parcel with react-native?

[devongovett]

compatibility to resolve .web.js at some point.

Pretty sure that can be done via tsconfig.json moduleSuffixes now.

[mikelgarciaurbina]

@mikypilota Finally I used webpack. But the @devongovett comment I didn't try and seems like a valid solution. Thanks @devongovett