0

I'm in the process of learning systemjs and the whole ES6 module backporting to older browsers.

As a educational piece i'm trying just to load jquery and do a simple "Hello world!" using alert()

Now, I got systemjs running up to a point where it loads typescript and jquery but is failing a few seconds after the page loads with the following error:

Error: (SystemJS) jquery_1.$ is not a function
    TypeError: jquery_1.$ is not a function
        at execute (http://localhost/webpMain/main.js!transpiled:12:22)
    Error loading http://localhost/webpMain/main.js
        at execute (http://localhost/webpMain/main.js!transpiled:12:22)
    Error loading http://localhost/webpMain/main.js

The page is just a huge red box, and if it gets clicked it's supposed to just alert "Hello world".

This is the markup:

<!DOCTYPE html>
<html lang="us">
    <head>
        <title>SystemJS Test</title>
        <script src="node_modules\systemjs\dist\system.js"></script>
        <script src="system.config.js"></script>
        <style>
            #box {
                width: 300px;
                height: 300px;
                position: absolute;
                background: red;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
    </body>
    <script>

        System.import("app")
        .catch(function(err) {
            console.log(err);
        });

    </script>
</html>

The systemjs configuration file:

System.config({

    paths: {
        "npm:*": "node_modules/*"
    },

    map: {
        app: 'webpMain',
        'typescript': 'npm:typescript/lib/typescript.js',
        'jquery': 'npm:jquery/dist/jquery.min.js'
    },

    packages: {
        app: {
            main: 'main.js'
        }
    },

    transpiler: 'typescript',

});

And the main.js

import { $ } from "jquery";

$("box").click(function() {
    alert("Hello world!!");
});
  • Any ideas why the jquery import is not working?
  • What is displaying that error, typescript or systemjs?
Gala
  • 2,592
  • 3
  • 25
  • 33
  • 1
    $("box").click(function() { alert("Hello world!!"); }); I think it should be: `$("#box")` since box is an id. I never used systemjs so I'm not sure if – Vincent Jan 23 '17 at 21:09
  • Nope, that shouldn't be an issue, if the selector is wrong just nothing should happen, a error should not occur. – Gala Jan 23 '17 at 21:10
  • right. the selector is an issue, but... that's not what this question is about. – Kevin B Jan 23 '17 at 21:16
  • Is this related? http://stackoverflow.com/questions/12763684/how-to-require-jquery-via-amd-in-typescript here's another one: http://stackoverflow.com/questions/40236090/systemjs-loading-jquery – Kevin B Jan 23 '17 at 21:17

1 Answers1

0

The correct code is

import $ from "jquery";

$("box").click(function() {
  alert("Hello world!!");
});

jQuery does not export anything named $.

Also since you are transpiling with TypeScript, your package config should look like 

packages: {
  app: {
    main: 'main.ts',
    defaultExtension: 'ts'
  }
}

Currently you are transpiling twice.

Aluan Haddad
  • 29,886
  • 8
  • 72
  • 84