2

I am working my way through Eric Elliott’s book Programming JavaScript Applications. In it he uses stampit.js (https://github.com/stampit-org/stampit). I downloaded stampit.js and tried to use it with the book's examples, but I’m getting nowhere. Whenever I try to load stampit.js from a script tag, all browsers report “unexpected reserved word” on the very first line: “import forEach from 'lodash/collection/forEach’;” I also get the same error from the command line with qunit.

I’m clearly missing something. I’ve tried to run the tests that come with stampit 2.1.0 and they fail with the same error:

$ cd ~/Downloads/stampit-2.1.0/test
$ qunit -c init.js -t init.js

Testing  /Users/thad/Downloads/stampit-2.1.0/test/init.js ...  {
[Error: /Users/thad/Downloads/stampit-2.1.0/test/init.js:1 (function
(exports, require, module, __filename, __dirname) { import stampit f
                                                    ^^^^^^ Unexpected reserved word]   message:
'/Users/thad/Downloads/stampit-2.1.0/test/init.js:1\n(function
(exports, require, module, __filename, __dirname) { import stampit f\n
                                                    ^^^^^^\nUnexpected reserved word' }

Can someone tell me what I’m doing wrong?

Thad
  • 898
  • 13
  • 24

2 Answers2

3

Stampit is now written using ES6, most of which is not yet supported by all major browsers.

The import command (in your error message) is part of the ES6/ES2015 spec and isn't necessarily supported by all relevant browsers yet...

Unless you are using a transpiler, you will need to find an earlier (ES5 compatible) version of the stampit library.

sfletche
  • 47,248
  • 30
  • 103
  • 119
  • Yes. Unfortunately the book has zero on how to use stampit for the examples. I've gotten something to work by going back to 0.7.1, copying some files from its test directory--jquery.js, stampit.js, qunit.js, and qunit.css--and mimicking its index.html. I don't like that. Worse is that Ch 4, Modules, seems heavily dependent on stampit.js. Sigh... I may this aside for a while. – Thad Jul 26 '15 at 12:01
  • I've had no luck with the babel transpilier, either. I downloaded the latest stampit.js, ran `babel stampit.js > stampit-es5.js`, and referenced the ES5 file. I get "Uncaught ReferenceError: exports is not defined" on line #11 in my Chrome console. BTW, this is the same error you get if you reference https://cdnjs.cloudflare.com/ajax/libs/stampit/2.1.0/stampit.js vs transpiling it yourself. – Thad Jul 26 '15 at 12:56
1

I figured it out, wrote up up, and submitted it to the project. The answer is here: https://github.com/stampit-org/stampit/blob/master/docs/pjabook-updated-examples.md

(The edit/addition below was requested by ChrisF. Sorry, my bad not to have included it before.)

The book's sample code uses Stampit 1.X. To load the examples in your browser, you need to include the Stampit 1.X script in your HTML page (you also require the QUnit script and CSS):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Programming JavaScript Applications</title>
  <link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.18.0.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
  <script src="//code.jquery.com/qunit/qunit-1.18.0.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/stampit/1.2.0/stampit.min.js"></script>
  <script src="example.js"></script>
</body>
</html>

Type or copy the example into example.js, and load the HTML in your browser for QUnit to display the test results.

Stampit 2.X

In order to run the book's examples with Stampit 2.X, you must

  1. Change the Stampit script source from src="//cdnjs.cloudflare.com/ajax/libs/stampit/1.2.0/stampit.min.js" to src="//cdnjs.cloudflare.com/ajax/libs/stampit/2.1.0/stampit.min.js".
  2. Modify the sample code to reflect the breaking changes between Stampit 1.X and 2.X.
Thad
  • 898
  • 13
  • 24