Failed to compile in react native web app instance using EvaIconsPack

Dalamar commented 4 years ago

🐛 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:

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

lesmo commented 4 years ago

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'
    }
  ]
}

artyorsh commented 4 years ago

@lesmo thanks for supporting 🙏

belaziv commented 2 years ago

If I add that I get the following error:

ERROR in ./src/App.tsx 29:2
Module parse failed: Unexpected token (29:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| const HomeScreen = () => (
>   <Layout style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
|     <Text category='h1'>HOME</Text>
|   </Layout>
 @ ./src/index.tsx 2:0-24 4:43-46

@lesmo Any idea? ty

Henson-Kudi commented 2 years ago

I face same issues with vue js. Any recommendations? Please.

akveo / react-native-ui-kitten