Hi all!
I trying plug html theme with bunch /css, /js files, according to doc i created client/compatibility folder in imports/startup and load them by import with the aim to control loading order, but get:
Uncaught SyntaxError: Unexpected token import
please look this screenshot:
What is the correct way to do this?
Alternative attempt: i created package “style”, with
Package.onUse(function(api) {
api.versionsFrom('1.4.3.2');
api.use(['ecmascript','jquery','twbs:bootstrap'],'client');
api.addFiles([
'css/themify-icons.css',
'css/flexslider.css',
'css/lightbox.min.css',
'css/ytplayer.css',
'css/theme.css',
'css/custom.css'], 'client');
api.addAssets('fonts/themify.woff', 'client');
api.addFiles([
'js/flickr.js',
'js/flexslider.min.js',
'js/lightbox.min.js',
// 'js/masonry.min.js',
'js/twitterfetcher.min.js',
'js/spectragram.min.js',
'js/ytplayer.min.js',
'js/countdown.min.js',
'js/smooth-scroll.min.js',
'js/parallax.js'],'client');
api.mainModule('js/scripts.js','client');
api.mainModule('style.js');
});
but no results, some functionality ( fade-in effect between images layers) don’t work, same as in client/compatibility (eagerly load) case. Developer of theme says:
Just make sure the scripts.js file is called last as it initialises the other plugins
in client/compatibility case i renamed scripts.js to main.js, but without result.
Also want to note, that in static HTML page case theme’s functionality works nice.
How can I accurately control, that the scripts.js file will be loaded last?
Any ideas?
thanks in advance 
There are a couple of ways to do this. but the first mistake is that you try to load CSS inside a Javascript file.
create a css file and use css import statements in your specific order.
what you have to offer, equivalent to a regular eagerly load, i’ve already tried it, problem in order, in which the files are loaded
Maybe you can render the theme from server side and manually include them inside your script tags? I know you couldn’t do this in Meteor in the old days, but not sure if anything changed since then regarding server side rendering and code splitting.
In the static html file the order of loading is respected:
<script src="/js/flickr.js"></script>
<script src="/js/flexslider.min.js"></script>
<script src="/js/lightbox.min.js"></script>
<script src="/js/masonry.min.js"></script>
<script src="/js/twitterfetcher.min.js"></script>
<script src="/js/spectragram.min.js"></script>
and so on...
But in the application, it turns out, other laws)
as soon as I implement this html in the app, it will cease to work correctly
Try putting in /client/templates/vendor/example/
You don’t necessarily need to have it in compatibility. Try it, cross fingers. I imported ALL my vendor libs with out problem
your suggestion is like regular eagerly and disorderly loading from /client, but important!: specific scripts.js file must be loaded last!
How to?
In the old meteor files were loaded alphabetically but nowadays I guess you can control load order with import statements. your application needs to be structured this way though.
I showed above screenshot, don’t work, scripts.js not loaded last
Hrm load order. If you NEED a script loaded last, try calling it X_script.js and see if that fixes your issue
Package.onUse(function(api) {
api.versionsFrom('1.4.3.2');
api.use(['ecmascript','jquery','twbs:bootstrap'],'client');
api.addFiles([
'css/themify-icons.css',
'css/flexslider.css',
'css/lightbox.min.css',
'css/ytplayer.css',
'css/theme.css',
'css/custom.css'], 'client');
api.addAssets('fonts/themify.woff', 'client');
api.addFiles([
'js/flickr.js',
'js/flexslider.min.js',
'js/lightbox.min.js',
'js/masonry.min.js',
'js/twitterfetcher.min.js',
'js/spectragram.min.js',
'js/ytplayer.min.js',
'js/countdown.min.js',
'js/smooth-scroll.min.js',
'js/parallax.js'],'client');
api.mainModule('js/X_scripts.js','client');
api.mainModule('foundry.js');
});
no result,
I thought I should try
<link rel="stylesheet" href="/css/themify-icons.css" type="text/css" media="all" />
<link rel="stylesheet" href="/css/flexslider.css" type="text/css" media="all" />
<link rel="stylesheet" href="/css/lightbox.min.css" type="text/css" media="all" />
...........................................
in main.html…