Failed to compile ./node_modules/react-router-native/NativeRouter.js

[ethanneff]

Version

react-router-native 4.2.0

Test Case

I am using create-react-app (react-scripts start) with React Native. Everything works fine until I add react-router-native code. I get the following error:

Failed to compile
./node_modules/react-router-native/NativeRouter.js
Module parse failed: Unexpected token (11:2)
You may need an appropriate loader to handle this file type.
|  */
| const NativeRouter = (props) => (
|   <MemoryRouter {...props}/>
| )
|`

Am I missing something in the setup process? I am using this guide https://github.com/ReactTraining/react-router/tree/master/packages/react-router-native

Steps to reproduce

import React from "react";
import { StyleSheet, Text, View } from "react-native";
+ import { NativeRouter, Route } from "react-router-native";

const page = props => {
  return (
    <View style={styles.container}>
      <Text>Test</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
});

export default page;

package.json

{
  "devDependencies": {
    "@commitlint/cli": "^4.2.2",
    "@commitlint/config-angular": "^4.2.1",
    "coveralls": "^3.0.0",
    "gh-pages": "^1.0.0",
    "husky": "^0.14.3",
    "jest-expo": "^22.0.0",
    "lint-staged": "^4.3.0",
    "prettier": "^1.7.4",
    "react-devtools": "^2.5.2",
    "react-native-scripts": "1.6.0",
    "react-native-web": "^0.1.13",
    "react-scripts": "^1.0.16",
    "react-test-renderer": "16.0.0",
    "remote-redux-devtools": "^0.5.12"
  },
  "dependencies": {
    "expo": "^22.0.0",
    "react": "16.0.0",
    "react-dom": "^16.0.0",
    "react-native": "^0.50.0",
+   "react-router-native": "^4.2.0"
  }
}

.babelrc

{
  "plugins": [
    "react-native-web/babel"
  ],
  "presets": [
    "react-native",
    "babel-preset-expo"
  ],
  "env": {
    "development": {
      "plugins": ["transform-react-jsx-source"]
    }
  }
}

Expected Behavior

render

Actual Behavior

error

[timdorr]

Something is wrong with your build tooling. This isn't a problem with react router.

[ethanneff]

So react-router doesn't support create-react-app and create-native-react-app? That's the only tooling I am using.

[pshrmn]

The error seems to be because react-router-native ships JSX (instead of compiling it into React.createElement calls). I'm not familiar enough with React Native to know if shipping JSX is standard. Are you able to force the build tool to compile certain files/node_modules?

[ethanneff]

Figured it out. Apparently react-router-native does not play friendly with web. I had to do a solution similar to this: https://github.com/react-everywhere/re-start/blob/master/src/utilities/routing/router.js#L3

Thanks!

[nawwa]

What was the solution ! THe link is brokenn :(

[0xpatrickdev]

Apparently react-router-native does not play friendly with web.

@ethanneff can you elaborate more on this?

Was it just a transpiling issue? If so, you need to make sure react-router-native is getting transpiled with Babel, something like this in your webpack.config.js:

const path = require('path');
const appDirectory = path.resolve(__dirname, '../');

module.exports {
...
  test: /\.(js|jsx|mjs)$/,
  include: [
    path.resolve(appDirectory, 'src')
    path.resolve(appDirectory, 'node_modules/react-router-native')
  ],
  loader: require.resolve('babel-loader'),
...
}