How to install mailer Lite pop up in the nuxt with this script extern ? Error window is not defined - vuejs2

I want to install this popup on the nuxt.js application
My problem is?
if i want to add this script on my page is not work and the error is window is not defined
How I add this pop up to my applications Nuxt.js?
<!-- MailerLite Universal -->
<script>
(function(m,a,i,l,e,r){ m['MailerLiteObject']=e;function f(){
var c={ a:arguments,q:[]};var r=this.push(c);return "number"!=typeof r?r:f.bind(c.q);}
f.q=f.q||[];m[e]=m[e]||f.bind(f.q);m[e].q=m[e].q||f.q;r=a.createElement(i);
var _=a.getElementsByTagName(i)[0];r.async=1;r.src=l+'?v'+(~~(new Date().getTime()/1000000));
_.parentNode.insertBefore(r,_);})(window, document, 'script', 'https://static.mailerlite.com/js/universal.js', 'ml');
var ml_account = ml('accounts', '3587348', 'o8w2i6n0n5', 'load');
</script>
<!-- End MailerLite Universal -->
take my error
WINDOW IS NOT DEFINED
pages/document.js:16:
Object../pages/document.js
webpack/bootstrap:25:
__webpack_require__
pages/index.js:24:76
Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./pages/index.vue?vue&type=script&lang=js&
webpack/bootstrap:25:
__webpack_require__
webpack/bootstrap:25:
__webpack_require__
pages/index.vue:1:
Module../pages/index.vue
webpack/bootstrap:25:
__webpack_require__
async server.js:2289:21

Related

Error: No Aurelia APIs are defined for the element: "DIV"

I am facing this issue with my newly started app.
Error: No Aurelia APIs are defined for the element: "DIV".
This is the call stack:
getAU webpack:///./node_modules/aurelia-binding/dist/native-modules/aurelia-binding.js?:5384
locateAPI webpack:///./node_modules/aurelia-binding/dist/native-modules/aurelia-binding.js?:5415
createBinding webpack:///./node_modules/aurelia-binding/dist/native-modules/aurelia-binding.js?:5401
applyInstructions webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:2527
create webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:2742
create webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:4449
applyInstructions webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:2521
create webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:2742
create webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:2622
addView webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:1228
_standardProcessInstanceChanged webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:632
instanceChanged webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:564
itemsChanged webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:1137
bind webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:1106
bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3819
bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:1763
_show webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:294
bind webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:333
bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3819
bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:1763
bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3811
bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:1763
addView webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:1229
_standardProcessInstanceChanged webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:632
instanceChanged webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:564
itemsChanged webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:1137
bind webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:1106
bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3819
bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:1763
bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3811
bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:1763
_show webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:294
bind webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:333
bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3819
bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:1763
bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3811
bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:1763
bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3811
bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:1763
bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3811
automate webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3756
_createControllerAndSwap webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:4945
promise callback*_createControllerAndSwap/< webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:4944
promise callback*_createControllerAndSwap webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:4942
compose webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:5044
compose webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:5310
setRoot webpack:///./node_modules/aurelia-framework/dist/native-modules/aurelia-framework.js?:538
configure webpack:///./app/bootstrap.ts?:36
__awaiter webpack:///./app/bootstrap.ts?:12
__awaiter webpack:///./app/bootstrap.ts?:8
configure webpack:///./app/bootstrap.ts?:36
promise callback*configure/< webpack:///./app/bootstrap.ts?:36
__awaiter webpack:///./app/bootstrap.ts?:12
__awaiter webpack:///./app/bootstrap.ts?:8
configure webpack:///./app/bootstrap.ts?:24
config webpack:///./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js?:105
promise callback*config webpack:///./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js?:100
p webpack:///./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js?:136
promise callback*bootstrap webpack:///./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js?:135
run webpack:///./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js?:122
promise callback*run webpack:///./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js?:117
<anonymous> webpack:///./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js?:142
<anonymous> webpack:///./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js?:143
b9nV http://localhost:8080/vendors~._node_modules_an.120e77e838c03acac253.chunk.js:83
__webpack_require__ http://localhost:8080/runtime~app.120e77e838c03acac253.bundle.js:80
<anonymous> webpack:///multi_(webpack)-dev-server/client?:5
0 http://localhost:8080/app~._a.120e77e838c03acac253.chunk.js:10
__webpack_require__ http://localhost:8080/runtime~app.120e77e838c03acac253.bundle.js:80
checkDeferredModules http://localhost:8080/runtime~app.120e77e838c03acac253.bundle.js:46
webpackJsonpCallback http://localhost:8080/runtime~app.120e77e838c03acac253.bundle.js:33
<anonymous> http://localhost:8080/app~._app_mocks-temporary_schema.ts~81270b51.120e77e838c03acac253.chunk.js:1
aurelia-bootstrapper.js:127:16
I researched online but I only found a similar issue here: https://github.com/aurelia/webpack-plugin/issues/181 but it's not related as I don't use webpack 5 but 4.
The last log from aurelia debug is this one:
DEBUG [templating] importing resources for app.html
Array []
My app does not reference a div directly, and is fairly simple. I am using a external libraries (that we also develop) and load as follows:
export async function configure (aurelia: Aurelia): Promise<Aurelia> {
aurelia.use
.standardConfiguration()
.plugin(PLATFORM.moduleName('aurelia-validation'), config => {
config.customValidator(AjvValidator);
})
.plugin(PLATFORM.moduleName('web-shared-components'))
.plugin(PLATFORM.moduleName('web-template-designer'))
.feature(PLATFORM.moduleName('views/index'));
if (debugMode) {
aurelia.use.developmentLogging();
}
return aurelia.start().then(async () => await aurelia.setRoot(PLATFORM.moduleName('app')));
}
This is app.html:
<template>
<designer></designer>
</template>
and the designer.html:
<template>
<template-designer record-type-template.two-way="recordTypeTemplate"
schema.bind="schema"
is-valid.two-way="isValid"
is-dirty.two-way="isDirty"
on-save.call="handleSave()"
on-exit.call="handleExit()"
on-preview.call="handlePreview(requestNewTestData)"></template-designer>
</template>
I'm a bit at a loss as to what could be causing this issue so any guidance is welcome.
Thanks
Found the issue, it was a missing dependency in one of the third parties. Aurelia was not able to resolve a custom tag on one of the template divs.

How can I preview live(on browser) with the hbs format

I use the editor intellij Idea how can I debug an hbs file in the browser, the problem is that the file is displayed but it only shows the code on the page, it does not display the content itself
Handlebars can't be directly executed by the browser, you have to compile them first, like
<!-- Include Handlebars from a CDN -->
<script src="https://cdn.jsdelivr.net/npm/handlebars#latest/dist/handlebars.js"></script>
<script>
// compile the template
var template = Handlebars.compile("Handlebars <b>{{doesWhat}}</b>");
// execute the compiled template and print the output to the console
console.log(template({ doesWhat: "rocks!" }));
</script>
See https://handlebarsjs.com/installation/#installation

ArcGIS Api (Esri) triggering multipleDefine error

I have this weird issue while using ArcGIS API for JavaScript v4.4 in my code. I am trying to build an Excel Web Add-in in which I would like to load an ArcGIS map but when I load ArcGIS I get a multipleDefine error.
ArcGIS is getting bundled with Dojo which is used as the loader for all the ArcGIS/esri packages. I have no other choices to load my own custom JS bundles with Dojo because of the way ArcGIS has built their API. So I can't decide to not use Dojo and thus not getting the multipleDefine error.
I load my own JS files like this:
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
<script>
var dojoConfig = {
parseOnLoad: false,
async: false,
// we make aliases for our js file
aliases:  [
['index',  './Bundles/index.js'],
],
};
</script>
<script src="https://js.arcgis.com/4.4/init.js"></script>
<script>
require(['index'], function (index) {
//...do something
});
</script>
When I restart the page I get a multipleDefine error once in every two/three trials. After a lot of investigation I understood that the error lies with the Office.js API but I had a hard time to find a good solution.
After a while I found the cause of the problem; we cannot start office-js and Dojo together because they both want to add scripts in the head tag of our page and somehow they end up in conflict with one another, thus we get the dreaded multipleDefined Dojo error and some of our files do not get loaded.
Once this cause was identified I decided to solve it by making sure Dojo, Argis and my custom js files got loaded once Office and dependencies were fully loaded.
I implemented it like this in my js code:
// This Dojo config variable has to be defined before Dojo is loaded in our scripts
var dojoConfig = {
// we make aliases for our custom js file
aliases: [
['index', './Bundles/index.js'],
],
// We require our dependencies (our own code bundles) with Dojo.
// Notice that it is mandatory to bundle our js files
// as AMD Modules for Dojo to be able to load them as dependencies.
deps: ['index'],
};
// Once office has fully initialized we can add our arcgis file and let
// him load our own required javascript files.
// We cannot start Office-js and Dojo/Arcgis together because they both
// want to add scripts in the head tag of the HTML page and
// somehow they end up in conflict, thus we get the dreaded
// multipleDefined Dojo error and some of our files
// do not get loaded.
Office.initialize = function (reason) {
// we manually add the Arcgis script to the header of our page
// once we are sure Office and dependencies has fully loaded.
var tag = document.createElement('script');
tag.src = 'https://js.arcgis.com/4.4/init.js';
document.getElementsByTagName('head')[0].appendChild(tag);
};
Once this was added the code started working like a charm.

How do I fix the: React is not defined error?

I am running Meteor release METEOR#1.4.2.3
I recently installed a social media share package via Atmosphere.
meteor add ellisonleao:sharerjs.
You can also read more about it # http://www.ellison.rocks/sharer.js/
My template looks like this:
Template.detail.events({
"click .sharer": function() {
//add new buttons with share behaviour
$('.postedImagesWell').append(<button class="sharer button" data-sharer="facebook" data-url="https://ellisonleao.github.io/sharer.js/">Share on Facebook</button>);
window.Sharer.init();
}
});
Find below the template in code:
<template name="detail">
<div class="postedImagesWell">
<img class = "img-responsive img-rounded postedImages" id = "trial" src="{{this.photo.url}}" alt="thumbnail" >
</template>
when I run click on the Share on Facebook link. I see this error message in my browser:
Uncaught ReferenceError: React is not defined
I have done some research on how to resolve the following issue which resulted in having to install various packages, which have shown to be all futile. I have had to uninstalled the packages.
Any help on how to resolve the issue would be great!

How to trigger $('.button-collapse').sideNav('hide'); in vuejs 2 without jQuery?

I have successfully added the following code which provides me with the sideNav from materialise:
<v-btn-link v-side-nav:side-nav="nav" class="button-collapse btn-flat" id="btn-side-menu"><i class="material-icons">menu</i></v-btn-link>
<v-side-nav id="side-nav" class="hide-on-small">
<a v-on:click="handleNavDashboard()">Dashboard</a>
<a v-on:click="handleLogout()">Logout</a>
</v-side-nav>
and I use the following methods:
methods: {
handleLogout () {
console.log('LOGGED OUT')
this.$store.dispatch('clearAuthUser')
window.localStorage.removeItem('authUser')
this.$router.push({name: 'login'})
},
handleNavDashboard () {
console.log('GOING DASHBOARD')
console.log(this)
this.$router.push({name: 'dashboard'})
}
}
so when I am on the home page and i click Dashboard, I get the dashboard contents on the screen but the sideNav menu and the darkened background are still there. Materialise-css says you can use this function
$('.button-collapse').sideNav('hide');
to hide it progmatically but I don't have jQuery installed. How to I reset the sideNav after a nav click?
CDN
From Materialize docs:
One last thing to note is that you have to import jQuery before
importing materialize.js!
<body>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
NPM
Much better way, install jQuery via npm :
npm install jquery
and use webpack ProvidePlugin to make jQuery global module available in all of your files
here is sample of webpack.config.js file
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
In Vue.js DOM manipulations are encapsulated inside directives, you can use conditional rendering directives v-if or v-show to make this work without using jquery:
jsFiddle example
Also check component framework Vuetify.js that provide clean, semantic and reusable components.
If you want to include jQuery in to a project which is using requires or imports, then you need to make sure it's required and not included using script tags, because it will be outside the scope of the compiled code (unless it was shimmed), so add the following to your project:
ES6 syntax:
import jQuery from 'jquery';
window.$ = window.jQuery = jQuery
ES5 Syntax:
window.$ = window.jQuery = require('jquery');
And make sure you have installed jQuery:
npm install jquery --save-dev
This puts jQuery into the global scope so it can be used site wide. The docs for that package don't really make that clear, and for some reason they don't mention that jQuery is a dependency, but looking at the code it clearly is for some of the components.
If you don't want to use JQuery and Materialize, you can use the directive :v-show="showAside" or :v-if="showAside" with a property like showAside (in data) and handle the value with a click.
There is a very quick and cheap example: https://jsfiddle.net/nosferatu79/p85rw6xz/