Add react-native-web on existing app using react-native-screens and @react-native-firebase/app

[RimApp]

Hello,

I am trying to use react-native-web on my existing project.

First of all, I have this error : "Failed to compile. ./node_modules/@react-navigation/bottom-tabs/lib/module/views/ResourceSavingScene.js Attempted import error: 'shouldUseActivityState' is not exported from 'react-native-screens'." So I fixed this by followng this : https://github.com/react-navigation/react-navigation/issues/8993#issuecomment-717233195

But now I have this issue : Failed to compile. ./node_modules/@react-native-firebase/app/lib/common/Base64.js Module not found: Can't resolve 'react-native/Libraries/Utilities/binaryToBase64' in 'C:MyProjectPath\node_modules\@react-native-firebase\app\lib\common'

When I open the the Base64.js and replace manually this line import binaryToBase64 from 'react-native/Libraries/Utilities/binaryToBase64'; by import binaryToBase64 from '../../../../react-native/Libraries/Utilities/binaryToBase64';

I got another error this time on this file (same issue that above): Failed to compile. ./node_modules/@react-native-firebase/app/lib/internal/SharedEventEmitter.js Module not found: Can't resolve 'react-native/Libraries/vendor/emitter/EventEmitter' in 'C:\Users\sami.rimani\AgendaClient\node_modules\@react-native-firebase\app\lib\internal'

I cannot manually modify the external libraries because it will hide the real problem and it is just not maintainable. Do you have a solution please?

[necolas]

That module is reaching into unstable React Native internals. You can use a local patch for the library you're using, but ultimately the library itself is not multi-platform.

[RimApp]

That module is reaching into unstable React Native internals. You can use a local patch for the library you're using, but ultimately the library itself is not multi-platform.

react-native-screens or firebase library cannot be used with react-native-web ? Or both ?

[piccinnigius]

@RimApp any fix?

[RimApp]

@RimApp any fix? No :(. I am still searching for a solution

[dalcib]

react-native-screens has some support for web: react-native-screens#461

react-native-firebase does not work on the web. Use Firebase Web SDK instead. https://www.freecodecamp.org/news/react-native-firebase-tutorial/

[RimApp]

After a few days, I finally fixed all my issues, I get a result on the web (no more blank page/errors) even if I still have work to do to make it really look like something.

In summary :

1- Issue with “react-native-screens” :

"Failed to compile. ./node_modules/@react-navigation/bottom-tabs/lib/module/views/ResourceSavingScene.js Attempted import error: 'shouldUseActivityState' is not exported from 'react-native-screens'." Solution: https://github.com/react-navigation/react-navigation/issues/8993#issuecomment-717233195

2- Issue with “@react-native-firebase/app” :

Failed to compile. ./node_modules/@react-native-firebase/app/lib/common/Base64.js Module not found: Can't resolve 'react-native/Libraries/Utilities/binaryToBase64' in 'C:MyProjectPath\node_modules@react-native-firebase\app\lib\common' Solution: Like @dalcib says: Use this package: npm install --save firebase (Instead of: npm install --save @react-native-firebase/app)

3- Issue with “react-native-i18n” :

Cause: https://stackoverflow.com/questions/33264431/react-native-dev-and-prod-variables?answertab=votes#tab-top Solution: In the config file “config-overrides.js” Define the DEV variable:

    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
      __DEV__: process.env.NODE_ENV !== 'production',
    }),
  ]);

My final “config-overrides.js” looks like:

module.exports = function override(config) {
  config.module.rules.push({
    test: /\.(js?)$/,
    use: {
      loader: 'babel-loader',
    },
  });
  config.plugins = (config.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
      __DEV__: process.env.NODE_ENV !== 'production',
    }),
  ]);
  return config;
};

If you prefer you can use this package to define DEV variable: https://github.com/lwd-technology/react-app-rewire-define-plugin

[hungvu193]

Hi @RimApp, thank you so much for your useful information. About react-native-firebase issue, if we use firebase js sdk, how can we use push notification and analytics? Can we use firebase js for web only and react-native-firebase for mobile?

[RimApp]

Hi @RimApp, thank you so much for your useful information. About react-native-firebase issue, if we use firebase js sdk, how can we use push notification and analytics? Can we use firebase js for web only and react-native-firebase for mobile?

Hi @hungvu193 , I'm using firebase js sdk (npm install --save firebase) only and I also use firebase analytics and its works perfectly for my all platforms (iOS, Android and Web). I haven't tried push notification but I think you can use it with no problem.

For your last question, I didn't try this solution because working only with firebase js sdk works for me. Of course, I configured each platform (add the google-services.json file, add a line of code for each platform (Android and iOS folder), configure firebase (apiKey, authDomain etc ...) before to use the firebase object.

If you have any other questions, let me know ;)

[hungvu193]

Thank you so much @RimApp, I will give it a try and let you know.

[hungvu193]

I created 2 files: analytics.js for using react-native-firebase and analytics.web.js for using firebasejs and it worked.

[PrateekGoyal18]

react-native-screens has some support for web: react-native-screens#461

react-native-firebase does not work on the web. Use Firebase Web SDK instead. https://www.freecodecamp.org/news/react-native-firebase-tutorial/

@dalcib what if we have a monorepo for both web and mobile code (reactjs and react-native), then also same error is coming

Failed to compile.
/node_modules/@react-native-firebase/app/lib/common/Base64.js
Module not found: Can't resolve 'react-native/Libraries/Utilities/binaryToBase64' in '\node_modules\@react-native-firebase\app\lib\common'

Can you help me with this ? @RimApp

[DivyatejaChe]

Hey, are you able to solve this? I am facing the same issue as well

ERROR in ./node_modules/react-native/Libraries/Utilities/binaryToBase64.js 15:28 Module parse failed: Unexpected token (15:28) 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 const base64 = require('base64-js'); function binaryToBase64(data: ArrayBuffer | $ArrayBufferView): string { | if (data instanceof ArrayBuffer) { | // $FlowFixMe[reassign-const] @ ./node_modules/@react-native-firebase/app/lib/common/Base64.js 19:0-77 107:14-28 @ ./node_modules/@react-native-firebase/app/lib/common/index.js 18:0-30 26:0-45 26:0-45 40:19-30 @ ./node_modules/@react-native-firebase/dynamic-links/lib/index.js 23:0-62 91:8-13 @ ./src/services/navigation/rootNavigator.js 1:313-360 @ ./App.js 1:421-471 @ ./index.web.js 1:202-218`

[PrateekGoyal18]

@DivyatejaChe no I am still stuck on this issue. For now me and my team are planning to split our mobile and web code so that rn-firebase and firebase dependencies don't clash.

[abdoerrahiem]

any update? I want to use both @react-native-firebase/app and firebase web but got error

[PrateekGoyal18]

@SudhanshuAgrahary I believe as such there is no solution for a monorepo with 2 firebase packages (one for web and other for mobile) because they are kinda incompatible with each other. I would suggest you to decouple them which is what I also did at the end.