Failed to Compile while trying to run Hello Mobile Navigation with react-native-web

[mogarick]

Hi,
I'm trying to run the Hello Mobile Example for a new create-react-app with react-native-web installed but I'm getting the following error:

Failed to compile.

Error in ./~/react-native-tab-view/src/TabViewAnimated.js
Module parse failed: /Users/xxxxxxx/reactnavcp/node_modules/react-native-tab-view/src/TabViewAnimated.j
s Unexpected token (11:12)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (11:12)
 @ ./~/react-native-tab-view/index.js 5:33-65

Error in ./~/react-native-tab-view/src/TabViewPagerPan.js
Module parse failed: /Users/xxxxxxx/reactnavcp/node_modules/react-native-tab-view/src/TabViewPagerPan.j
s Unexpected token (13:12)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (13:12)
 @ ./~/react-native-tab-view/index.js 6:33-65

Error in ./~/react-native-tab-view/src/TabViewPagerScroll.js
Module parse failed: /Users/xxxxxxx/reactnavcp/node_modules/react-native-tab-view/src/TabViewPagerScrol
l.js Unexpected token (10:12)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (10:12)
 @ ./~/react-native-tab-view/index.js 7:36-71

Error in ./~/react-native-tab-view/src/TabViewPagerAndroid.js
Module parse failed: /Users/xxxxxxx/reactnavcp/node_modules/react-native-tab-view/src/TabViewPagerAndro
id.js Unexpected token (10:12)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (10:12)
 @ ./~/react-native-tab-view/index.js 8:37-73

Error in ./~/react-native-tab-view/src/TabBar.js
Module parse failed: /Users/xxxxxxx/reactnavcp/node_modules/react-native-tab-view/src/TabBar.js Unexpec
ted token (13:12)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (13:12)
 @ ./~/react-native-tab-view/index.js 9:24-47

I opened the first file mentioned in the error trace (TabViewAnimated (11:12)) and the problem looks related to Flow:

import type { Scene, SceneRendererProps } from './TabViewTypeDefinitions';

My VSCode indicates the error for the line as [js] 'import ... =' can only be used in a .ts file. for the import type { part of the line.

Is there anything additional to setup for adding support for Flow?

I can see in the node_modules that fbjs is installed which has flow inside.

Just in case, this is the code for the App.js (you can note I modified the import as mentioned in #423 because that was the first error I got)

import React from 'react';
import {
  AppRegistry,
  Text,
} from 'react-native';
import { StackNavigator } from 'react-navigation/lib/react-navigation';

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    return <Text>Hello, Navigation!</Text>;
  }
}

const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },
});

// AppRegistry.registerComponent('SimpleApp', () => SimpleApp);

export default HomeScreen;

Is it something I'm missing or a bug?

My setup process was:

1. create-react-app myapp
2. npm install "react-native-web"
3. npm install "react-navigation" (Got 2 warnings:
   warning "[email protected]" has unmet peer dependency "react-native@".
   warning "[email protected]" has unmet peer dependency "react-native@".)
4. npm start

Thank you in advance for the help.

[mogarick]

I've been trying to find out how to fix my problem but no success yet.
I found a comment by @brunolemos on issue facebook/create-react-app#814 that pointed me to what I describe below.
What I have found out is react-navigation module is using es5 but it depends on react-native-tab-view module that is using es2016 and it looks that's the root cause of the error I'm getting because it looks babel is not transpiling it to es5.
I'm new to this es2016, babel, etc. son I'm not sure if/how to make the create-react-app compilation script to compile the react-native-tab-view to es5. Would making that solve my problem?

Any help/hint would be much appreciated.

[brunolemos]

@mogarick I've fixed this by ejecting on create-create-app and editing the webpack config.

• npm run eject
• Open ./config/paths.js
• On appSrc array, add resolveApp('./node_modules/react-native-tab-view/src'),

[mogarick]

Thank you @brunolemos.
I'm gonna try it out.
I'm using custom-react-scripts to avoid ejecting for some specific configs (decorators). I'm gonna try to also find a way to do what you suggest using the custom scripts and report back to this issue.

[mogarick]

@brunolemos I tried your suggestion but it didin't work at all. What I have observed is:

1. The application loads correctly in the browser but instants later a black screen overlays with the error. This occurs with or without ejecting and with or without applying the appSrc modif you kindly suggested.
2. If I comment line require.resolve('react-dev-utils/webpackHotDevClient'), (line 46 from webpack.config.dev.js) the error is reported only in the terminal from which I executed yarn start. No error messages are shown in the browser screen neither the browser console. The app screen shows up with the message "Hello, Navigation!".

From that I conclude:

1. The error overlay and compiling messages get injected by webpackHotDevClient if an error occurs.
2. The problem may not be the mix of es5 and es6, at least from the browser perspective but from the babel compiling perspective (?)

Does anybody can help or give me a hint about how could I dig deeper into this and find the way to make the compilation takes the modifs made to ./config/paths.js as suggested by @brunolemos

[brunolemos]

I tried your suggestion but it didin't work at all.

@mogarick Just to be clear, it's exactly what I'm doing and it works, so double check other things on your setup.

Have you restarted the server after the changes? And which error is it showing? Copy paste here.

[mogarick]

@brunolemos the error is the same I reported since I opened the issue. There is no difference in adding the resolveApp to appSrc. I've restarted the server many times.
As I commented it appears that something happens from the webpack side after it creates the bundle. I don't know what else gets triggered after the bundle is created and the browser is launched. Somehow a compilation process continues to be executed and it's in that part where the problem occurs. Pretty weird. I don't know how webpack works so it's been complicated form me to trace down this problem.

This is the error in the console from which I execute yarn start

Failed to compile.

Error in ./~/react-native-tab-view/src/TabViewAnimated.js
Module parse failed: /Users/rmontoya/Documents/Projects/concept proofs/reactnavcp/node_modules/react-native-tab-view/src/TabViewAnimated.
js Unexpected token (11:12)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (11:12)
 @ ./~/react-native-tab-view/index.js 5:33-65

Error in ./~/react-native-tab-view/src/TabViewPagerPan.js
Module parse failed: /Users/rmontoya/Documents/Projects/concept proofs/reactnavcp/node_modules/react-native-tab-view/src/TabViewPagerPan.
js Unexpected token (13:12)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (13:12)
 @ ./~/react-native-tab-view/index.js 6:33-65

Error in ./~/react-native-tab-view/src/TabViewPagerScroll.js
Module parse failed: /Users/rmontoya/Documents/Projects/concept proofs/reactnavcp/node_modules/react-native-tab-view/src/TabViewPagerScro
ll.js Unexpected token (10:12)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (10:12)
 @ ./~/react-native-tab-view/index.js 7:36-71

Error in ./~/react-native-tab-view/src/TabViewPagerAndroid.js
Module parse failed: /Users/rmontoya/Documents/Projects/concept proofs/reactnavcp/node_modules/react-native-tab-view/src/TabViewPagerAndr
oid.js Unexpected token (10:12)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (10:12)
 @ ./~/react-native-tab-view/index.js 8:37-73

Error in ./~/react-native-tab-view/src/TabBar.js
Module parse failed: /Users/rmontoya/Documents/Projects/concept proofs/reactnavcp/node_modules/react-native-tab-view/src/TabBar.js Unexpe
cted token (13:12)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (13:12)
 @ ./~/react-native-tab-view/index.js 9:24-47

This is the overlay error in the browser:

The browser console log:

both the overlay and the console errors appear less than a second after the browser shows the correct app view.

if I comment the line 46 from webpack.config.dev.js the error continues to appear con terminal console but it doesn't triggers in the browser nor the browser console to show the errors.

Here is the browser screen:

[brunolemos]

Try changing the nodePaths in paths.js to [resolveApp('node_modules'), ...nodePaths],

[agrcrobles]

@mogarick try adding this module to package.json react-navigation-pollyfil and configure the alias in your webpack config as I have it here, it should work.

As discussed with @brunolemos it is experimental, but so far I have it as a temporary solution.

[mogarick]

@brunolemos @agrcrobles I'm gonna try your suggestions and report back later. Thank you for your help!

[mogarick]

@brunolemos it didn't work. Thank you anyway! :)

@agrcrobles it worked!! 🥇
Well, it doesn't throws the errors any more but I'm still getting warnings in browser console.

It looks like the StackNavigator is decorating the div that encloses the View for the react-native-web components.
Have you noticed that in your tests?

[ttraenkler]

I am also seeing a similar Warning: Unknown props ... on <div> tag importing the native StackNavigator directly without ejecting with import StackNavigator from "react-navigation/lib/navigators/StackNavigator";. Can this be fixed in react-navigation or does it need to be fixed in react-native-web?

[aizigao]

same problem

[kelset]

Pinging OP @mogarick since this issue is quite old and related to an old version of the lib. If no answer I'll close in 7 days.

[ajostergaard]

@kelset I am running beta13 and have the same problem and the suggestion from @agrcrobles is the only hint I've found that has helped, hence I believe this case should remain open.

[agrcrobles]

@ajostergaard I have created that polyfill ( it just an alias in webpack ) as an experiment so that I could test native navigators + react-native-web but I found that is not supported and not recommended by react-native-web.
As it is suggested in the docs, create your custom navigator for your web app, and use StackRouter or TabRouter as needed.
Hope that helps,

[brentvatne]

if someone would like to add support for this to react-navigation, please let me know and we can discuss! I think this would be really nice to have, but we need to have someone who is willing to own it and push it forward