3

I am adding a web interface to my react-native mobile application by first converting it a mono-repo using yarn workspaces to create reusable packages for shared code. I use react-native-firebase in the mobile app to capture analytics and to store user profile images. Shared code also captures some analytics. I want to rename the statement

import Firebase from '@react-native-firebase/app

to

import Firebase from 'firebase'

where firebase is the JS NPM module.

Is it possible using a webpack configuration. I am using create-react-app to create the web application and have overridden the webpack config using react-app-rewired and customize-cra and add the following override file

const path = require('path')

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

module.exports = override(
  babelInclude([
    /* transpile (converting to es5) code in src/ and shared component library */
    path.resolve('src'),
    path.resolve('../my-shared'),
    path.resolve('../my-config'),
    path.resolve('../my-res')
  ]),
  addWebpackAlias({
    ['@react- native-firebase/app$']: 'firebase'
  })
)

But this doesn't work. My main objective is to be able to be able to use Firebase in the shared code used by both the mobile app and web app. I also tried using conditional imports to import @react-native-firebase/app in case of mobile and firebase in case of web but that didn't work either.

Please share if you know how I can achieve the above goal.

Varun Gupta
  • 2,870
  • 6
  • 33
  • 73

0 Answers0