React with Firebase authentication - javascript

I'm trying to set up react with firebase authentication.
There is a problem with the registration page. When I comment out the registration page, my local page renders without any issues. When I uncomment this page, I get an error that says:
npm.js:341 Uncaught TypeError: Cannot read property 'app' of undefined
at new hm (npm.js:341)
at Object.<anonymous> (RegisterPage.js:12)
at __webpack_require__ (bootstrap 5a6a0f74168ebcba0a5a:19)
at Object.defineProperty.value (AppRouter.js:10)
at __webpack_require__ (bootstrap 5a6a0f74168ebcba0a5a:19)
at Object.<anonymous> (app.js:7)
at __webpack_require__ (bootstrap 5a6a0f74168ebcba0a5a:19)
at Object.<anonymous> (bundle.js:50999)
at __webpack_require__ (bootstrap 5a6a0f74168ebcba0a5a:19)
at module.exports (bootstrap 5a6a0f74168ebcba0a5a:62)
I have tried to recreate the minimum part of the app in this code sandbox: https://codesandbox.io/s/6w2r0267kk. However, I am getting an error in code sandbox that says: TypeError - Could not fetch dependencies, please try again in a couple seconds: Failed to fetch. This error takes about 2 hours to appear each time, and has repeated 3 times now. I'm not sure if I'm doing something wrong in trying to use that tool.
Others who have encountered the same error message as me have suggested that 'this' may not be correctly defined: Uncaught TypeError: Cannot read property 'app' of undefined
For me, that const is assigned in row 22. Searching further into that line of enquiry, people note that this is an ES5 expression that should be updated for ES6 - and then leads down a path of reasoning that suggests this isn't a useful method to use in ES6. I'm not sure if trying to figure that out is part of the process toward a solution for me.
When I just use the code sandbox on the Register Page, a syntax error in the return statement that starts at line 78 is indicated, but I can't see what's wrong with that.
Can anyone help with examples of how to get started with Firebase authentication in react (with a pending flag on user sign ups). I didn't write this code myself and struggle to understand the basics at the best of times, so I'd like to try to figure this out as a learning exercise, but if it's not a sound basis, then I'd also appreciate that advice.

The error is because you are not exporting/importing your firebase auth object properly.
Print the auth variable imported on line 4 of RegisterPage.js and you'll see it is undefined:
import { firebase, auth } from "../../firebase/firebase";
Check the path is correct and that the default export from firebase.js has an auth property.

Related

Using Nativescript Filterable ListPIcker plugin with Vue.js in NS 7 app

I am looking to use the following plugin within my Nativescript 7/ Vue.js app:
https://github.com/nstudio/nativescript-plugins/tree/master/packages/nativescript-filterable-listpicker
Can anyone advise on how I can register the component in my app, and what imports are required.
Thank you in advance,
EDIT: Have found the solution. I don't understand how I can do exactly the same thing over and over, and all of a sudden it will work out of the blue....
Just use this:
import FilterableListpicker from "#nstudio/nativescript-filterable-listpicker";
Vue.registerElement("FilterableListpicker", () => require("#nstudio/nativescript-filterable-listpicker").FilterableListpicker);
Remember to also add FilterableListPicker in the components option.
Good luck!
Original answer:
Would love to know the answer to this as I've been trying to fix the error for 2 full days.
I've tried the nstudio (as per the blog post, and above...) and the davecoffin plugin without success.
The davecoffin version gives
Error in render: "TypeError: Class constructor FilterableListpicker cannot be invoked without 'new'"
whereas the nstudio version gives
Error in v-on handler (Promise/async): "TypeError: Cannot read property 'setAttribute' of undefined"

Error (index):74 Uncaught TypeError: Cannot set property 'cmd' of undefined

Hi I'm trying to create an html script tag within a react component and incorporate google ads but getting this
error (index):74 Uncaught TypeError: Cannot set property 'cmd' of
undefined
.
I'm very new to react so this might be a simple fix but not sure what I'm doing wrong. Here is a snapshot of my component GoogleAdUnit code.
GoogleAdUnit Component Code
If you need anymore information please let me know and I can provide it. Thanks in advance!
You are using "googletag" even though you never defined it before, thus it is undefined and you can't use googletag.cmd.

Find cause of AngularJS $injector:strictdi error messages

I'm getting an error message in a fairly complex app, but Angular does not provide a filename or line number indicating where the error was thrown initially. I have gotten used to this with Angular and I've been able to find the cause of errors nonetheless in the past, but not this time. This is the error:
Error: [$injector:strictdi] http://errors.angularjs.org/1.6.1/$injector/strictdi?p0=function(%24compile)
at angular.js:38
at Function.eb.$$annotate (angular.js:4072)
at e (angular.js:4799)
at Object.invoke (angular.js:4834)
at angular.js:7943
at q (angular.js:357)
at Object.<anonymous> (angular.js:7941)
at Object.invoke (angular.js:4842)
at Object.$get (angular.js:4676)
at Object.invoke (angular.js:4842)
We're using $compile in a lot of different places in our app, including a number of third party directives/modules. My question is: is there any way to find the piece of code that's causing this error? I have been searching for '$compile' in my source code, but that gives me so many results that it doesn't really help.
Is there any way to enable better stack traces including my own source, not just AngularJS functions? If this does not exist, I'd like to know it too and I'll have to find another way to fix this, but I hope I'm not missing something here.

Tracking Down the Cause of an Error in React.js

I have an error coming up in React.js that only occurs under very specific circumstances.
When I create the error, an error prints to the JS console in Chrome, but it's not particularly semantic.
What are the best practices, tips, and tricks that you use for tracking down the offending line or function in a React.js context?
The value at line 61 doesn't seem to make a lot of sense due to the 10247 prefix – is this truly referring to line 61 or is this just junk due to a botched source map or something?
Unhandled rejection TypeError: Cannot set property 'value' of undefined
at http://localhost:4000/js/analytics.js:10247:61
at Array.forEach (native)
at http://localhost:4000/js/analytics.js:10246:16
at Array.forEach (native)
at updatePoints (http://localhost:4000/js/analytics.js:10245:29)
at module.exports.createClass.classData.componentWillReceiveProps (http://localhost:4000/js/analytics.js:10195:9)
at 43.ReactCompositeComponentMixin.updateComponent (http://localhost:4000/js/vendor.js:42736:14)
at 82.ReactPerf.measure.wrapper [as updateComponent] (http://localhost:4000/js/vendor.js:49431:21)
at 43.ReactCompositeComponentMixin.receiveComponent (http://localhost:4000/js/vendor.js:42623:10)
at Object.89.ReactReconciler.receiveComponent (http://localhost:4000/js/vendor.js:50301:22)
at Object.__REACT_INSPECTOR_RUNTIME__0_13_1.React.ReactReconciler.receiveComponent (<anonymous>:118:43)
at 43.ReactCompositeComponentMixin._updateRenderedComponent (http://localhost:4000/js/vendor.js:42865:23)
at 43.ReactCompositeComponentMixin._performComponentUpdate (http://localhost:4000/js/vendor.js:42843:10)
at 43.ReactCompositeComponentMixin.updateComponent (http://localhost:4000/js/vendor.js:42759:12)
at 82.ReactPerf.measure.wrapper [as updateComponent] (http://localhost:4000/js/vendor.js:49431:21)
at 43.ReactCompositeComponentMixin.receiveComponent (http://localhost:4000/js/vendor.js:42623:10)
Thanks in advance for your help!
Yupe, split your code into individual files and try using browserify (or webpack) with the debug flag set to true in order to map your big file with a sourcemap and ease the debugging in Chrome and friends.
Check my current stack here:
https://github.com/coma/domno?files=1
It turned out that it was an issue with Reconciliation in React.js.
React essentially uses heuristics to decide what to re-render on updates, and the react-chartjs library wasn't playing well with that.
More information can be found here: https://facebook.github.io/react/docs/reconciliation.html
The fix I used was essentially to clear the state data that is passed into chart and force an update, thus making React re-render the whole element:
this.state.countries = {
labels: []
}
this.forceUpdate()

Uncaught TypeError: Cannot read property 'prototype' of null using Openerp 7.0

I am using Openerp (Version 7.0-20140429-231256). It was working well for a while one bad day I got a below error. And I don't find any reference to solve the exception.
OpenERP Client Error
Uncaught TypeError: Cannot read property 'prototype' of null
http://localhost:8069/web/webclient/js?db=openerp:3268
In process of debug I wanted to get to the root of problem. Some how I observed that there is openerp.init jquery triggers all the modules where its missing most of the modules which are installed..
i.e.
<script type="text/javascript">
$(function() {
var s = new openerp.init(["web", "web_kanban", "base", "base_setup", "process", "base_import", "web_view_editor", "web_calendar", "web_diagram", "board", "web_gantt", "web_graph", "web_tests"]);
var wc = new s.web.WebClient();wc.appendTo($(document.body));
});
</script>
Though I have installed many module like Point of Sale, Ware house management, Mailing etc. Its not included in init function.
I have installed several module available in openerp not community modules. Am not able to move forward with this error. Please help me how I can able to fix this problem.
Thanks In Advance.
I have solved this problem myself.
Though want to share details with you. So that anyone come across same, then this reference might be helpful.
After debugging the code have found that module information are stored in one particular table called ir_module_module, in this table it store the state of module..
i.e.
1. installed
2. uninstalled
3. to remove
So when we start openerp server then it fetch for modules for js to load which are installed state.
But many of modules are in to remove state. So I used update statement for postgressql (which is similar to mysql) to update all to remove to installed
here is update statement which is used to update table.
update ir_module_module set state ='installed' where state='to remove';
**Though I have no idea how in first play module went into to remove state.

Categories

Resources