SystemJS: jquery_1.$ is not a function

Question

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?

$("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
– Vincent, Commented Jan 23, 2017 at 21:09
Nope, that shouldn't be an issue, if the selector is wrong just nothing should happen, a error should not occur. — Ognjen Galić
– Ognjen Galić, Commented Jan 23, 2017 at 21:10
right. the selector is an issue, but... that's not what this question is about. — Kevin B
– Kevin B, Commented Jan 23, 2017 at 21:16
Is this related? stackoverflow.com/questions/12763684/… here's another one: stackoverflow.com/questions/40236090/systemjs-loading-jquery — Kevin B
– Kevin B, Commented Jan 23, 2017 at 21:17

Aluan Haddad · Accepted Answer · 2017-04-16 23:18:58Z

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.

edited Apr 16, 2017 at 23:18

answered Apr 16, 2017 at 3:57

Aluan Haddad

32.1k10 gold badges83 silver badges95 bronze badges

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

Collectives™ on Stack Overflow

SystemJS: jquery_1.$ is not a function

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related