react-native-ui-kitten: 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.

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

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! 😃

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

@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

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

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

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

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

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

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

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! 😃

Hi, I have the same error but with NUXT. I put @expo/webpack-config and created webpack.config. But not work yet.

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?

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

Thanks @harryy2510 it works. For anyone to whom his solution is not working. Dont forget to replace the package name inside dangerouslyAddModulePathsToTranspile key.

        dangerouslyAddModulePathsToTranspile: ['@package_name']

change react-scripts version in package.json to “react-scripts”: “^4.0.3” . create-react-app is not pulling the correct version that’s why you are facing this issue.

@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.

hey while importing query-string in react it showing an error: ./node_modules/query-string/base.js 424:161 Module parse failed: Unexpected token (424:161) File was processed with these loaders:

• ./node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | | return {

url: ((_url_ = url_) === null || _url_ === void 0 ? void 0 : (_url_$split = _url_.split('?')) === null || _url_$split === void 0 ? void 0 : _url_$split[0]) ?? '',

| query: parse(extract(url), options), | …(options && options.parseFragmentIdentifier && hash ? {

Thanks @harryy2510 ! Yoursuggestions works great.

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

Here’s how to configure webpack with expo.

first, run npm install @expo/webpack-config

create a webpack.config.js file in the root of your app

paste this:

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

now you should be able to setup your App.js or App.tsx file with ui-kitten and eva.

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

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 👍

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

@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