React-native-web compatibility

[WillyRamirez]

I get a compile error running react-native-web. It's probably because of the relative import. Has anyone encountered this or know a fix?

package.json

 "react-native": "0.64.2",
    "react-native-keyboard-aware-scroll-view": "^0.9.1",
    "react-native-web": "^0.17.1",

ERROR in ./node_modules/react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.js 14:12
Module parse failed: Unexpected token (14:12)
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
| } 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
 @ ./node_modules/react-native-keyboard-aware-scroll-view/index.js 3:0-59 8:0-13:1
 @ ./src/authentication/screens/SignInScreen.js 1:508-558
 @ ./src/Router.js 1:442-490
 @ ./src/App.js 1:227-246
 @ ./index.web.js 1:1019-1039

[chrisgreen1993]

I've got this working on react-native-web, you'll need to add this module to your babel config so that it's compiled, otherwise you'll see the errors above. E.g:

const babelLoaderConfiguration = {
  test: /\.js$/,
  // Add every directory that needs to be compiled by Babel during the build.
  include: [
    path.resolve(appDirectory, 'index.web.js'),
    path.resolve(appDirectory, 'src'),
    path.resolve(appDirectory, 'node_modules/react-native-keyboard-aware-scroll-view') // <-- this bit here
  ],
 use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      // The 'metro-react-native-babel-preset' preset is recommended to match React Native's packager
      presets: ['module:metro-react-native-babel-preset'],
      // Re-write paths to import only the modules needed by the app
      plugins: ['react-native-web']
    }
  }
}

See here for more info: https://necolas.github.io/react-native-web/docs/multi-platform/#compiling-and-bundling