react.js foreach variable error - javascript

Why do I get record is not defined in the console? It also doesnt print any value
this.props.records.forEach(function(record){
numbers.push(
<tr key={record.id} >
<td>{record.title}</td>
</tr>)
})
Error in console
Uncaught ReferenceError: record is not definedReact.createClass.onChange # Inline JSX script:137React.createClass.changeHandler # Inline JSX script:82ReactClass.createClass._handleChange # react-with-addons.js:9067executeDispatch # react-with-addons.js:3307forEachEventDispatch # react-with-addons.js:3295executeDispatchesInOrder # react-with-addons.js:3316executeDispatchesAndRelease # react-with-addons.js:2689forEachAccumulated # react-with-addons.js:19368EventPluginHub.processEventQueue # react-with-addons.js:2896runEventQueueInBatch # react-with-addons.js:11161ReactEventEmitterMixin.handleTopLevel # react-with-addons.js:11187handleTopLevelImpl # react-with-addons.js:11273Mixin.perform # react-with-addons.js:18340ReactDefaultBatchingStrategy.batchedUpdates # react-with-addons.js:9613batchedUpdates # react-with-addons.js:16573ReactEventListener.dispatchEvent # react-with-addons.js:11367

Chances are your array contains some undefined values (e.g. [{id: 1}, undefined, {id: 2}]).
console.log(this.props.records);
// or set a debugger statement to inspect the state

Related

Removing firestore from Vue project but retaining firebase auth

I'm switching from Firestore to MongoDB, and I'm now trying to remove references to it in my App.vue file. I'm still using Firebase auth.
Where it says this in the console error:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in beforeMount hook: "FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
My beforeMount() never had App.initializeApp(), and I'm trying to figure out where that needs to go, but nothing is working. I'm really puzzled as to why this one component is not behaving as expected after removing references to Firestore, as all my other components worked fine. Any advice is greatly appreciated.
Full console error:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in beforeMount hook: "FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app)."
found in
---> <Index> at src/components/Index.vue
<App> at src/App.vue
<Root>
warn # vue.runtime.esm.js?2b0e:619
logError # vue.runtime.esm.js?2b0e:1893
globalHandleError # vue.runtime.esm.js?2b0e:1888
handleError # vue.runtime.esm.js?2b0e:1848
invokeWithErrorHandling # vue.runtime.esm.js?2b0e:1871
callHook # vue.runtime.esm.js?2b0e:4235
mountComponent # vue.runtime.esm.js?2b0e:4058
Vue.$mount # vue.runtime.esm.js?2b0e:8459
init # vue.runtime.esm.js?2b0e:3137
merged # vue.runtime.esm.js?2b0e:3322
createComponent # vue.runtime.esm.js?2b0e:6022
createElm # vue.runtime.esm.js?2b0e:5969
patch # vue.runtime.esm.js?2b0e:6560
Vue._update # vue.runtime.esm.js?2b0e:3963
updateComponent # vue.runtime.esm.js?2b0e:4081
get # vue.runtime.esm.js?2b0e:4495
run # vue.runtime.esm.js?2b0e:4570
flushSchedulerQueue # vue.runtime.esm.js?2b0e:4326
eval # vue.runtime.esm.js?2b0e:1989
flushCallbacks # vue.runtime.esm.js?2b0e:1915
Promise.then (async)
timerFunc # vue.runtime.esm.js?2b0e:1942
nextTick # vue.runtime.esm.js?2b0e:1999
queueWatcher # vue.runtime.esm.js?2b0e:4418
update # vue.runtime.esm.js?2b0e:4560
notify # vue.runtime.esm.js?2b0e:730
reactiveSetter # vue.runtime.esm.js?2b0e:1055
eval # vue-router.esm.js?8c4f:2989
eval # vue-router.esm.js?8c4f:2988
updateRoute # vue-router.esm.js?8c4f:2409
eval # vue-router.esm.js?8c4f:2263
eval # vue-router.esm.js?8c4f:2397
step # vue-router.esm.js?8c4f:2001
step # vue-router.esm.js?8c4f:2008
runQueue # vue-router.esm.js?8c4f:2012
eval # vue-router.esm.js?8c4f:2392
step # vue-router.esm.js?8c4f:2001
eval # vue-router.esm.js?8c4f:2005
eval # vue-router.esm.js?8c4f:2379
eval # vue-router.esm.js?8c4f:2127
eval # vue-router.esm.js?8c4f:2203
Promise.then (async)
eval # vue-router.esm.js?8c4f:2150
eval # vue-router.esm.js?8c4f:2171
eval # vue-router.esm.js?8c4f:2171
flatMapComponents # vue-router.esm.js?8c4f:2170
eval # vue-router.esm.js?8c4f:2106
iterator # vue-router.esm.js?8c4f:2357
step # vue-router.esm.js?8c4f:2004
step # vue-router.esm.js?8c4f:2008
runQueue # vue-router.esm.js?8c4f:2012
confirmTransition # vue-router.esm.js?8c4f:2387
transitionTo # vue-router.esm.js?8c4f:2260
init # vue-router.esm.js?8c4f:2980
beforeCreate # vue-router.esm.js?8c4f:1298
invokeWithErrorHandling # vue.runtime.esm.js?2b0e:1863
callHook # vue.runtime.esm.js?2b0e:4235
Vue._init # vue.runtime.esm.js?2b0e:5018
Vue # vue.runtime.esm.js?2b0e:5099
eval # main.js?56d7:30
./src/main.js # app.js:1225
__webpack_require__ # app.js:854
fn # app.js:151
1 # app.js:1262
__webpack_require__ # app.js:854
checkDeferredModules # app.js:46
(anonymous) # app.js:994
(anonymous) # app.js:997
vue.runtime.esm.js?2b0e:1897 FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
at app (index.esm.js?cc84:356:1)
at Object.serviceNamespace [as auth] (index.esm.js?cc84:406:1)
at VueComponent.beforeMount (Index.vue?b484:544:1)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1863:1)
at callHook (vue.runtime.esm.js?2b0e:4235:1)
at mountComponent (vue.runtime.esm.js?2b0e:4058:1)
at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8459:1)
at init (vue.runtime.esm.js?2b0e:3137:1)
at merged (vue.runtime.esm.js?2b0e:3322:1)
at createComponent (vue.runtime.esm.js?2b0e:6022:1)
logError # vue.runtime.esm.js?2b0e:1897
globalHandleError # vue.runtime.esm.js?2b0e:1888
handleError # vue.runtime.esm.js?2b0e:1848
invokeWithErrorHandling # vue.runtime.esm.js?2b0e:1871
callHook # vue.runtime.esm.js?2b0e:4235
mountComponent # vue.runtime.esm.js?2b0e:4058
Vue.$mount # vue.runtime.esm.js?2b0e:8459
init # vue.runtime.esm.js?2b0e:3137
merged # vue.runtime.esm.js?2b0e:3322
createComponent # vue.runtime.esm.js?2b0e:6022
createElm # vue.runtime.esm.js?2b0e:5969
patch # vue.runtime.esm.js?2b0e:6560
Vue._update # vue.runtime.esm.js?2b0e:3963
updateComponent # vue.runtime.esm.js?2b0e:4081
get # vue.runtime.esm.js?2b0e:4495
run # vue.runtime.esm.js?2b0e:4570
flushSchedulerQueue # vue.runtime.esm.js?2b0e:4326
eval # vue.runtime.esm.js?2b0e:1989
flushCallbacks # vue.runtime.esm.js?2b0e:1915
Promise.then (async)
timerFunc # vue.runtime.esm.js?2b0e:1942
nextTick # vue.runtime.esm.js?2b0e:1999
queueWatcher # vue.runtime.esm.js?2b0e:4418
update # vue.runtime.esm.js?2b0e:4560
notify # vue.runtime.esm.js?2b0e:730
reactiveSetter # vue.runtime.esm.js?2b0e:1055
eval # vue-router.esm.js?8c4f:2989
eval # vue-router.esm.js?8c4f:2988
updateRoute # vue-router.esm.js?8c4f:2409
eval # vue-router.esm.js?8c4f:2263
eval # vue-router.esm.js?8c4f:2397
step # vue-router.esm.js?8c4f:2001
step # vue-router.esm.js?8c4f:2008
runQueue # vue-router.esm.js?8c4f:2012
eval # vue-router.esm.js?8c4f:2392
step # vue-router.esm.js?8c4f:2001
eval # vue-router.esm.js?8c4f:2005
eval # vue-router.esm.js?8c4f:2379
eval # vue-router.esm.js?8c4f:2127
eval # vue-router.esm.js?8c4f:2203
Promise.then (async)
eval # vue-router.esm.js?8c4f:2150
eval # vue-router.esm.js?8c4f:2171
eval # vue-router.esm.js?8c4f:2171
flatMapComponents # vue-router.esm.js?8c4f:2170
eval # vue-router.esm.js?8c4f:2106
iterator # vue-router.esm.js?8c4f:2357
step # vue-router.esm.js?8c4f:2004
step # vue-router.esm.js?8c4f:2008
runQueue # vue-router.esm.js?8c4f:2012
confirmTransition # vue-router.esm.js?8c4f:2387
transitionTo # vue-router.esm.js?8c4f:2260
init # vue-router.esm.js?8c4f:2980
beforeCreate # vue-router.esm.js?8c4f:1298
invokeWithErrorHandling # vue.runtime.esm.js?2b0e:1863
callHook # vue.runtime.esm.js?2b0e:4235
Vue._init # vue.runtime.esm.js?2b0e:5018
Vue # vue.runtime.esm.js?2b0e:5099
eval # main.js?56d7:30
./src/main.js # app.js:1225
__webpack_require__ # app.js:854
fn # app.js:151
1 # app.js:1262
__webpack_require__ # app.js:854
checkDeferredModules # app.js:46
(anonymous) # app.js:994
(anonymous) # app.js:997
firebase/db.js;
import firebase from 'firebase';
import 'firebase/firestore';
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
//[removed for privacy]
};
// Initialize Firebase
export const db = firebase.initializeApp(firebaseConfig).firestore();
firebase.analytics();
I seem to have fixed it by changing my config file to:
import firebase from "firebase/app";
import "firebase/auth";
const firebaseConfig = {
//[hidden]
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
// Initialize Firebase Authentication and get a reference to the service
export const auth = firebase.auth();
Then in my App.vue component, I can:
import {auth} from './firebase/db';
And change firebase.auth() ... to just auth. ..., like this:
await auth.signInWithPopup(provider).then(() => {
auth.onAuthStateChanged((user) => {
However in my other components, I can retain the original import firebase from 'firebase'; and firebase.auth() ... and it works without errors. I don't know why this is. Does anyone know why?

Problem by using pouchdb with Vue3 and Quasar2

Get alway the same error when I want to create a localDB with pouchdb
tried to use pouchdb and pouchdb-browser,
also different import options like
import * as PouchDB from 'pouchdb';
import PouchDB from ''pouchdb';
import PouchDB from ''pouchdb-browser';
const PouchDB = require('pouchdb');
nothing works.
as soon I will start my DB with:
const db = new PouchDB('exampleDB');
I get this error below, please help me :-(
wrapper.mjs?8f1a:2 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'v1')
at eval (wrapper.mjs?8f1a:2:1)
at Module../node_modules/uuid/wrapper.mjs (vendor.js:3233:1)
at __webpack_require__ (app.js:173:33)
at fn (app.js:426:21)
at eval (index-browser.es.js:7:62)
at Module../node_modules/pouchdb/lib/index-browser.es.js (vendor.js:2731:1)
at __webpack_require__ (app.js:173:33)
at fn (app.js:426:21)
at setup (TodoList.vue?0d3f:55:1)
at callWithErrorHandling (runtime-core.esm-bundler.js?f781:155:1)
Promise.then (async)
nextTick # runtime-core.esm-bundler.js?f781:246
eval # QResizeObserver.js?3980:65
callWithErrorHandling # runtime-core.esm-bundler.js?f781:155
callWithAsyncErrorHandling # runtime-core.esm-bundler.js?f781:164
hook.__weh.hook.__weh # runtime-core.esm-bundler.js?f781:2667
flushPostFlushCbs # runtime-core.esm-bundler.js?f781:356
flushJobs # runtime-core.esm-bundler.js?f781:401
Promise.then (async)
queueFlush # runtime-core.esm-bundler.js?f781:285
queueJob # runtime-core.esm-bundler.js?f781:279
eval # runtime-core.esm-bundler.js?f781:5139
triggerEffects # reactivity.esm-bundler.js?a27c:359
...

2Checkout Payment Extension Magento Error "'href' of undefined" prototype.js:612:64)

I try to use the 2Checkout Payment Extension Magento I got the error to process Payment the console print like this. Anyone knows the issue.
prototype.js:828 Uncaught TypeError: Cannot set property 'href' of undefined
at eval (eval at <anonymous> (https://example.com/js/prototype/prototype.js:612:64), <anonymous>:4:55)
at https://example.com/js/prototype/prototype.js:612:64
at https://example.com/js/prototype/prototype.js:865:29
at https://example.com/js/prototype/prototype.js:825:18
at Array.forEach (native)
at Array.each (https://example.com/js/prototype/prototype.js:824:12)
at Array.collect (https://example.com/js/prototype/prototype.js:864:10)
at String.evalScripts (https://example.com/js/prototype/prototype.js:612:34)
at Function.<anonymous> (https://example.com/js/prototype/prototype.js:391:23)
at https://example.com/js/prototype/prototype.js:416:23
(anonymous) # VM297:4
(anonymous) # prototype.js:612
(anonymous) # prototype.js:865
(anonymous) # prototype.js:825
each # prototype.js:824
collect # prototype.js:864
evalScripts # prototype.js:612
(anonymous) # prototype.js:391
(anonymous) # prototype.js:416
Finally, I fixed that error. I changed the code on observer.php
It's located in /app/code/local/Craig/Tco/Model / observer.php
under if (Mage::getStoreConfig('payment/tco/inline')
if ($$("a.top-link-cart")) { //old observer.php line 70
I changed this to
if ($$("a.top-link-cart").length) {
and also samething in else
if ($$("a.top-link-cart")) {
to
if ($$("a.top-link-cart").length) {
You can find more about this error on 2Checkout-Magento-Error

Getting a really crypric message in react.js when changing routes

Upon changing my application route via history.replace(PATH), I get this really cryptic error message. The stack shows the error originating in redux's applyMiddleware. I use thunk and redux-promise for middleware.
I've tried tracing the rendering path through each of my components, and my breakpoint never gets to the render method of the state I'm trying to load.
I've also tried updating my npm modules and rebuilding the project.
I'm using React 15.0.2.
ReactReconciler.js:54 Uncaught (in promise) TypeError: Cannot read
property 'getNativeNode' of null(…)getNativeNode #
ReactReconciler.js:54getNativeNode #
ReactCompositeComponent.js:303getNativeNode #
ReactReconciler.js:54updateChildren #
ReactChildReconciler.js:89_reconcilerUpdateChildren #
ReactMultiChild.js:178_updateChildren #
ReactMultiChild.js:271updateChildren #
ReactMultiChild.js:259_updateDOMChildren #
ReactDOMComponent.js:845updateComponent #
ReactDOMComponent.js:691receiveComponent #
ReactDOMComponent.js:647ReactDOMComponent_receiveComponent #
ReactPerf.js:66receiveComponent # ReactReconciler.js:103updateChildren
# ReactChildReconciler.js:85_reconcilerUpdateChildren #
ReactMultiChild.js:178_updateChildren #
ReactMultiChild.js:271updateChildren #
ReactMultiChild.js:259_updateDOMChildren #
ReactDOMComponent.js:845updateComponent #
ReactDOMComponent.js:691receiveComponent #
ReactDOMComponent.js:647ReactDOMComponent_receiveComponent #
ReactPerf.js:66receiveComponent #
ReactReconciler.js:103_updateRenderedComponent #
ReactCompositeComponent.js:661_performComponentUpdate #
ReactCompositeComponent.js:643updateComponent #
ReactCompositeComponent.js:572ReactCompositeComponent_updateComponent
# ReactPerf.js:66receiveComponent #
ReactCompositeComponent.js:495receiveComponent #
ReactReconciler.js:103_updateRenderedComponent #
ReactCompositeComponent.js:661_performComponentUpdate #
ReactCompositeComponent.js:643updateComponent #
ReactCompositeComponent.js:572ReactCompositeComponent_updateComponent
# ReactPerf.js:66receiveComponent #
ReactCompositeComponent.js:495receiveComponent #
ReactReconciler.js:103_updateRenderedComponent #
ReactCompositeComponent.js:661_performComponentUpdate #
ReactCompositeComponent.js:643updateComponent #
ReactCompositeComponent.js:572ReactCompositeComponent_updateComponent
# ReactPerf.js:66receiveComponent #
ReactCompositeComponent.js:495receiveComponent #
ReactReconciler.js:103_updateRenderedComponent #
ReactCompositeComponent.js:661_performComponentUpdate #
ReactCompositeComponent.js:643updateComponent #
ReactCompositeComponent.js:572ReactCompositeComponent_updateComponent
# ReactPerf.js:66performUpdateIfNecessary #
ReactCompositeComponent.js:511performUpdateIfNecessary #
ReactReconciler.js:122runBatchedUpdates # ReactUpdates.js:143perform #
Transaction.js:136perform # Transaction.js:136perform #
ReactUpdates.js:89flushBatchedUpdates #
ReactUpdates.js:165ReactUpdates_flushBatchedUpdates #
ReactPerf.js:66closeAll # Transaction.js:202perform #
Transaction.js:149batchedUpdates #
ReactDefaultBatchingStrategy.js:63enqueueUpdate #
ReactUpdates.js:194enqueueUpdate #
ReactUpdateQueue.js:22enqueueSetState #
ReactUpdateQueue.js:201ReactComponent.setState #
ReactComponent.js:67handleChange # connect.js:301dispatch #
createStore.js:186(anonymous function) # index.js:28(anonymous
function) # index.js:9dispatch # applyMiddleware.js:45
Solved the issue. Turns out it was caused by attempting to map over an array to generate child components in the render method of the component navigated to. I wish the error message were a bit more descriptive.
Also encountered this error. Just like ThinkingInBits, I was mapping over an array creating components. I made a change to the mapping function, leaving one of the variables undefined. This is the error that I kept getting and once I fixed the undefined variable issue, it disappeared. It is quite nasty in the way it is masking the actual problem.

How to debug Joomla Jquery Conflict?

Joomla site works fine everywhere else but only on native article's pages where it keeps stuck and hanged for hours.
here is the google chrome inspector errors
Uncaught TypeError: Cannot read property 'zIndex' of undefined$.fn.caroufredsel.$.fn.carouFredSel.y._cfs_bind_events.y.bind._onafter # VM286:1(anonymous function) # VM286:1m.speed.d.complete # VM178:4m.Callbacks.j # VM178:2m.Callbacks.k.fireWith # VM178:2i # VM178:4m.fx.tick # VM178:4
VM294:2165 Uncaught TypeError: Cannot read property 'loaded' of undefined(anonymous function) # VM294:2165
VM307:20 Uncaught TypeError: Cannot read property '_navigate' of undefinedcircleFlip # VM307:20
VM294:2165 Uncaught TypeError: Cannot read property 'loaded' of undefined(anonymous function) # VM294:2165
VM305:9 Uncaught TypeError: Cannot read property 'container' of undefinedg # VM305:9(anonymous function) # VM305:9m.extend.each # VM178:2m.fn.m.each # VM178:2u # VM305:9(anonymous function) # VM305:9m.extend.each # VM178:2m.fn.m.each # VM178:2e.fn.extend.revredraw # VM305:9(anonymous function) # VM305:9
19VM294:2165 Uncaught TypeError: Cannot read property 'loaded' of undefined(anonymous function) # VM294:2165
VM934:1 Uncaught TypeError: Cannot read property 'zIndex' of undefined$.fn.caroufredsel.$.fn.carouFredSel.y._cfs_bind_events.y.bind._onafter # VM934:1(anonymous function) # VM934:1m.speed.d.complete # VM906:4m.Callbacks.j # VM906:2m.Callbacks.k.fireWith # VM906:2i # VM906:4m.fx.tick # VM906:4
2VM294:2165 Uncaught TypeError: Cannot read property 'loaded' of undefined(anonymous function) # VM294:2165
VM947:20 Uncaught TypeError: Cannot read property '_navigate' of undefinedcircleFlip # VM947:20
8VM945:9 Uncaught TypeError: Cannot read property 'container' of undefinedg # VM945:9(anonymous function) # VM945:9m.extend.each # VM906:2m.fn.m.each # VM906:2u # VM945:9(anonymous function) # VM945:9m.extend.each # VM906:2m.fn.m.each # VM906:2e.fn.extend.revredraw # VM945:9(anonymous function) # VM945:9
2VM294:2165 Uncaught TypeError: Cannot read property 'loaded' of undefined
here is the site link: http://oizix.com/version2/
and if you click on about us
the page stucks?
Thank you for your help!

Categories

Resources