Search code examples
javascriptmeteorskel

Skel import in Meteor Project

I'm new working with Meteor, I'm trying to import a javascript file: skel.min.js, skel-layout.min.js and skel-viewport.min.js into a project.

The 3 files are on the client/js path (client/js/skel.min.js, client/js/skel-layout.min.js and client/js/skel-viewport.min.js).

I have the base layout in "client/baseLayout/baseLayout.js" and I deliver as follows:

import angular from 'angular';
import angularMeteor from 'angular-meteor';
import uiRouter from 'angular-ui-router';
import * as skel from '../js/skel.min.js';


(function ($) {
    skel.breakpoints ({
        xlarge: '(max-width: 1680px)',
        large: '(max-width: 1280px)',
        medium: '(max-width: 980px)',
        small: '(max-width: 736px)',
        xsmall: '(max-width: 480px)',
        'xlarge-to-max': '(min-width: 1681px)',
        'small-to-xlarge': '(min-width: 481px) and (max-width: 1680px)'
    });
.
.
.

But it always shows me the following error:

Uncaught ReferenceError: skel is not defined
    at skel-layout.min.js (app.js? hash = e2c356f13dbdbc8f5ea02b405b7c429aff6b8bef: 699)
    at fileEvaluate (modules-runtime.js? hash = 8587d188e038b75ecd27ed2469a52b269e38fb62: 343)
    at require (modules-runtime.js? hash = 8587d188e038b75ecd27ed2469a52b269e38fb62: 238)
    at app.js? hash = e2c356f13dbdbc8f5ea02b405b7c429aff6b8bef: 1157

I tried to move the files but it does not work either.

What am I doing wrong?

My packages:

# Meteor packages used by this project, one per line.
# Check this file (and the other files in this directory) into your repository.
#
# 'meteor add' and 'meteor remove' will edit this file for you,
# but you can also edit it by hand.

[email protected]             # Packages every Meteor app needs to have
[email protected]       # Packages for a great mobile UX
[email protected]                   # The database Meteor supports right now
[email protected] # Compile .html files into Meteor Blaze views
[email protected]            # Reactive variable for tracker
[email protected]                 # Meteor's client-side reactive programming library

[email protected]   # CSS minifier run for production mode
[email protected]    # JS minifier run for production mode
[email protected]                # ECMAScript 5 compatibility for older browsers
[email protected]              # Enable ECMAScript2015+ syntax in app code
[email protected]            # Server-side component of the `meteor shell` command

[email protected]                # Allow all DB writes from clients (for prototyping)
iron:router
twbs:bootstrap
rlespagnol:skeleton-css
johnantoni:meteor-skeleton
jquery
fourseven:scss

to thank

Solution

  • Looks like the issue isn't your code that you posted, but when Meteor eagerly loads files it does two things.

    1. It loads them alphabetically, so skel-layout is running before skel.min which is the error in your console. skel.min needs to run first.
    2. It wraps them in a new closure, so they don't pollute the global namespace.

    In addition to that, because skel.min uses the UMD pattern and Meteor uses common.js, it registers itself with the module loader so it can be called with require(), instead of loading itself onto the window global.

    Looking at the code in the skel repo, skel-layout and skel-viewport doesn't use UMD or attempt to require() or import skel, it just expects it to be available in the current scope.

    In other words. Skel have half-arsed their module pattern.

    Thankfully there's a quick fix. Put all three files in the client/compatibility folder and prefix the names with the load order:

    1-skel.min.js
2-skel-layout.min.js
3-skel-viewport.min.js

    For files in the compatibility folder, Meteor doesn't load them in a new closure and so they can freely pollute the global scope.