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/[email protected] until this issue will be fixed in acorn.

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

[Roeefl]

@harryy2510 Thanks, this solution works well.

For anyone encountering this issue, I'm just gonna lay out the entire process in steps:

1. run expo install @expo/webpack-config
2. create 'webpack.config.js' file at root level
3. add the last code snippet provided by @harryy2510. that's all this file should contain

[jasuno]

@harryy2510 I added that snipped to my webpack.config.js but the problem persists, any other work around?

[harryy2510]

@jasuno Can you share the screenshot of exactly what error you are getting? It maybe due to some other module and You might need to add that module too in your webpack config for babel to transform it

[jasuno]

the error says

 web  Failed to compile.
/Users/jasonmatthews/Documents/atlantaDark/node_modules/@ui-kitten/components/ui/input/input.component.js 110:38
Module parse failed: Unexpected token (110:38)
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
|         this.webEventResponder = devsupport_1.WebEventResponder.create(this);
|         this.focus = () => {
>             this.textInputRef.current?.focus();
|         };
|         this.blur = () => {

my config code is set up like this in: node_modules/@expo/webpack-config/webpack-config.js

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


module.exports = async function(env, argv) {

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

[harryy2510]

@jasuno If I'm correct

1. You've installed expo webpack config npm i -D @expo/webpack-config
2. You've created a webpack.config.js file in the root folder of your project? And its content should be

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

[jasuno]

Thank you very much that actually helped out, I was changing the one in my node modules... yeah I know a silly mistake

[adammcarth]

This also causes issues for Jest and React Test Renderer when testing components which import anything from @ui-kitten/components.

FAIL  src/screens/Login/Login.test.tsx
  - Test suite failed to run

Jest encountered an unexpected token

Details:

    ./../node_modules/@ui-kitten/components/ui/autocomplete/autocomplete.component.js:95
                this.popoverRef.current?.show();
                                        ^

    SyntaxError: Unexpected token '.'

How on earth is TypeScript specific syntax even making it to the distribution build in the first place? That's surely not the desired output, right?

[harryy2510]

@adammcarth Hi, I think instead of accusing, we can always find a solution to the problem and alwasy praise the efforts and time UI Kitten team has put up.

Firstly, It is not a typescript specific syntax now. It has been introduced to Javascript also and you'll start to find more of this syntax in near future in almost every project. You can read more about it here - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Secondly, What you can do is use babel transform in your jest config and use this plugin https://babeljs.io/docs/en/next/babel-plugin-proposal-optional-chaining

[adammcarth]

Thanks for the info @harryy2510. I genuinely had no idea the ?. operator had made it to the JavaScript core 🤷‍♀️

My follow up questions are still going to be quite similar though. Why isn't UI Kitten transpiling down to ES5 JavaScript? What are the benefits of remaining at ES Next and requiring projects to use additional Babel plugins when (I assume) it could just be transpiled to ES5 for increased support and flexibility?

The reason I'm asking these questions is because I'm happy to help make those changes if it was just an initial oversight. They weren't meant to come off as accusations; apologies to everyone if they did 👍

[harryy2510]

@adammcarth I think UI Kitten team will be better able to answer this question. No hard feelings though :)

[Pfurr]

@adammcarth I think UI Kitten team will be better able to answer this question. No hard feelings though :)

i have some error. I'm not working with expo. Any fix?

Ps. "@ui-kitten/components": "^5.0.0"

[Pfurr]

@artyorsh i fix, thank you for support! Ps. I'm working with next js and rnw and kitten ui

[jmakGH]

Is anyone else running into this issue when using Typescript and Expo?

[JordiOrriols]

Me!

Using expo and typescript. I just started with the instructions on the "get started" documentation, and I got the error of this issue.

I'm currently using:

   "@eva-design/eva": "^2.0.0",
   "@ui-kitten/components": "^5.0.0",

I didn't apply the workaround yet...

[eunhyoung0313]

I've tried the solution above and fixed "missing appropriate loader " issue, but I still have an error message

" Module parse failed: Unexpected token (110:38) 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 | this.webEventResponder = devsupport_1.WebEventResponder.create(this); | this.focus = () => {

        this.textInputRef.current?.focus();

| }; | this.blur = () => { events.js:292 throw er; // Unhandled 'error' event ^

Error: EPERM: operation not permitted, lstat 'C:\Users\Admin\Desktop\intern\delight\node_modules.staging\webpack-613473b9\hot' Emitted 'error' event on NodeWatcher instance at: at NodeWatcher. (C:\Users\Admin\Desktop\intern\delight\node_modules\sane\src\node_watcher.js:291:16) at FSReqCallback.oncomplete (fs.js:168:21) { errno: -4048, code: 'EPERM', syscall: 'lstat', path: 'C:\Users\Admin\Desktop\intern\delight\node_modules\.staging\webpack-613473b9\hot' } " What should I do?

[harryy2510]

@eunhyoung0313 @JordiOrriols

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

[radihuq]

I managed to get this to work on a Create React Application by using the documentation from React Native Elements - Usage on the Web

---

Install UI Kitten components

yarn add @eva-design/eva @ui-kitten/components react-native-svg

Install packages to override webpack config

yarn add -D @babel/plugin-proposal-class-properties customize-cra react-app-rewired

config-overrides.js

Create a new file called config-overrides.js in the root of the project and add the following code inside:

const path = require('path');
const { override, addBabelPlugins, babelInclude } = require('customize-cra');

module.exports = override(
    ...addBabelPlugins('@babel/plugin-proposal-class-properties'),
    babelInclude([
        // MONOREPO WITH HOIST
        // path.resolve(__dirname, '../../../node_modules/@ui-kitten'),
        // path.resolve(__dirname, '../../../node_modules/@eva-design'),
        path.resolve(__dirname, './node_modules/@ui-kitten'),
        path.resolve(__dirname, './node_modules/@eva-design'),
        path.resolve(__dirname, 'src'),
    ]),
);

Update start script

Update the start script in package.json to:

"start": "react-app-rewired start"

See if it works

Update App.tsx to:

import React from 'react';

import { View, Text } from 'react-native';
import * as eva from '@eva-design/eva';
import { ApplicationProvider, Button, Toggle } from '@ui-kitten/components';

type AppProps = {};

export const App: React.FC<AppProps> = () => {
    return (
        <ApplicationProvider {...eva} theme={eva.light}>
            <View>
                <Text>Web App Text</Text>
                <Button>This Button</Button>
                <Toggle>
                    {(evaProps) => <Text {...evaProps}>Place your Text</Text>}
                </Toggle>
            </View>
        </ApplicationProvider>
    );
};

[augsteyer]

The workaround seems to be working. Just make sure to restart your stack after making the changes.

I am fairly new to it all, so I don't have any hope of figuring out how to solve the actual issue in a PR. I do, however, not mind doing some leg work to get to replicability.

Question regarding this quirk. I was running a basic tutorial from last year using Expo + UI Kitten (v4 at the time). The setup is fairly simple:

expo init uiKittenStartExpo # I chose Managed Blank TypeScript
cd uiKittenStartExpo
expo install @ui-kitten/eva-icons @eva-design/eva @ui-kitten/components react-native-svg # I downgraded the SVG version to what UI Kitten supports later on (^9.13.6)
expo start
// import "@ui-kitten/components" to App.tsx or App.js with ApplicationProvider and all that stuff

One might see that it works on Native app emulators, but not Web. I get that token error that is mentioned by others. I tried downgrading to version UIKitten v4.4.1 and Eva 1.4.0 and it worked without issues. So I understand why the tutorial worked. Something that changed in v5 possibly broke this expo-kitten relationship.

I also tried the same on their snack.expo.io site, it was complaining at first, but it is working without the needed webpack workaround in their Web view and Native apps. Now I wonder if this can be replicated by others on their machines?

If it is a problem for everyone, should we therefore ask Expo to fix it in the webpack config as they have direct access to it? Or is it in UI Kitten's ballpark to fix?

[0plus1]

After following @harryy2510 I now get:

Module parse failed: Unexpected token (1:7)
File was processed with these loaders:
 * ../../../babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
> export ActivityBar from "./ActivityBar";
| export ReactionBar from "./ReactionBar";

[darcstar-solutions]

Adding the following underneath the "web" key in app.json also resolves the issue: "build": { "babel": { "include": [ "@ui-kitten/components" ] }

[LadislavBohm]

It would be great if someone know how to configure webpack on an app without Expo.

[siarheipashkevich]

Hi @harryy2510 I've followed your steps, but I'm getting an error:

(node:22535) UnhandledPromiseRejectionWarning: TypeError: tapable_1.AsyncSeriesWaterfallHook is not a constructor