expo start:web failed to compile after import native-base

[yeungma]

There is an error when run expo start:web
//
web Failed to compile.
C:/myproj/pokesearch/node_modules/@codler/react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.js 13:12
Module parse failed: Unexpected token (13:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack
| } from ‘react-native’
| import { isIphoneX } from ‘react-native-iphone-x-helper’

import type { KeyboardAwareInterface } from ‘./KeyboardAwareInterface’
|
| const _KAM_DEFAULT_TAB_BAR_HEIGHT: number = isIphoneX() ? 83 : 49
//

Here is the App.js
//
import { StatusBar } from “expo-status-bar”;
import { AppLoading } from “expo”;
import React from “react”;
import { StyleSheet, Text, View } from “react-native”;
import { Button } from “native-base”;

export default function App() {
return (

Open up App.js to start working on your app!


);
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: “#fff”,
alignItems: “center”,
justifyContent: “center”,
},
});

//

Version of Expo CLI and native-base is:
//
C:\myproj\pokesearch>expo --version
3.22.1

C:\myproj\pokesearch>yarn list native-base
yarn list v1.22.4**
warning …\package.json: No license field
warning Filtering by arguments is deprecated. Please use the pattern option instead.
└─ native-base@2.13.13
Done in 0.83s.**
//

[val_gd]

I had exactly the same issue.
I suppose native-base has compatibility issues with react-native-web
So now i’m just using react-native-elements as my React Native UI and my app is working fine.

[yeungma]

Thanks val_gd for sharing. Just exploring any theme roller or styled component with more professional look.

[judipuak]

I had the same issue and this is what i did to get rid of the error

1. make sure you have react-native-keyboard-aware-scroll-view folder in your node_modules folder, not inside any other folder
   if you don’t, install it using npm or yarn
2. go to native base/dist/src/basic and open Content.js
3. locate this

var _reactNativeKeyboardAwareScrollView=require('@codler/react-native-keyboard-aware-scroll-view')

4. change it into

var _reactNativeKeyboardAwareScrollView=require('react-native-keyboard-aware-scroll-view')

notice how I omitted the ‘@codler/’ part
and no more errors
my app runs on web
the native base cards - that display static data - are all there and work as intended: I can press them to navigate to other pages
so I’d like to think that there is no compatibility issue between native base and expo on web

however, my problem is that async fetch function apparently does not work because the data mapping does not give out any data
the native base cards that are supposed to show the dynamic data from the fetch function are not there
so I guess the map function does not work

this is so confusing because the app works flawlessly on my android phone

so if you use native base cards to display fetched data from APIs, i’d appreciate it if you could try the 4 steps above, and advise me if your fetched data is properly displayed on the cards
if it works on your side, then it’ll be safe to assume that i am missing something
maybe a dependency is missing or something

thanks

[callmegina]

thank you so much!!! I have the same issue as well, and the problem solved with your solution

[nonita16]

You just saved me with your solution! thank you so much!! C:

[pnoordveld]

@judipuak

if you use native base cards to display fetched d

How did you fix this? I tried changing the var but then im getting bigger errors.

[bycedric]

Hi people! It looks like the code or dependencies from Native Base isn’t pre-transpiled. We have to tell babel to transpile this module as well, we can do that by defining the dangerouslyAddModulePathsToTranspile property. It’s very similar to the UI Kittens issue, described here. But instead of @ui-kittens/components, use @codler/react-native-keyboard-aware-scroll-view.

Hope this helps!

[anko2009]

@bycedric solution worked.

1. run expo install @expo/webpack-config
2. create ‘webpack.config.js’ file at the root level, add code below

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

module.exports = async function (env, argv) {
    const config = await createExpoWebpackConfigAsync({
        ...env,
        babel: {
            dangerouslyAddModulePathsToTranspile: ['@codler/react-native-keyboard-aware-scroll-view']
        }
    }, argv);
    return config;
};