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
...
Related
I am trying to follow this React-Admin tutorial by marmelab.com : https://marmelab.com/react-admin/Tutorial.html
After the following setup:
> npm create-react-app test-admin
> cd test-admin/
> npm install react-admin ra-data-json-server prop-types
> npm start
I tried running the following code as mentioned in the tutorial:
// in src/App.js
import * as React from "react";
import { Admin } from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';
const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');
const App = () => <Admin dataProvider={dataProvider} />;
export default App;
This gives me no output and a list of errors as follows:
react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
printWarning # react-dom.development.js:86
error # react-dom.development.js:60
render # react-dom.development.js:29404
./src/index.js # index.js:5
options.factory # react refresh:6
__webpack_require__ # bootstrap:24
(anonymous) # startup:7
(anonymous) # startup:7
react.development.js:1476 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
at resolveDispatcher (react.development.js:1476:1)
at useContext (react.development.js:1484:1)
at CoreAdminContext (CoreAdminContext.js:12:1)
at renderWithHooks (react-dom.development.js:16141:1)
at mountIndeterminateComponent (react-dom.development.js:20838:1)
at beginWork (react-dom.development.js:22342:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4157:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4206:1)
at invokeGuardedCallback (react-dom.development.js:4270:1)
at beginWork$1 (react-dom.development.js:27243:1)
resolveDispatcher # react.development.js:1476
useContext # react.development.js:1484
CoreAdminContext # CoreAdminContext.js:12
renderWithHooks # react-dom.development.js:16141
mountIndeterminateComponent # react-dom.development.js:20838
beginWork # react-dom.development.js:22342
callCallback # react-dom.development.js:4157
invokeGuardedCallbackDev # react-dom.development.js:4206
invokeGuardedCallback # react-dom.development.js:4270
beginWork$1 # react-dom.development.js:27243
performUnitOfWork # react-dom.development.js:26392
workLoopSync # react-dom.development.js:26303
renderRootSync # react-dom.development.js:26271
performSyncWorkOnRoot # react-dom.development.js:25924
flushSyncCallbacks # react-dom.development.js:11982
flushSync # react-dom.development.js:26040
legacyCreateRootFromDOMContainer # react-dom.development.js:29309
legacyRenderSubtreeIntoContainer # react-dom.development.js:29335
render # react-dom.development.js:29419
./src/index.js # index.js:5
options.factory # react refresh:6
__webpack_require__ # bootstrap:24
(anonymous) # startup:7
(anonymous) # startup:7
react-dom.development.js:18525 The above error occurred in the <CoreAdminContext> component:
at CoreAdminContext (http://localhost:3000/static/js/bundle.js:92536:28)
at AdminContext
at Admin (http://localhost:3000/static/js/bundle.js:102485:25)
at App
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError # react-dom.development.js:18525
update.callback # react-dom.development.js:18558
callCallback # react-dom.development.js:13092
commitUpdateQueue # react-dom.development.js:13113
commitLayoutEffectOnFiber # react-dom.development.js:23204
commitLayoutMountEffects_complete # react-dom.development.js:24461
commitLayoutEffects_begin # react-dom.development.js:24447
commitLayoutEffects # react-dom.development.js:24385
commitRootImpl # react-dom.development.js:26651
commitRoot # react-dom.development.js:26517
performSyncWorkOnRoot # react-dom.development.js:25956
flushSyncCallbacks # react-dom.development.js:11982
flushSync # react-dom.development.js:26040
legacyCreateRootFromDOMContainer # react-dom.development.js:29309
legacyRenderSubtreeIntoContainer # react-dom.development.js:29335
render # react-dom.development.js:29419
./src/index.js # index.js:5
options.factory # react refresh:6
__webpack_require__ # bootstrap:24
(anonymous) # startup:7
(anonymous) # startup:7
react.development.js:1476 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
at resolveDispatcher (react.development.js:1476:1)
at useContext (react.development.js:1484:1)
at CoreAdminContext (CoreAdminContext.js:12:1)
at renderWithHooks (react-dom.development.js:16141:1)
at mountIndeterminateComponent (react-dom.development.js:20838:1)
at beginWork (react-dom.development.js:22342:1)
at beginWork$1 (react-dom.development.js:27219:1)
at performUnitOfWork (react-dom.development.js:26392:1)
at workLoopSync (react-dom.development.js:26303:1)
at renderRootSync (react-dom.development.js:26271:1)
resolveDispatcher # react.development.js:1476
useContext # react.development.js:1484
CoreAdminContext # CoreAdminContext.js:12
renderWithHooks # react-dom.development.js:16141
mountIndeterminateComponent # react-dom.development.js:20838
beginWork # react-dom.development.js:22342
beginWork$1 # react-dom.development.js:27219
performUnitOfWork # react-dom.development.js:26392
workLoopSync # react-dom.development.js:26303
renderRootSync # react-dom.development.js:26271
performSyncWorkOnRoot # react-dom.development.js:25924
flushSyncCallbacks # react-dom.development.js:11982
flushSync # react-dom.development.js:26040
legacyCreateRootFromDOMContainer # react-dom.development.js:29309
legacyRenderSubtreeIntoContainer # react-dom.development.js:29335
render # react-dom.development.js:29419
./src/index.js # index.js:5
options.factory # react refresh:6
__webpack_require__ # bootstrap:24
(anonymous) # startup:7
(anonymous) # startup:7
I am sure I am following the tutorial correctly.
Does this have anything to do with conflicting versions?
How do I fix this issue and continue with the tutorial?
My React version:
$ npm view react version
18.0.0
React 18 no longer supports ReactDOM.render, as they have replaced it with createRoot.
You can learn more about it here: React v18.0
You can continue with the tutorial by just downgrading to React 17:
npm install --save react#17.0.2 react-dom#17.0.2
You must change index.js file.
import ReactDom from 'react-dom/client'
const root = ReactDOM.creatorRoot(document.getElementById('root'));
root.render(<App/>);
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?
I am getting the following error for certain pages on my website. It is related to Webpack.
TypeError: Cannot read property 'call' of undefined
Why is this error happening?
The stack trace doesn't show any of my code. It is happening in Webpack code:
function webpackAsyncContext(e) {
if (!n.o(r, e))
return Promise.resolve().then((function() {
var t = new Error("Cannot find module '" + e + "'");
throw t.code = "MODULE_NOT_FOUND",
t
}
));
var t = r[e]
, o = t[0];
return Promise.all(t.slice(1).map(n.e)).then((function() {
return n(o) // <---- ERROR HAPPENING HERE
}
))
}
UPDATE 1:
Error stacktrace is as follows:
main-client.js?v=HBU…YpSTrLMew46Jy0:1644 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'call' of undefined
TypeError: Cannot read property 'call' of undefined
at __webpack_require__ (main-client.js?v=HBU…HNYpSTrLMew46Jy0:20)
at main-client.js?v=HBU…pSTrLMew46Jy0:38946
at ZoneDelegate.invoke (main-client.js?v=HBU…pSTrLMew46Jy0:39643)
at Object.onInvoke (main-client.js?v=HBU…YpSTrLMew46Jy0:7197)
at ZoneDelegate.invoke (main-client.js?v=HBU…pSTrLMew46Jy0:39643)
at Zone.run (main-client.js?v=HBU…pSTrLMew46Jy0:39537)
at main-client.js?v=HBU…pSTrLMew46Jy0:40017
at ZoneDelegate.invokeTask (main-client.js?v=HBU…pSTrLMew46Jy0:39656)
at Object.onInvokeTask (main-client.js?v=HBU…YpSTrLMew46Jy0:7189)
at ZoneDelegate.invokeTask (main-client.js?v=HBU…pSTrLMew46Jy0:39656)
at resolvePromise (main-client.js?v=HBU…pSTrLMew46Jy0:39975)
at resolvePromise (main-client.js?v=HBU…pSTrLMew46Jy0:39952)
at main-client.js?v=HBU…pSTrLMew46Jy0:40018
at ZoneDelegate.invokeTask (main-client.js?v=HBU…pSTrLMew46Jy0:39656)
at Object.onInvokeTask (main-client.js?v=HBU…YpSTrLMew46Jy0:7189)
at ZoneDelegate.invokeTask (main-client.js?v=HBU…pSTrLMew46Jy0:39656)
at Zone.runTask (main-client.js?v=HBU…pSTrLMew46Jy0:39568)
at drainMicroTaskQueue (main-client.js?v=HBU…pSTrLMew46Jy0:39754)
defaultErrorLogger # main-client.js?v=HBU…YpSTrLMew46Jy0:1644
ErrorHandler.handleError # main-client.js?v=HBU…YpSTrLMew46Jy0:1663
next # main-client.js?v=HBU…YpSTrLMew46Jy0:7472
i # main-client.js?v=HBU…YpSTrLMew46Jy0:6748
SafeSubscriber.__tryOrUnsub # main-client.js?v=HBU…pSTrLMew46Jy0:27250
SafeSubscriber.next # main-client.js?v=HBU…pSTrLMew46Jy0:27224
Subscriber._next # main-client.js?v=HBU…pSTrLMew46Jy0:27204
Subscriber.next # main-client.js?v=HBU…pSTrLMew46Jy0:27196
Subject.next # main-client.js?v=HBU…pSTrLMew46Jy0:36275
EventEmitter.emit # main-client.js?v=HBU…YpSTrLMew46Jy0:6735
(anonymous) # main-client.js?v=HBU…YpSTrLMew46Jy0:7207
ZoneDelegate.invoke # main-client.js?v=HBU…pSTrLMew46Jy0:39643
Zone.run # main-client.js?v=HBU…pSTrLMew46Jy0:39537
NgZone.runOutsideAngular # main-client.js?v=HBU…YpSTrLMew46Jy0:7232
onHandleError # main-client.js?v=HBU…YpSTrLMew46Jy0:7206
ZoneDelegate.handleError # main-client.js?v=HBU…pSTrLMew46Jy0:39645
Zone.runGuarded # main-client.js?v=HBU…pSTrLMew46Jy0:39550
_loop_1 # main-client.js?v=HBU…pSTrLMew46Jy0:39890
Zone.__load_patch.n.microtaskDrainDone # main-client.js?v=HBU…pSTrLMew46Jy0:39896
drainMicroTaskQueue # main-client.js?v=HBU…pSTrLMew46Jy0:39760
Promise.then (async)
scheduleMicroTask # main-client.js?v=HBU…pSTrLMew46Jy0:39741
ZoneDelegate.scheduleTask # main-client.js?v=HBU…pSTrLMew46Jy0:39652
onScheduleTask # main-client.js?v=HBU…pSTrLMew46Jy0:39617
ZoneDelegate.scheduleTask # main-client.js?v=HBU…pSTrLMew46Jy0:39648
Zone.scheduleTask # main-client.js?v=HBU…pSTrLMew46Jy0:39586
Zone.scheduleMicroTask # main-client.js?v=HBU…pSTrLMew46Jy0:39592
scheduleResolveOrReject # main-client.js?v=HBU…pSTrLMew46Jy0:40011
resolvePromise # main-client.js?v=HBU…pSTrLMew46Jy0:39971
(anonymous) # main-client.js?v=HBU…pSTrLMew46Jy0:39928
webpackJsonpCallback # main-client.js?v=HBU…YHNYpSTrLMew46Jy0:5
(anonymous) # 0.js:formatted:1
UPDATE 2:
Error stacktrace after upgrading from Angular 7.2 to 9.1. Still the same issue.
ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'call' of undefined
TypeError: Cannot read property 'call' of undefined
at __webpack_require__ (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:24)
at Module.280 (3.js:1)
at __webpack_require__ (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:24)
at main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:57250
at ZoneDelegate.invoke (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:58417)
at Object.onInvoke (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:13800)
at ZoneDelegate.invoke (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:58417)
at Zone.run (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:58227)
at main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:58839
at ZoneDelegate.invokeTask (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:58440)
at resolvePromise (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:58793)
at resolvePromise (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:58761)
at main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:58840
at ZoneDelegate.invokeTask (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:58440)
at Object.onInvokeTask (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:13791)
at ZoneDelegate.invokeTask (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:58440)
at Zone.runTask (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:58267)
at drainMicroTaskQueue (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:58572)
UPDATE 3:
It has something to do with lazy loading. When I changed it to default loading (importing modules directly), it worked. (I have also updated hrefs and replaced them with routerLink.)
Right now, it has default loading.
I'm going to write an answer because it's too long as a comment. I suspect that this is because of the service worker.
I can reproduce your issue by navigating to the food link, or another link after having the page rendered once. I then have a blank page with the same error.
If before navigating to another page I unregister the service worker, the navigation works successfully.
To test and disable the service worker, open chrome's debugger, go to the Application tab, then click Service Workers on the left, and then click unregister on the right.
You'll need to activate source maps to identify the exact error, but I tracked it down to the line 279 (once formatted) of the file 3.js.
ForumSubforumFormComponent
}()
, F = o(294) // <=== error here
, C = function() {
function Topic(t) {
this.contentItem = t,
When service worker is registered, F is a function
console.log(F)
ƒ hooks(){return a.apply(null,arguments)}
When the service worker is registered, o(294) throws an error, probably because it's not included in webpack.
When looking at the requested files in the network tab, it looks like there are 2 different version of the main-client.js file that are requested (depending on wether the page has been requested by the browser or the service worker).
This might be the cause of the issue.
Also service workers can only be registered using HTTPS, which would explain why the problem did not occur before using http. Testing http on your website is not possible anymore, since there is a 307 redirection to https.
Note As indicated in one of the comments, the navigation is a bit weird on your website.. it refreshes the whole page everytime you navigate. Also, angular universal does not seem to always render
In the terms and conditions you reference the AuthService and PageService.
I don't find where they are declared. This one i.e. could miss the AuthService:
https://github.com/jasebanico/banicocms/blob/master/src/Banico.Web/ClientApp/app/shared/shared.module.ts
Or this one the PageService:
https://github.com/jasebanico/banicocms/blob/master/src/Banico.Web/ClientApp/app/plugins/modules/page/page.module.ts
Alternatively you could use
#Injectable with providedIn
Does this help?
Otherwise I find it a bit hard to debug.
So I'd suggest using ng new to create a new project structure (you can add options to ignore the creation of the git repo) and merge your code into. This way you don't have to deal with adapting webpack and so on when doing upgrades.
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
I have a highcharts graph that works fine as a stand alone HTML document.
When I try to integrate it into my web application infrastructure generated by Yeoman I get an error:
ReferenceError: Highcharts is not defined
at HTMLDocument.eval (eval at <anonymous> (http://localhost:9000/bower_components/jquery/dist/jquery.js:343:5), <anonymous>:3:5)
at fire (http://localhost:9000/bower_components/jquery/dist/jquery.js:3187:31)
at Object.self.add [as done] (http://localhost:9000/bower_components/jquery/dist/jquery.js:3246:7)
at jQuery.fn.ready (http://localhost:9000/bower_components/jquery/dist/jquery.js:3496:25)
at jQuery.fn.init (http://localhost:9000/bower_components/jquery/dist/jquery.js:2927:10)
at jQuery (http://localhost:9000/bower_components/jquery/dist/jquery.js:75:10)
at eval (eval at <anonymous> (http://localhost:9000/bower_components/jquery/dist/jquery.js:343:5), <anonymous>:1:1)
at eval (native)
at Function.jQuery.extend.globalEval (http://localhost:9000/bower_components/jquery/dist/jquery.js:343:5)
at domManip (http://localhost:9000/bower_components/jquery/dist/jquery.js:5290:15) <div ng-view="" class="ng-scope" data-ng-animate="1">(anonymous function) # angular.js:13550(anonymous function) # angular.js:10225invokeLinkFn # angular.js:9696nodeLinkFn # angular.js:9093compositeLinkFn # angular.js:8397publicLinkFn # angular.js:8277lazyCompilation # angular.js:8615boundTranscludeFn # angular.js:8414controllersBoundTransclude # angular.js:9143update # angular-route.js:968Scope.$broadcast # angular.js:17552(anonymous function) # angular-route.js:643processQueue # angular.js:15961(anonymous function) # angular.js:15977Scope.$eval # angular.js:17229Scope.$digest # angular.js:17045Scope.$apply # angular.js:17337done # angular.js:11572completeRequest # angular.js:11778requestLoaded # angular.js:11711
exporting.js?_=1461240740374:9 Uncaught ReferenceError: Highcharts is not defined
On the stand alone document the header file looks like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
I'm using the same header file in my Yeoman web application view, but Bower seems to default to a different version of Jquery, and I get that error.
How can I solve this?