working with sammyjs typescript and systemjs

Question

I am trying to create a simple routing application using sammyjs written in Typescript and systemjs as module loader.

However facing issues with loading of sammy.

Below are the code snippets

SystemJs Config

System.config({
  transpiler: "typescript",
  defaultJSExtensions: true,
  map: {
    "knockout": "../bower_components/knockout/dist/knockout",
    "sammy": "../bower_components/sammy/lib/sammy",
    "jquery": "../bower_components/jquery/dist/jquery"
  }
});

Route Provider

import { Route } from "./types";
import * as Sammy from "sammy"

export class RouteProvider {
    sammyApp: Sammy.Application;
    defaultRoute: string;

    constructor() {
  }

  configureRoutes = (routes: Array<Route>) => {        
    this.sammyApp = Sammy(() => {
        routes.map((_route: Route) => {
            this.sammyApp.get('#' + _route.path, (context) => {
                _route.callBack(context);
            });
        })
    });

    this.sammyApp.run('#' + this.defaultRoute);
  }
}

When i initialize the RouteProvider class and call configureRoutes method i am getting below error,

Uncaught TypeError: Sammy is not a function

I checked the network tab in the browser and sammy.js has been loaded. Also I am getting proper type definitions and there is no Typescript compilation error.

You import everything from "sammy" as the Sammy object, your function should be an attribute of that object, not the object itself, i.e. Sammy.someFunction() — Ozrix
– Ozrix, Commented Apr 25, 2016 at 22:13
console.log out what's inside the Sammy object, I'm sure you'll notice what's wrong — Ozrix
– Ozrix, Commented Apr 25, 2016 at 22:23
@Ozrix : i logged the Sammy object in console it is an object, Object {VERSION: "0.7.6", __useDefault: true} , not sure how to use it I looked into sammy [source file[(github.com/quirkey/sammy/blob/master/lib/sammy.js) it seems exported Sammy object is a function — Madhu Ranjan
– Madhu Ranjan, Commented Apr 25, 2016 at 23:21
@Ozrix : i logged the Sammy object in console it is an object, Object {VERSION: "0.7.6", __useDefault: true} , not sure how to use it I looked into sammy [source file[(github.com/quirkey/sammy/blob/master/lib/sammy.js) it seems exported Sammy object is a function – — Madhu Ranjan
– Madhu Ranjan, Commented Apr 26, 2016 at 0:24

Ozrix · Accepted Answer · 2016-04-26 10:06:49Z

0

Okay, it looks like this statement

import * as Sammy from "sammy"

actually converts the function into an object. By doing this instead

Sammy = require("sammy");

it works, i.e. Sammy outputs as a function. Hope this helps.

answered Apr 26, 2016 at 10:06

Ozrix

3,5052 gold badges20 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Madhu Ranjan Over a year ago

requiring sammy as above fails to load module, system.js:4 Uncaught (in promise) Error: Error: Module not already loaded loading "sammy" as localhost:51652/bower_components/sammy/lib/sammy I noted that there is no js extension in the required url I tried to use meta tag to load it as amd, but no luck, meta: { '../bower_components/sammy/lib/sammy': { format: 'amd', exports: 'Sammy', deps: [ 'jquery' ] }

Ozrix Over a year ago

what does your typescript compiler (tsc) configuration look like? You need to use "compilerOptions": { "module": "system" } if you're using tsconfig.js, or tsc --module system

Madhu Ranjan Over a year ago

Here is the tsc options "compilerOptions": { "target": "ES5", "outDir": "dist", "module": "system", "moduleResolution": "node", "sourceMap": false, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false }

Ozrix Over a year ago

sorry, im out of ammo. the require method worked for me, im not sure where to go from here, since your typescript config looks okay

Collectives™ on Stack Overflow

working with sammyjs typescript and systemjs

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related