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.

[harryy2510]

🐛 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 

[lesmo]

Feels like a duplicate of #991. You're trying to use ui-kitten in react-native-web (or expo-web in this case), and you need to make Webpack transpile node_modules or you'll face these kinds of errors.

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

[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! :)

[artyorsh]

@harryy2510 @lesmo
This is a library build issue. We moved to ts3.8 without thinking about optional chaining transpiling. Here seems like a correct way to fix this, should be done on the ui kitten side.

Thanks for sharing workarounds 👍

UPD

There is a stackoverflow answer on this issue.

Webpack uses Acorn parser, and Acorn does not support optional chaining as of now.
There is a pending pull request which you can subscribe to to get notified about the progress.

[the-phoenix]

@artyorsh I saw you've upgraded to ts3.8 in v5.0.0-alpha.1 release but it still didn't fix above issue.
Would you please check?

[artyorsh]

@the-phoenix

@artyorsh I saw you've upgraded to ts3.8 in v5.0.0-alpha.1 release but it still didn't fix above issue.

Would you please check?

Use the workaround by @harryy2510 as a temporary solution.
This definitely will be fixed in alpha.2, but no ETAs to be honest

[temitopealabi]

@harryy2510 thanks your suggestion work for me

[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;
};

[artyorsh]

Since this is a workaround and we can do nothing about that (excluding possible changes in the build process, which is not an issue), I think I will do nothing on this issue for the package distributed with latest npm tag (which is default when you run npm install).

Despite this, I will make a separate tag to distribute the package builded with outdated build system just to make it compatible with webpack / acorn.

The new package will be published together with v5 stable (you may track it here) and installable with
npm i @ui-kitten/components@ts3.7 until this issue will be fixed in acorn.

@harryy2510 thanks for posting the workarounds and keeping it alive 👍