Adding external script in meteor and controlling their load order using es6 imports

help
1

I am learning meteor and working on my first project. I am impressed by its great power but recently i have stumbled upon a problem which could not be solved after hours spent on google and stack overflow.

I have structured my project as advised in the meteor documentation here .

Following is the structure of my project


To control the load order , wrote the following code in imports/startup/client/loader_conf.js

// importing files in the desired order

// loading jquery before materialize
import '../lib/jquery-3.1.0.min.js';

import '../lib/materialize.min.css';
import '../lib/materialize.min.js';

and following code in imports/startup/client/loader_conf.js

import './loader_conf.js';

Then finally to load the complete load configuration as a module in my client side added following line to the top of the eagerly loaded client/main.js

import '/imports/startup/client';

As evident, I drew analogy the the example project structure provided in the doc.

But after doing all this, which looked quite promising, I am getting following errors in the terminal

Unable to resolve some modules:

  "jquery" in                                 
/home/siteflu/VAIBHAV/meteor/demo/imports/startup/lib/materialize.min.js(web.browser)
  "hammerjs" in                               
/home/siteflu/VAIBHAV/meteor/demo/imports/startup/lib/materialize.min.js(web.browser)
  "./picker.js" in                            
/home/siteflu/VAIBHAV/meteor/demo/imports/startup/lib/materialize.min.js(web.browser)

If you notice problems related to these missing modules, consider running:

  meteor npm install --save jquery hammerjs

and in the browser i get the error

Uncaught Error: Cannot find module 'jquery'

even i have checked that $() and jQuery() are working in the console.

I am really confused in this whole file loading and imports thing. After googling a lot, I got to know that there are other ways of achieving the same thing for ex.

  1. Using packages
  2. Keeping the files in public folder and including script tag in the head
  3. Using jquery to load script using Template.onRendered().

but i feel this imports way is better and more standardized way.
Please help me with find the problem in this way.

Thanks in advance.

1 Like
2

Instead of embedding 3rd party scripts into your application yourself, you should first look into installing those libraries from either npm or Meteor’s package system (if available). This will save you from having to worry about integrating these libraries yourself, take care of dependency load order, and will help make it easier to keep them up to date.

So based on your example, one way to fix this would be to:

  1. Remove the following files:
/imports/startup/client/index.js
/imports/startup/client/loader_conf.js
/imports/startup/lib/jquery*
/imports/startup/lib/materialize*
  1. Add the following package:
meteor add materialize:materialize
  1. Don’t worry about installing jquery - it’s already included with Meteor. For example, you can import it in your ES2015 module based code like:
import { $ } from 'meteor/jquery';

All of the above being said, if you really want to embed 3rd party libraries directly into your codebase, then you’ll want to store them in a client/compatibility directory. Files in this directory are excluded from being wrapped in a new variable scope by Meteor. See the Special directories section of the Guide for more info.

3 Likes