3

I'm using react-native-web and native-base to build an app (bootstrapped by CRA-typescript template) and the following error is thrown on the compilation. I have followed the exact same steps mentioned in the official docs of native-base setup with web.
I would prefer not to downgrade the version of native-base/react-native-web.
Error Description:

    ./node_modules/@codler/react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.js
SyntaxError: \nativebase-app\node_modules\@codler\react-native-keyboard-aware-scroll-view\lib\KeyboardAwareHOC.js: Unexpected token (13:12)

  11 | } from 'react-native'
  12 | import { isIphoneX } from 'react-native-iphone-x-helper'
> 13 | import type { KeyboardAwareInterface } from './KeyboardAwareInterface'
     |             ^
  14 |
  15 | const _KAM_DEFAULT_TAB_BAR_HEIGHT: number = isIphoneX() ? 83 : 49
  16 | const _KAM_KEYBOARD_OPENING_TIME: number = 250


My package.json

    {
  "name": "nativebase-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "customize-cra": "^1.0.0",
    "native-base": "^2.15.2",
    "react": "^17.0.1",
    "react-app-rewired": "^2.1.8",
    "react-art": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-native-keyboard-aware-scroll-view": "^0.9.3",
    "react-native-vector-icons": "^8.1.0",
    "react-native-web": "^0.15.0",
    "react-scripts": "4.0.3",
    "typescript": "^4.1.2",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  ...rest config
}


config-overrides.js

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

module.exports = override(
  addWebpackAlias({
    "react-native/Libraries/Renderer/shims/ReactNativePropRegistry": "react-native-web/dist/modules/ReactNativePropRegistry",
    "react-native": "react-native-web"
  }),
  babelInclude([
    path.resolve('src'),
    path.resolve('node_modules/native-base-shoutem-theme'),
    path.resolve('node_modules/react-navigation'),
    path.resolve('node_modules/react-native-easy-grid'),
    path.resolve('node_modules/react-native-drawer'),
    path.resolve('node_modules/react-native-safe-area-view'),
    path.resolve('node_modules/react-native-vector-icons'),
    path.resolve('node_modules/react-native-keyboard-aware-scroll-view'),
    path.resolve('node_modules/react-native-web'),
    path.resolve('node_modules/react-native-tab-view'),
    path.resolve('node_modules/static-container'),
  ]),
  addBabelPlugins(
    "@babel/plugin-proposal-class-properties"
  ),
);
Nirmit Agarwal
  • 289
  • 1
  • 6
  • I have the very same problem. For me it even seems like config-overrides.js is not even loaded. At least I cannot produce any errors in case the file contents is just nonsense. See also https://github.com/GeekyAnts/NativeBase/issues/3231 – gorootde Apr 09 '21 at 12:15

0 Answers0