Doesn't work with webpack 3.10.0

[fbartho]

Current Behavior

I made a simple set of StackNavigators which work great in react-native.

Then I went to use the same set of StackNavigators in the browser.

What I saw was a ton of errors like the following:

ERROR in ./node_modules/react-navigation/src/views/TabView/TabView.js
Module parse failed: Unexpected token (10:22)
You may need an appropriate loader to handle this file type.
| 
| class TabView extends React.PureComponent {
|   static defaultProps = {
|     // fix for https://github.com/react-native-community/react-native-tab-view/issues/312
|     initialLayout: Platform.select({
 @ ./node_modules/react-navigation/src/react-navigation.js 78:11-45
 @ ./src/navigation/navigators/OneActiveNavigator.tsx
 @ ./src/navigation/navigators/index.ts
 @ ./src/App.tsx
 @ ./src/index-demo.tsx

Expected Behavior

I expected to have the code successfully load into the browser, and then fail when it actually tried to hit concrete react-native views. Then my plan was to re-implement the RN-views that are needed under ReactXP.

This error is occurring before that point.

I found a related issue: #188 that suggests that react-navigation is shipping code that needs to be transpiled before webpack can use it.

How to reproduce

1. Prepare an app using react-native init,
2. set it up to build TypeScript,
3. set it up with babel & metro-bundler for react-native targets
4. set it up with webpack for browser-targets
5. make a trivial StackNavigator that pushes to a couple screens

Your Environment

software	version
react-navigation	1.0.3
react-native	0.52.0
node	v9.3.0
yarn	1.3.2
webpack	3.10.0
typescript	2.6.2
reactxp	0.51.8

Note: I don't believe typescript/reactxp versions have a bearing on this issue, I'm sharing them in order to have full transparency.

[brentvatne]

hi there,

we don't explicitly support web or reactxp currently. if you'd like to submit a RFC for how we could do that and own it, it would be nice. it's not a priority right now. so this is more of a feature request than a bug. sorry :(

[fbartho]

Hi @brentvatne I recognize you don't support reactxp, I was looking at providing that support myself!

Looking at the source code, I see that you have react-navigation.web.js which has a subset of the classes that are completely react-native agnostic. Jumping through a series of hoops I was able to get that file to compile successfully under webpack.

What is your policy re: the existence/implications of that file / what do you mean in the context of web-support?

I'd be happy to add a PR that documents the state of the universe & how to build under Webpack and spend time making an RFC on how to make the navigator methods / pattern more pluggable. -- If only you could enlighten me to the team's viewpoint on the matter and whether that would be a supported direction for this project.

[brentvatne]

need to add babel-loader config for this. you can install create-react-native-app (npm i -g create-react-native-app) and then run create-react-native-app HelloWorld --with-web-support --scripts-version 1.2.0-alpha.5 and open the webpack config to see what i mean

[txs]

Try this mauron85/cordova-plugin-background-geolocation-example#11