React-native-ui-kitten: Error when upgrading from v4 to v5

Created on 1 May 2020 · 5Comments · Source: akveo/react-native-ui-kitten

Hello!

Love this framework, but I'm having some trouble upgrading from v4 to v5.

💬 Question

After running

yarn add @ui-kitten/components@next @eva-design/eva@next

and

yarn web

I am met with the following error:

/Users/me/Programming/mantra/expo/node_modules/@ui-kitten/components/ui/input/input.component.js 104:38
Module parse failed: Unexpected token (104: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 = () => {

UI Kitten and Eva version

| Package | Version |
| ----------- | ----------- |
| @eva-design/eva | 2.0.0-alpha.1 |
| @ui-kitten/components | ^5.0.0-alpha.1 |
| expo | ~37.0.3 |
| react | ~16.9.0 |
| react-native | ~0.61.5 |
|typescript|~3.8.3|
|react-native-svg|^12.1.0|

Help wanted Duplicate

Source

jaminhaber

Most helpful comment

@artyorsh thank you. I had to modify my webpack configuration like so.

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

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

jaminhaber on 5 May 2020

🚀1 🎉1

All 5 comments

Make sure to restart with clearing cache. For Expo apps you should use expo start -c Duplicates ~#1052~ #996

artyorsh on 2 May 2020

@artyorsh
Thank you for replying. Unfortunately i don't believe this is the same issue as the error is different and the recommended solution did not fix it. I can provide more information if needed.

jaminhaber on 2 May 2020

@jaminhaber please also check #996

artyorsh on 2 May 2020

@artyorsh thank you. I had to modify my webpack configuration like so.

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

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

jaminhaber on 5 May 2020

🚀1 🎉1

@jaminhaber Thank you for posting the custom webpack override. Very helpful!