React-native-web: Issue with react-navigation - unexpected token

[bhaskar8088]

I am getting below issue when trying to port react native app to web. Any solution?

Failed to compile.

./node_modules/@react-navigation/native/dist/ResourceSavingSceneView.js
SyntaxError: /home/bhaskar/myproject/node_modules/@react-navigation/native/dist/ResourceSavingSceneView.js: Unexpected token (33:11)

31 | } = this.props;
32 |

33 | return | ^
34 | 35 | {awake ? : null}
36 |

[necolas]

This isn't the react navigation project

[sinasadeghi83]

I have same problem

[mohammad-khosrojerdi]

this is my problem

[possiblytyler]

I had the same problem. It's stemming from the differences in babel configuration for a React Native project created with react-native init and a reactjs project created with create-react-app ( CRA ). React Native appears to handle JSX in node_modules, where as a CRA does not. It appears some modules for react-native don't have distributable code that is compatible with the default config of a CRA generated app. One work-around for this is to use react-app-rewired to modify a CRA app Webpack/Babel config to extend the babel presets used in the main code base to certain node_modules. This is what is done in this example app https://github.com/possiblytyler/rnNavWebAppExample. As @necolas stated, this isn't a react-native-web issue, but difference between in default config between react-native and a create-react-app app.

[pcooney10]

Webpack does not compile node_modules by default. You need to tell webpack to not exclude (read: include) that dependency and compile it with babel.