cannot use third-party react native components

[anchetaWern]

Hello, I'm using the react native starter kit to setup react native for web projects. My problem is that I can't seem to get third party react native modules to work, even those that doesn't have dependency to the native platform. More details here:

grabcode/react-native-web-starter#12

Environment (include versions)

OS: Ubuntu 16.04
Device: browser
Browser: chrome
React Native for Web (version): ^0.0.44
React (version): 15.3.1

[MoOx]

Your issue seems a bit vague.

It is totally possible (eg: I use https://github.com/oblador/react-native-vector-icons) but it will obviously depends on what the component expect to be available (is there some native code involved? it the code of the module transpiled or not? etc). Hard to say get a precise answer here. You should probably evaluate modules one by one instead of trying to add everything. Also you need to be aware of some differences in some components.

[necolas]

There are a couple of problems I noticed:

1. Many RN packages are not compiled before publishing to the registry. Your setup probably doesn't compile node_modules, which is why you're seeing syntax errors related to ES2015 syntax in those dependencies.
2. Several of those packages do import native modules (e.g., NativeModules, requireNativeComponent, ART)

Hope that helps

[lsps9150414]

@necolas Thanks for the hints.
How can I setup my project so that node_modules will be compiled?

I used create-react-app to create my project but I don't see webpack config file in my project's directory. Simply create one doesn't seem to be right. Or is it?

[necolas]

create-react-app uses webpack internally. you'll probably have to "eject" to get access to the webpack config, but best to check their docs.

[dorthwein]

@MoOx Sorry to resurrect this issue - can you please provide some guidance on how to get react-native-vector-icons (and other third party components) working?

I keep getting the same "Unexpected token import..." error which is related to react-native components generally not having a compiled source with them.

Thanks

[MoOx]

I made a PR on their README. You basically need to transpile the react-native-* modules as they are most of the time published in es6, not transpiled via babel

https://github.com/oblador/react-native-vector-icons#web-with-webpack

[MoOx]

What you may miss from this guide is that you need to add "node_modules/react-native-vector-icons" in your babel-loader include pattern.

[dorthwein]

@MoOx thanks for the feed back - I found the info your talking about but including the code below causes an "Uncaught SyntaxError: Unexpected token import" error ;(

{ test: /\.js$/, exclude: /node_modules/, include: '/node_modules/react-native-vector-icons', loader: 'babel-loader', query: { cacheDirectory: true } },

[dorthwein]

Just wanted to follow up here for future folks with a few tidbits.

The approach is to include the react-native component in your babel compile. In the case of react-native-vector-icons your need to follow @MoOx instructions (which are also listed on the react-native-vector-icons site).

One snag I hit was not being able to parse the JSON files so be sure to include the json-loader in your loaders. Example webpack.config.dev.js

Also, I used the react-native-web quick start which has the webpack.config.dev.js file in a subfolder, so be sure to make sure you do the correct path etc...

loaders: [
      { 
        test: /\.json$/, loader: "json-loader" 
      },
      {
        test: /\.js$/,      
        loader: 'babel-loader',
       query: { cacheDirectory: true },
        include: path.resolve(__dirname, "../node_modules/react-native-vector-icons"),
      },      
]          

Link to @MoOx directions
https://github.com/oblador/react-native-vector-icons#web-with-webpack

[srikanthsunkari]

1. Many RN packages are not compiled before publishing to the registry. Your setup probably doesn't compile node_modules, which is why you're seeing syntax errors related to ES2015 syntax in those dependencies.

@necolas , how do I make sure that RN packages or module is compiled? Currently, I have mapped metro.config.js file to load the local modules from the node_modules folder.

[MoOx]

See comment above. Metro can't handle that since it's for RN. RNW codebase needs to be compiled with a web bundler, like webpack, rollup, browserify etc

[srikanthsunkari]

@MoOx Sorry, If I am missing something from above. I am still facing the Unable to resolve module error, even after the babel loader configuration in webpack.config.js.

............
const babelLoaderConfiguration = {
  test: /\.js$/,
  // Add every directory that needs to be compiled by Babel during the build.
  include: [
    path.resolve(appDirectory, 'index.js'),
    path.resolve(appDirectory, 'src'),
    path.resolve(appDirectory, 'node_modules/react-native-uncompiled'),
    path.resolve(appDirectory, 'node_modules/react-native-sdk'),
  ],
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      // The 'react-native' preset is recommended to match React Native's packager
      presets: ['react-native'],
      // Re-write paths to import only the modules needed by the app
      plugins: ['react-native-web',]
    },
  }
};
.............

I am trying to include react-native-sdk library which is linked from a local directory. I have included the module as in the above webback.config.js -> babelConfiguration file.

As I can see there is test: /.js$/ is only for .js file my workspace has the mix of .js and .tsx files is there something specific in my case ?

I have created the new issue #1354 with all details of my package and webpack configuration and bable loader configuration.

[flyskywhy]

npm install --save-dev react-app-rewired

Create a config-overrides.js in your project root

// used by react-app-rewired

const webpack = require('webpack');
const path = require('path');

module.exports = {
  webpack: function (config, env) {
    config.module.rules[1].use[0].options.baseConfig.extends = [
      path.resolve('.eslintrc.js'),
    ];

    const webAliases = {
      'react-native': path.resolve('web/aliases/react-native'),
    };
    Object.assign(config.resolve.alias, webAliases);

    config.plugins.push(
      new webpack.DefinePlugin({
        __DEV__: process.env.NODE_ENV !== 'production',
      }),
    );

    return config;
  },
  paths: function (paths, env) {
    paths.appIndexJs = path.resolve('index.web.js');
    paths.appSrc = path.resolve('.');
    paths.moduleFileExtensions.push('ios.js');
    return paths;
  },
};

Also create a web/aliases/react-native/index.js

// ref to https://levelup.gitconnected.com/react-native-typescript-and-react-native-web-an-arduous-but-rewarding-journey-8f46090ca56b

import {Text as RNText, Image as RNImage} from 'react-native-web';
// Let's export everything from react-native-web
export * from 'react-native-web';

// And let's stub out everything that's missing!
export const ViewPropTypes = {
  style: () => {},
};
RNText.propTypes = {
  style: () => {},
};
RNImage.propTypes = {
  style: () => {},
  source: () => {},
};

export const Text = RNText;
export const Image = RNImage;
// export const ToolbarAndroid = {};
export const requireNativeComponent = () => {};

Now you can just run react-app-rewired start instead of react-scripts start