Alias an npm module to a different npm module

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.

https://stackoverflow.com/questions/65433152/alias-an-npm-module-to-a-different-npm-module December 24, 2020 at 10:07AM