CODEWITHSUNDEEP
react-nativewebpackreact-navigationbabeljsreact-native-web
FraPetIm
FraPetIm

Reputation: 65

Cannot integrate React Native Web with react Navigation

I am experiencing a lot of difficulties integrating React navigation in a React native WEB project.

I have created a mini project with react native web and react navigation in a cloud sandbox, everything works as expected.

Please have a look, I am not using the latest react navigation but I have tried previously the latest(updating the code as the API changed) and it works fine.

React Native web Running in Sandbox

I have cloned this project exactly as it is, installed all the dependencies and tried different versions of React Native Web, Webpack(version 3 and 4), babel(version 6 and 7) and the latest React Navigation (version 3+). I was not able to make it run on localhost, the error is:

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 = {
|     lazy: true,
|     removedClippedSubviews: true,

on React Navigation version 1.5.8 and a similar error on The latest version. But it works fine in the Sandbox.

Is anybody familiar with this type of setup and why the exact same code does not work on localhost?

I have tried also creating a webpack.config.js in the root and change configurations as some suggested but no luck.

You can clone this repo which is exactly the same sandbox and see for yourself.

Clone this Github Repo

Please any help would be greatly appreciated

Upvotes: 2

Views: 1081

Answers (1)

Bijay Timilsina
Bijay Timilsina

Reputation: 757

This happened to me as well. The reason is because some of the modules provided by React Navigation are not transpiled to their corresponding react-native-web equivalent. What I mean is you need to transpile those modules individually using babel-loader or whatever you are using. Something like below in webpack.config or .babelrc should work:

{
  test: /\.(js|jsx)$/,
  include: [
    path.resolve(root, "node_modules/@react-navigation"),
    path.resolve(root, "node_modules/react-navigation"),
    path.resolve(root, 'node_modules/react-native-uncompiled'),
    path.resolve(root, "node_modules/react-native-tab-view"),
    path.resolve(root, "node_modules/react-native-gesture-handler"),
    path.resolve(root, "node_modules/react-native-vector-icons"),
    path.resolve(root, "node_modules/react-native-web"),
    path.resolve(root, "node_modules/react-native-tab-view"),
    path.resolve(root, "node_modules/react-native-drawer"),
    ....and whatever module gives problem....
  ] // external non react-native packages to be compiled by Babel
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      plugins: ['react-native-web']
        ...
    }
  }
};

Here is an article with clear explanation on this topic: https://pickering.org/using-react-native-react-native-web-and-react-navigation-in-a-single-project-cfd4bcca16d0

Upvotes: 1

Related Questions