Cannot Resolve firebase in my application - reactjs

So I'm developing an app using firebase and react, and when I run npm start to test the app, I get a lot of errors including this
./src/Login.js
Module not found: Can't resolve 'firebase' in '/Users/.../.../.../.../project/src
And this (the full error is too large to show, but here's the end snippet):
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! grpc#1.23.3 install: `node-pre-gyp install --fallback-to-build --library=static_library`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the grpc#1.23.3 install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Here is the import statement in Login.js
import * as firebase from "firebase";
Its important to note that I'm working with friends on this application and they can run this app using npm start without any issues and even build and deploy to firebase hosting using the exact same code I have. In addition, I can run the template React app created via create-react-app without any issue. Because of this, I thought it was either a problem with my NPM install or my Firebase install, so I re-installed both, but that changed nothing. I'm honestly stuck and I would really appreciate any help.

Related

React App fails after deploy to Azure App Service

I build React App and deploy it to Linux Plan at Azure App Service.
I have 2 versions of service at 2 different Service Plans.
After some changes at code, I tried to deploy it to one of the Plans and it can't start/
Locally it works normally.
But at the server I got this message ":( Application Error";
I deploy application by Visual Studio Code but got same problem with Github Actions.
At log files, I found this
Cound not find build manifest file at '/home/site/wwwroot/oryx-manifest.toml'
Could not find operation ID in manifest. Generating an operation id...
Looks strange, because on the second Service Plan I have this file and this version worked.
Second message on logs
npm start
npm info it worked if it ends with ok
npm info using npm#6.14.14
npm info using node#v12.22.4
pm info lifecycle backup-resurge#0.1.0~prestart: backup-resurge#0.1.0
npm info lifecycle backup-resurge#0.1.0~start: backup-resurge#0.1.0
backup-resurge#0.1.0 start /home/site/wwwroot
react-scripts start
/home/site/wwwroot/node_modules/.bin/../node/bin/node: 1: /home/site/wwwroot/node_modules/.bin/../node/bin/node: This: not found
npm info lifecycle backup-resurge#0.1.0~start: Failed to exec start script
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! backup-resurge#0.1.0 start: react-scripts start
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the backup-resurge#0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm timing npm Completed in 1606ms
But I think that's file exists
Does anyone know what I can try to solve this problem?

FirebaseUI Dependency Conflict

I am using FirebaseUI React Components (https://github.com/firebase/firebaseui-web-react) to implement FirebaseUI Auth in a React app, which has previously worked without any issues. However, I recently upgraded Firebase to v9, and now when I try to install FirebaseUI React Components I receive a dependency conflict. Specifically, when I try:
npm install --save react-firebaseui
I receive the error:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: project-js-frontend#0.1.0
npm ERR! Found: firebase#9.1.3
npm ERR! node_modules/firebase
npm ERR! firebase#"^9.1.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer firebase#"^8.2.4" from react-firebaseui#5.0.2
npm ERR! node_modules/react-firebaseui
npm ERR! react-firebaseui#"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
Has anyone else working with FirebaseUI React Components, or FirebaseUI more broadly, encountered this error and found a solution? According to the Firebase docs, v9 is not compatible with FirebaseUI, and the issue I am encountering may be related to the issue here (https://github.com/firebase/firebaseui-web/issues/837) - however, if that's the case, is there any way to make FirebaseUI work after upgrading Firebase to v9?
According to the Firebase docs, v9 is not compatible with FirebaseUI,
...
is there any way to make FirebaseUI work after upgrading Firebase to v9?
If you want to be adventurous and try to get these things working together, you can start with npm i --save firebaseui#next. At the time of this writing, that will install firebaseui#0.600.0 which is presumably a pre-release for firebaseui#6 which is intended to add compatibility with firebase#9.
If you want to be really adventurous, you can try applying the change set at https://github.com/firebase/firebaseui-web/pull/850, but that appears to be undergoing active development (comments as of 3 days ago). Perhaps it will be merged and released in the not-too-distant future and hopefully your issue will be resolved by it.

how to publish a react js website on gitlab

i created a static react js project and i pushed it to git-lab excluding node modules. But now i am not able to publish my website it is showing deploy failed. but the build was successful. i know that i should make some changes to packagejson file but i dont know what all changes to be done. kindly please guide me in this issue
npm ERR! npm bugs my-app
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls my-app
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /builds/Adithyets/react-website/npm-debug.log
Cleaning up file based variables
ERROR: Job failed: exit code 1

How develop node modules locally using npm link in react project

I want to add my custom build botframework-webchat in reactproject
I have tried adding using npm link.I get the following Error
Vostro-270s:~/React/Botframework webchat/chatbot$ npm link ./BotFramework-WebChat-3
npm ERR! code EINVALIDTYPE
npm ERR! typeerror Error: Argument #2: Expected array but got string
npm ERR! typeerror at EventEmitter.install (/usr/local/lib/node_modules/npm/lib/install.js:190:3)
npm ERR! typeerror at Object.commandCache.(anonymous function) (/usr/local/lib/node_modules/npm/lib/npm.js:156:13)
npm ERR! typeerror at /usr/local/lib/node_modules/npm/lib/link.js:93:24
npm ERR! typeerror at /usr/local/lib/node_modules/npm/node_modules/graceful-fs/polyfills.js:282:31
npm ERR! typeerror at FSReqWrap.oncomplete (fs.js:152:21)
npm ERR! typeerror This is an error with npm itself. Please report this error at:
npm ERR! typeerror <https://npm.community>
npm ERR! A complete log of this run can be found in:
npm ERR! /home/.npm/_logs/2019-07-16T11_35_13_546Z-debug.log
I have My BotFramework-WebChat-3 and My React app in a folder.
I'm tring to integrate Microsoft Botframework in my react app.
https://github.com/microsoft/BotFramework-WebChat
* Hard: In your React website, incorporate a custom build of the Web Chat component *
The simplest approach is to clone (or fork) this repo, alter it, build it, then reference your local build in your project's package.json as follows:
dependencies: {
...
'botframework-webchat': 'file:/path/to/your/repo'
...
}
Running npm install will copy your local repo to node_modules, and import/require references to 'botframework-webchat' will resolve correctly.
You may also wish to go so far as to publish your repo as its own full-fledged, versioned npm package using npm version and npm publish, either privately or publicly.
Different projects have different build strategies, yours may vary considerably from the above. If you come up with a different integration approach that you feel would have broad application, please consider filing a pull request for this README.
try run npm link /path/to/your/repo and don't forget to remove node_modules from your custom repo

create-react-app npm run build fail to minify watson node sdk

I am new to React and I am trying to build a react app using create-react-app and Watson node-sdk. Everything works fine in development mode after running npm start. But when I try to build a production package using npm run build and below is the error I receive.
e:\Microsoft\Workspace\React\myapp>npm run build
> myapp#0.1.0 build e:\Microsoft\Workspace\React\myapp
> react-scripts build
Creating an optimized production build...
Failed to compile.
Failed to minify the code from this file:
./node_modules/watson-developer-cloud/lib/helper.js:31
Read more here: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! myapp#0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the myapp#0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional
logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\yk\AppData\Roaming\npm-cache\_logs\2017-09-
20T09_40_36_144Z-debug.log
The line that giving error is let missing; and seems like the let is causing the issue. Is there anything I can do with this?
Encountered this problem today. the doc suggests some solutions:
Open an issue on the dependency's issue tracker and ask that the package be published pre-compiled.
Fork the package and publish a corrected version yourself.
If the dependency is small enough, copy it to your src/ folder and treat it as application code.
Read more here: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify

Resources