Module parse failed: Unexpected token. You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

🐛 Bug Report

Not able to build code

UI Kitten and Eva version

Package	Version
@eva-design/eva	^2.0.0-alpha.1
@ui-kitten/components	^5.0.0-alpha.1

Environment information

  System:
    OS: macOS 10.15.3
    CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
  Binaries:
    Node: 13.9.0 - ~/.nvm/versions/node/v13.9.0/bin/node
    Yarn: 1.22.4 - ~/.yvm/shim/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v13.9.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 27, 28
      Build Tools: 27.0.3, 28.0.3, 29.0.3
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.6010548
    Xcode: 11.4/11E146 - /usr/bin/xcodebuild
  npmPackages:
    react: ~16.13.1 => 16.13.1 
    react-native: https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz => 0.61.4 

[harryy2510]

Steps

1. Install expo webpack config dependency npm i -D @expo/webpack-config

2. Create webpack.config.js in the root folder of the project and add the code snippet below

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function(env, argv) {
    const config = await createExpoWebpackConfigAsync({
        ...env,
        babel: {
            dangerouslyAddModulePathsToTranspile: ['@ui-kitten/components']
        }
    }, argv);
    return config;
};

[harryy2510]

This code snippet is for webpack.config I believe instead of babel.config

For now, I’ve used installed @expo/webpack-config packages which let us modify the webpack file, created webpack.config at root level and added this code snippet

const createExpoWebpackConfigAsync = require('@expo/webpack-config');
const path = require('path')

module.exports = async function(env, argv) {
    const config = await createExpoWebpackConfigAsync(env, argv);
    config.module.rules.forEach(r => {
        if (r.oneOf) {
            r.oneOf.forEach(o => {
                if (o.use && o.use.loader && o.use.loader.includes('babel-loader')) {
                    o.include = [
                        path.resolve('.'),
                        path.resolve('node_modules/@ui-kitten/components'),
                    ]
                }
            })
        }
    })
    return config;
};

I know this code snippet is not clean. Any suggestions regarding this approach are much appreciated. Thanks! 😃