React-native-ui-kitten: Webpack config issue after manual install of 4.3.1

[AndyHubert]

Issue type

I'm submitting a ... (check one with "x")

• [x] bug report
• [ ] feature request

Issue description

Current behavior:
After a fresh install of expo and then a manual install of UI Kitten, a webpack-related compilation error is the result when run on web.

Expected behavior:
That a manual install on top of a fresh expo install would run without issue.

Steps to reproduce:
Clone this repo: https://github.com/educational-resources-and-services/react-native-ui-kitten-test-4.3.1

Related code:
The exact commands I ran to produce the above repo:

expo init test
cd test
npm i @ui-kitten/components @eva-design/eva

Then I copied the code here for App.js. Then:

npm run web

Other information:

I did not install react-native-svg since I am using expo and therefore cannot do linking.

OS, device, package version

MacOS 10.15.1
@ui-kitten/components 4.3.1

[artyorsh]

You don’t need linking but you do need a package
expo install react-native-svg

[AndyHubert]

I just tried this. It produces the same compilation error. I have updated the test repo.

[AndyHubert]

Note: the error is not present with an install of 4.2.0.

https://github.com/educational-resources-and-services/react-native-ui-kitten-test-4.3.1/tree/kitten-4.2.0

[artyorsh]

@AndyHubert do you mean this one?

Module parse failed: Unexpected token (104:20)
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.renderDivider = () => {
>             return (<Divider />);
|         };
|         this.renderHeader = (headerStyles) => {

[artyorsh]

@AndyHubert I can back to this later, but I believe proper webpack config should resolve this
You can try configuring it in a way like we do in our playground module.
I'm not an expert in configuring webpack, so any help appreciated

[AndyHubert]

Yes - that is the error I am receiving.

[mdebo]

I receive exactly the same error using 4.3.1

[lesmo]

@AndyHubert I can back to this later, but I believe proper webpack config should resolve this
You can try configuring it in a way like we do in our playground module.
I'm not an expert in configuring webpack, so any help appreciated

I've tried copying the webpack.config.js file on a new ejected expo, but ends in the same result. It's probably got to do with the fact that I don't understand exactly what's going on... _but_:

Note: the error is not present with an install of 4.2.0.

https://github.com/educational-resources-and-services/react-native-ui-kitten-test-4.3.1/tree/kitten-4.2.0

Installing v4.2 works okay, which is interesting. I'm working on a new, ejected expo project and this version is working as expected... which is kind of unexpected, though.

[artyorsh]

I've got this working in a bare expo project with this configuration. Consider using it as a temporary solution. I can back to this issue later, maybe in the next patch release.

Demo project

[resdevd]

You might wanna add env mode, otherwise you might encounter build errors..

module.exports = async function (env, argv) {
env.mode = "development"
const config = await createExpoWebpackConfigAsync(env, argv)
// Rest of the code

[gianpaj]

FYI: version 4.2.0 works. but for those who didn't know, the package name was changed from 4.3.0.
So this has to be used in the package.json:

  "react-native-ui-kitten": "4.2.0",

[gianpaj]

BTW same issue with @ui-kitten/eva-icons version 4.3.0 AND 4.2.0

./expoweb/node_modules/@ui-kitten/eva-icons/evaIcon.component.js 21:16
Module parse failed: Unexpected token (21:16)
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
|         // @ts-ignore - Eva maps icon color to `tintColor`
|         const { tintColor } = props, restProps = __rest(props, ["tintColor"]);
>         return (<Icon fill={tintColor} {...restProps}/>);
|     }
| }

https://github.com/akveo/react-native-ui-kitten/blob/master/src/eva-icons/evaIcon.component.tsx

[artyorsh]

@gianpaj configuring webpack in the way I described above will fix this, but this is a temporary solution.

the package name was changed

It's not changed, but deprecated and will be no longer maintained after v5

[artyorsh]

Got this fixed in 4.3.2 🎉
Upgrade

[gianpaj]

Awesome! 💪 thanks a lot. I've tested and the icons and components work great on expo web 💃