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.