Use getmdl with React + React Router throw a DOMException - javascript

This is a basic example and you can see the source code here and in action here.
Please, use getmdl branch
git clone -b getmdl https://gitlab.com/problems/react_router_mdl_js.git
When I use mdl-js-layout in two components and try to navigate from one to another component, an exception is throw in the console:
REMEMBER: THE DRAWER SHOULD BE WORK
I try create a react component MdlLayout and call upgradeDom
componentDidUpdate () {
window.componentHandler.upgradeDom()
}
I try to do this manually
componentDidMount () {
const layout = findDOMNode(this.refs.layout)
window.componentHandler.upgradeElement(layout)
}
componentWillUnmount () {
const layout = findDOMNode(this.refs.layout)
window.componentHandler.downgradeElements(layout)
}
But nothing works. I read several articles about that, like this one, this, this and this
Follow the exception
DOMChildrenOperations.js?568f:65 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
at removeChild (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:503:1), <anonymous>:65:14)
at Object.processUpdates (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:503:1), <anonymous>:209:11)
at Object.dangerouslyProcessChildrenUpdates [as processChildrenUpdates] (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:1550:1), <anonymous>:29:27)
at processQueue (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:1690:1), <anonymous>:137:29)
at ReactDOMComponent._updateChildren (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:1690:1), <anonymous>:355:9)
at ReactDOMComponent.updateChildren (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:1690:1), <anonymous>:299:12)
at ReactDOMComponent._updateDOMChildren (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:1522:1), <anonymous>:936:12)
at ReactDOMComponent.updateComponent (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:1522:1), <anonymous>:754:10)
at ReactDOMComponent.receiveComponent (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:1522:1), <anonymous>:716:10)
at Object.receiveComponent (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:286:1), <anonymous>:125:22)
removeChild # DOMChildrenOperations.js?568f:65
processUpdates # DOMChildrenOperations.js?568f:209
dangerouslyProcessChildrenUpdates # ReactDOMIDOperations.js?2d83:29
processQueue # ReactMultiChild.js?9682:137
_updateChildren # ReactMultiChild.js?9682:355
updateChildren # ReactMultiChild.js?9682:299
_updateDOMChildren # ReactDOMComponent.js?ab8a:936
updateComponent # ReactDOMComponent.js?ab8a:754
receiveComponent # ReactDOMComponent.js?ab8a:716
receiveComponent # ReactReconciler.js?399b:125
_updateRenderedComponent # ReactCompositeComponent.js?d2b3:754
_performComponentUpdate # ReactCompositeComponent.js?d2b3:724
updateComponent # ReactCompositeComponent.js?d2b3:645
receiveComponent # ReactCompositeComponent.js?d2b3:547
receiveComponent # ReactReconciler.js?399b:125
_updateRenderedComponent # ReactCompositeComponent.js?d2b3:754
_performComponentUpdate # ReactCompositeComponent.js?d2b3:724
updateComponent # ReactCompositeComponent.js?d2b3:645
receiveComponent # ReactCompositeComponent.js?d2b3:547
receiveComponent # ReactReconciler.js?399b:125
_updateRenderedComponent # ReactCompositeComponent.js?d2b3:754
_performComponentUpdate # ReactCompositeComponent.js?d2b3:724
updateComponent # ReactCompositeComponent.js?d2b3:645
performUpdateIfNecessary # ReactCompositeComponent.js?d2b3:561
performUpdateIfNecessary # ReactReconciler.js?399b:157
runBatchedUpdates # ReactUpdates.js?8e6b:150
perform # Transaction.js?f15f:140
perform # Transaction.js?f15f:140
perform # ReactUpdates.js?8e6b:89
flushBatchedUpdates # ReactUpdates.js?8e6b:172
closeAll # Transaction.js?f15f:206
perform # Transaction.js?f15f:153
batchedUpdates # ReactDefaultBatchingStrategy.js?e9be:62
batchedUpdates # ReactUpdates.js?8e6b:97
dispatchEvent # ReactEventListener.js?944f:147

The problem here is that the upgradeElement and downgradeElement APIs are modifying the DOM element which was generated by React, causing it to throw exceptions in the reconcilitation phase where it tries to replace the view1 route component with view2 route component (or vice-versa). You can check this theory by commenting these APIs calls in MdlLayout.jsx and then there will be no more errors when switching the routes.
Any library which tries to work on the DOM directly doesn't work out of the box with React. For possible workarounds, please read this and this post.
UPDATES:
Here's a fork of your project with the MDL calls commented out, checkout the temp branch from the project and run the code. The router works as expected.
As for manipulation of the DOM, here's a screenshot of your DOM without the MDL calls -
And here's with the upgradeElement call -
Notice that the MDL library is manipulating DOM without React's consent.

Related

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
...

vue2-timepicker package is not working properly in vue.js

I am using the vue2-timepicker js package,
npm install vue2-timepicker --save
after that,I import CSS and datetimepicker component file from node_modules inside my main.js file
//
import CSS file
import 'vue2-timepicker/dist/VueTimepicker.css'
register Vue js component for globally use in the application in main.js file.
import VueTimepicker from 'vue2-timepicker/src/vue-timepicker.vue'
Vue.component('vue-timepicker', VueTimepicker)
3.use inside my component.
<vue-timepicker></vue-timepicker>
here is the render HTML inside the inspect element tab
<span class="vue__time-picker time-picker">
<input type="text" placeholder="HH:mm" tabindex="0" readonly="readonly" autocomplete="off class="display-time is-empty">
<div tabindex="-1" class="dropdown drop-down" style="display: none;">
<div tabindex="-1" class="select-list">
<ul class="hours">
<li class="hint">HH</li>
</ul>
<ul class="minutes">
<li class="hint">mm</li>
</ul>
</div>
</div>
</span>
Problem:
above tag always show a read-only input tag whenever I click on the tag for a select time it shows an error in the console.
[Vue warn]: Error in render: "TypeError: _vm.isDisabled is not a function"
found in
---> <VueTimepicker> at node_modules/vue2-timepicker/src/vue-timepicker.vue
<Home> at src/views/tenants/pages/Home.vue
<Main> at src/layouts/main/Main.vue
<App> at src/App.vue
<Root>
warn # vue.runtime.esm.js?2b0e:619
logError # vue.runtime.esm.js?2b0e:1884
globalHandleError # vue.runtime.esm.js?2b0e:1879
handleError # vue.runtime.esm.js?2b0e:1839
Vue._render # vue.runtime.esm.js?2b0e:3550
updateComponent # vue.runtime.esm.js?2b0e:4066
get # vue.runtime.esm.js?2b0e:4479
run # vue.runtime.esm.js?2b0e:4554
flushSchedulerQueue # vue.runtime.esm.js?2b0e:4310
eval # vue.runtime.esm.js?2b0e:1980
flushCallbacks # vue.runtime.esm.js?2b0e:1906
Promise.then (async)
timerFunc # vue.runtime.esm.js?2b0e:1933
nextTick # vue.runtime.esm.js?2b0e:1990
queueWatcher # vue.runtime.esm.js?2b0e:4402
update # vue.runtime.esm.js?2b0e:4544
notify # vue.runtime.esm.js?2b0e:730
reactiveSetter # vue.runtime.esm.js?2b0e:1055
proxySetter # vue.runtime.esm.js?2b0e:4631
setDropdownState # vue-timepicker.vue?5427:1174
toggleActive # vue-timepicker.vue?5427:1139
onBlur # vue-timepicker.vue?5427:1289
eval # vue-timepicker.vue?5427:1283
setTimeout (async)
debounceBlur # vue-timepicker.vue?5427:1281
blur # vue-timepicker.vue?0d53:38
invokeWithErrorHandling # vue.runtime.esm.js?2b0e:1854
invoker # vue.runtime.esm.js?2b0e:2179
original._wrapper # vue.runtime.esm.js?2b0e:6917
vue.runtime.esm.js?2b0e:1888 TypeError: _vm.isDisabled is not a function
at eval (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"3f0cb218-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/vue2-timepicker/src/vue-timepicker.vue?vue&type=template&id=c4588f32& (chunk-vendors.js:6874), <anonymous>:189:59)
at Proxy.renderList (vue.runtime.esm.js?2b0e:2630)
at eval (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"3f0cb218-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/vue2-timepicker/src/vue-timepicker.vue?vue&type=template&id=c4588f32& (chunk-vendors.js:6874), <anonymous>:180:37)
at Proxy.renderList (vue.runtime.esm.js?2b0e:2630)
at Proxy.render (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"3f0cb218-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/vue2-timepicker/src/vue-timepicker.vue?vue&type=template&id=c4588f32& (chunk-vendors.js:6874), <anonymous>:163:25)
at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3548)
at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4066)
at Watcher.get (vue.runtime.esm.js?2b0e:4479)
at Watcher.run (vue.runtime.esm.js?2b0e:4554)
at flushSchedulerQueue (vue.runtime.esm.js?2b0e:4310)
This vue2-timepicker package works fine. You import the package in the wrong way. You need to import it in the following manner.
import VueTimepicker from "vue2-timepicker";
import "vue2-timepicker/dist/VueTimepicker.css";
Vue.component("vue-timepicker", VueTimepicker);
CodeSandbox

Cannot read property 'call' of undefined from webpackAsyncContext (Webpack error)

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.

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

Loading highcharts with bower and Yeoman gives reference 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?

Categories

Resources