[solved] Can't load 3rd Party Javascript

brawcks · September 23, 2018, 9:39am

Hi,

I’m actually stuck on loading 3rd Party Javascript components into meteor application. I’ve read many forums and topics talking about it, but none of them unlocked me .

I’ve downloaded a free bootstrap template, which i’m trying to use in my project this way :

HTML File : client/main.html

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!-- Tell the browser to be responsive to screen width -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="author" content="">
	<!-- Favicon icon -->
	<link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon.png">
	<title>Matrix Template - The Ultimate Multipurpose admin template</title>
	<!-- Custom CSS -->
	<link href="/assets/libs/flot/css/float-chart.css" rel="stylesheet">
	<!-- Custom CSS -->
	<link href="/dist/css/style.min.css" rel="stylesheet">
	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->
</head>

<body>
	{{> content}}
</body>

<template name="content">
<!-- HTML CODE IS HERE, JUST SHOWING UP JS CALLS -->
<!-- ============================================================== -->
	<!-- End Wrapper -->
	<!-- ============================================================== -->
	<!-- ============================================================== -->
	<!-- All Jquery -->
	<!-- ============================================================== -->
	<script src="/assets/libs/jquery/dist/jquery.min.js"></script>
	<!-- Bootstrap tether Core JavaScript -->
	<script src="/assets/libs/popper.js/dist/umd/popper.min.js"></script>
	<script src="/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
	<script src="/assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
	<script src="/assets/extra-libs/sparkline/sparkline.js"></script>
	<!--Wave Effects -->
	<script src="/dist/js/waves.js"></script>
	<!--Menu sidebar -->
	<script src="/dist/js/sidebarmenu.js"></script>
	<!--Custom JavaScript -->
	<script src="/dist/js/custom.min.js"></script>
	<!--This page JavaScript -->
	<!-- <script src="/dist/js/pages/dashboards/dashboard1.js"></script> -->
	<!-- Charts js Files -->
	<script src="/assets/libs/flot/excanvas.js"></script>
	<script src="/assets/libs/flot/jquery.flot.js"></script>
	<script src="/assets/libs/flot/jquery.flot.pie.js"></script>
	<script src="/assets/libs/flot/jquery.flot.time.js"></script>
	<script src="/assets/libs/flot/jquery.flot.stack.js"></script>
	<script src="/assets/libs/flot/jquery.flot.crosshair.js"></script>
	<script src="/assets/libs/flot.tooltip/js/jquery.flot.tooltip.min.js"></script>
	<script src="/dist/js/pages/chart/chart-page-init.js"></script>
</template>

As you can see, i’m loading assets from public/assets/, directory and public/dist.

My problem is : I’m getting errors i wouldnt have if i wasnt in a meteor app, example below :

Uncaught TypeError: $(…).tooltip is not a function
at HTMLDocument. (custom.min.js:58)
at l (jquery.min.js:1)
at c (jquery.min.js:1)

Don’t know what to do. I’m getting similar errors with every templates… I’m also getting, in some case this error : Uncaught SyntaxError: Unexpected token <.

I absolutely have no solution … Thanks a lot if you can unlock me !

jamgold · September 23, 2018, 3:44pm

I recommend reading the Meteor guide and Blaze docs. Having <script> tags in a Blaze template is not a good idea

alawi · September 23, 2018, 3:50pm

In addition to jamgold response, you see my response to similar issue here. To sum up, ideally those JS files are imported using NPM, if not, they can be included in the body (and not Blaze template) however the order of execution is not ensured, you can use the compatibility folder for those that needs to be executed early and have a global variable scope.

brawcks · September 23, 2018, 3:51pm

Hi,

Thanks everybody for your time. I’ll be looking to the links and be back later to solve or not this topic.

Thanks

coagmano · September 23, 2018, 11:34pm

I suggest trying Alawi’s suggestion of the compatibility folder first.
For script happy templates like this, the compatibility folder is the closest thing to just including script tags

brawcks · September 23, 2018, 11:37pm

Hi coagmano,

This way, should i then just create a compatibility folder inside client, and then only set a template, with all scripts inside, that i call inside my main.html in client directory ?

Thanks in advance

coagmano · September 24, 2018, 1:44am

Don’t put any templates in the compatibility folder

Add the files that would normally be loaded via script tags into this folder and they will automatically be loaded into the html without bundling

Then remove the script tags from your template, because these will already be loaded.

Also note, if you are using Meteor 1.7’s new global lazy-loading (if you have a meteor section in package.json), the compatibility folder won’t work at all.
If that’s the case, it’s probably easiest to remove the section from package.json and use the pre-1.7 loading scheme

cleverbeagle · September 24, 2018, 1:44pm

This post may be of interest: https://cleverbeagle.com/blog/articles/tutorial-how-to-load-third-party-scripts-dynamically-in-javascript.

You could adapt that to just load the necessary JS in the given template’s onCreated method. This way you’d conserve resources by not having to load the files where they’re not required.

Hope it helps Feel free to leave any questions.

brawcks · September 24, 2018, 5:00pm

@coagmano So, i tried putting all the scripts in client/compatibility folder, which as you said seems to load files in Meteor. Perhaps, there’s still a mistake :

Firstly :

I’ve checked “package.json” and removed this part :

,
  "meteor": {
    "mainModule": {
      "client": "client/main.js",
      "server": "server/main.js"
    },
    "testModule": "tests/main.js"
  }

When i reload the app, nothing happen (What should i do next ? do i missed a step ?). I’ve tried also without cutting this part. My app seems to load as it should, but it many things aren’t working (links, charts …), as if they weren’t loaded.

I precise that i renamed jquery file, setting 01jquery.min.js, to be sure in case of alphabetical load order this file would be the first one to be loaded.

@cleverbeagle, i’ve seen your tutorial, perhaps it seems a bit difficult to set it in my app, as i want to allow a modular development between modules. It still seems very interesting in case of some other needs !

@alawi, “ideally those JS files are imported using NPM, if not, they can be included in the body”, i’ve tried so to put my scripts in the body tag, and also in head tag, without implementing them in a blaze template. There’s no changes doing this. I’ve searched for NPM packages, there is some available, but most of them aren’t

brawcks · September 24, 2018, 5:18pm

Woooops, @alawi, dunno what i did bad, but i tried again to load script in body, and this time it’s on the fly ! Thanks for your help everybody, this topic is done