RN Web - StackNavigator is not a function

[reggi]

I'm trying to get this running on react native web.

Uncaught TypeError: (0 , _reactNavigation.StackNavigator) is not a function
    at Object.defineProperty.value (bundle.js:78675)
    at __webpack_require__ (bundle.js:660)
    at fn (bundle.js:84)
    at Object.defineProperty.value (bundle.js:78642)
    at __webpack_require__ (bundle.js:660)
    at fn (bundle.js:84)
    at Object.defineProperty.value (bundle.js:78489)
    at __webpack_require__ (bundle.js:660)
    at fn (bundle.js:84)
    at Object.defineProperty.value (bundle.js:78556)
    at __webpack_require__ (bundle.js:660)
    at fn (bundle.js:84)
    at Object.<anonymous> (bundle.js:36601)
    at __webpack_require__ (bundle.js:660)
    at fn (bundle.js:84)
    at Object.<anonymous> (bundle.js:79861)
    at __webpack_require__ (bundle.js:660)
    at bundle.js:709
    at bundle.js:712

Also what's weird, when I just run the following with babel-node

import RN from 'react-navigation'
console.log(RN.StackNavigator)

I get this error:

/Users/thomasreggi/Desktop/web/ap/node_modules/react-navigation/src/navigators/StackNavigator.js:3
import React from 'react';
^^^^^^
SyntaxError: Unexpected token import

When I check package.json main it uses the src and not the lib version, why is this?

https://github.com/react-community/react-navigation/blob/master/package.json#L5

[reggi]

Here's a demo repo:

https://github.com/reggi/example-web-react-navigation-issue

[temitope]

The second error may be due to react-navigation requiring React to be imported first, so the snippet by itself is kissing dependencies.

[temitope]

Disregard I see you got an error doing just that.

[reggi]

@temitope Any idea what's going on?

[reggi]

Seems like the react-navigation.web.js file doesn't contain StackNavigator.

import RNW from 'react-navigation/lib/react-navigation.web.js';
console.log(RNW)

{ createNavigationContainer: [Getter],
  StateUtils: [Getter],
  addNavigationHelpers: [Getter],
  NavigationActions: [Getter],
  createNavigator: [Getter],
  StackRouter: [Getter],
  TabRouter: [Getter],
  withNavigation: [Getter] }

[temitope]

@reggi Ahh I am just realizing now that it is a totally different core library (in a way)...yeah if anything would be different between native and web I would assume the navigation would be as it is so different in terms of touch/click/back<->forward buttons, but I must say i dont know as I am unfamiliar with the RN4WEB .... seems like is is still in nascent stages and not yet up to support for full react-navigation features (i.e. DrawerNavigator and StackNavigator)....i probably wouldnt use react-navigation with it as of yet, but I am relatively new to the React/ReactNative world myself so maybe someone with deeper familiarity knows how to integrate them better

[satya164]

Just import 'react-navigation/lib/react-navigation.js' if you're using react native for web. react-navigation.web.js is for normal websites.

And if you're getting errors in transpiling, configure webpack to transpile node_modules/react-navigation.

[code-by]

After updating react-native-router-flux from 3 to 4, got this error in RN4W

[geminiyellow]

yep , i use rnrf 4, and got this error.

[brentvatne]

can someone who would like to see this issue resolved please create a new issue with a reproducible example on https://snack.expo.io or in a github repository, with a minimal amount of superfluous code? (please don't post your entire app, just a small one to reproduce the problem). thanks!