React-native-ui-kitten: Failed to compile in react native web app instance using EvaIconsPack

Created on 4 Apr 2020 · 2Comments · Source: akveo/react-native-ui-kitten

🐛 Bug Report

My app was build from TS template using installation guide in the docs.

npx react-native init MyApp --template @ui-kitten/template-ts

My app does not use expo.

My app has single screen with button and icon of facebook from the example in the docs.
IconRegistry is configured according to the docs as well:

import React from 'react';
import {StyleSheet} from 'react-native';
import {ApplicationProvider, Button, Icon, IconRegistry, Input, Layout, Text} from '@ui-kitten/components';
import {EvaIconsPack} from '@ui-kitten/eva-icons';
import {dark as darkTheme, mapping} from '@eva-design/eva';
...

const App = () => (
    <React.Fragment>
        <IconRegistry icons={EvaIconsPack} />
        <ApplicationProvider mapping={mapping} theme={darkTheme}>
            <HomeScreen />
        </ApplicationProvider>
    </React.Fragment>
);

export default App;

It works perfectly in iOS simulator.

On top of that I installed and added Web support via react-native-web package.

Compiling for web produces following error:

Failed to compile

The only way to run web app is to remove IconRegistry and icon usage.

To Reproduce

Steps to reproduce the behavior:
Install and setup react-native-web on top of the react-native-ui-kitten based app using eva-icons for the icons.

Expected behavior

Web app should compile without error in Web app.

Link to runnable example or repository (highly encouraged)

https://codesandbox.io/s/competent-currying-oh8wx

UI Kitten and Eva version

| Package | Version |
| ----------- | ----------- |
| @eva-design/eva | ^1.4.0 |
| @ui-kitten/components | ^4.4.0 |
| @ui-kitten/eva-icons | ^4.4.0 |

Environment information

  System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 10.15.3 - /usr/local/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  SDKs:
    iOS SDK:
      Platforms: iOS 13.0, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5791312
    Xcode: 11.0/11A420a - /usr/bin/xcodebuild
  npmPackages:
    react: ^16.13.1 => 16.13.1 
    react-native: 0.61.5 => 0.61.5

Source

Dalamar

Most helpful comment

It looks like you're not transpiling node_modules (jsx is not being parsed properly). For ui-kitten (or any React Native library actually) to work you need to make sure they get transpiled.

You'll have to add something like this in babel.config file:

module: {
  rules: [
    // This would match almost any react-native module
    {
      test: /(@?react-(navigation|native)).*\.(ts|js)x?$/,
      include: /node_modules/,
      exclude: [/react-native-web/, /\.(native|ios|android)\.(ts|js)x?$/],
      loader: 'babel-loader'
    },
    // This would match ui-kitten
    {
        test: /@?(ui-kitten|eva-design).*\.(ts|js)x?$/,
        loader: 'babel-loader'
    }
  ]
}

lesmo on 7 Apr 2020

👍3

All 2 comments

It looks like you're not transpiling node_modules (jsx is not being parsed properly). For ui-kitten (or any React Native library actually) to work you need to make sure they get transpiled.

You'll have to add something like this in babel.config file:

module: {
  rules: [
    // This would match almost any react-native module
    {
      test: /(@?react-(navigation|native)).*\.(ts|js)x?$/,
      include: /node_modules/,
      exclude: [/react-native-web/, /\.(native|ios|android)\.(ts|js)x?$/],
      loader: 'babel-loader'
    },
    // This would match ui-kitten
    {
        test: /@?(ui-kitten|eva-design).*\.(ts|js)x?$/,
        loader: 'babel-loader'
    }
  ]
}

lesmo on 7 Apr 2020

👍3

@lesmo thanks for supporting 🙏