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?
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.
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
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".
Modify the sample code to reflect the breaking changes between Stampit 1.X and 2.X.
Related
I am new to electron. So far I can run electron-quick-start but I get stuck when try using
import {somthing} from "package"
Here is what I did from electron-quick-start.
Edit ./renderer.js as
import { TitleBar } from "electron-react-titlebar";
import "electron-react-titlebar/assets/style.css";
ReactDOM.render(<TitleBar />, document.querySelector("title-bar"));
index.html:
...
<head>
<meta http-equiv="Content-Security-Policy" content="script-src https://www.google-analytics.com 'self' file://* 'unsafe-inline' 'unsafe-eval'">
</head>
<body>
<title-bar></title-bar>
...
main.js (seems I need to change loadFile to loadURL)
...
mainWindow.loadURL(`File://${__dirname}/index.html`);
// Open the DevTools.
mainWindow.webContents.openDevTools();
...
After this I get an error
renderer.js:7 Uncaught SyntaxError: Cannot use import statement outside a module
I did some research by setting
"type": "module"
in package.json, and this gets errors about module/commonjs.
I then find other projects when importing modules they write requires in
<script>require("./renderer")</script>
but I got
index.html:17 Uncaught ReferenceError: require is not defined
Then I tried babel / browserify and many other things only to find my simple test project messed up.
I googled for ES6-react-electron sample minimal projects but they are too out-dated that I find many deprecated packages. These projects still get errors
So, can someone make a modernized minimal example which starts from electron-quick-start and
1. use "import" in script
2. (optional) somehow use "require" to import other modules in index.html
I believe the example should be quite simple but I just missed some points.
Best if somebody can just post a GitHub repo that everybody else can starts happy coding from just pulling it! Thanks!
I'm just starting out with js development. Following the instructions of a course on udemy:
https://www.udemy.com/course/understand-javascript
(Course Using ES5, my Browser - FireFox 72.0.1 (64-Bit) - understands ES6 already)
The instructor uses brackets and showed some basic functions of the underscore.js library.
I downloaded the development version and put it into a subfolder on my project setup:
I included it in my app in app.js as follows:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="libs/underscore.js"></script>
<script src="app.js"></script>
</head>
<body>
</body>
</html>
When the instructor uses the . operator on the _ object, Brackets shows him the available functions.
When I tried this first in VS Code IntelliSense (the autocompletion plugin of VS Code I suppose) did not make any suggestions.
I googled around and came up with the creation of a "jsconfig.json" at the root of my project and restarted VS Code.
{
"compilerOptions": {
"module": "commonJS",
"target": "es6"
},
"exclude": ["node_modules"]
}
Now, when I write "_." VS code automatically adds the following line to my script:
import { _ } from "./libs/underscore";
If I run the script now, it says
SyntaxError: import declarations may only appear at top level of a
module
on the Firefox console.
My Question:
What do I have to consider when setting up javascript module (I guess modules are singe js files?) dependencies to have autocompletion in VS Code working?
Do I have to use "import" or "require"? Do I have to put the imports in the jsconfig.json?
I'm also pretty confused by this post:
How do I include a JavaScript file in another JavaScript file?
I really just need the essentials of setting up a simple vanilla js project.
Related posts:
How to extend VSCode code completion with a third-party JavaScript library
https://github.com/Microsoft/vscode/issues/16102
Thank you in advance.
So what I assumed first, was that vs code can resolve third party library includes from index.html
Seems that this is not the case. I worked around by installing the library via npm. Now the Intellisense auto completion works.
This does not answer, why VS Code adds an import statement why this leads to the exception mentioned in my original post.
Maybe I asked too many questions at once / too general about referencing js files, thus, resulting in a downvote without any comment how to improve the question.
While trying to troubleshoot why systemjs didn't find a custom library I installed (could be a follow up question) I was stuck when trying to do things "manually".
So I have a simple system that consists of 3 files:
index.html
hi.js
hi2.js
the index is just:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<script src="hi.js"></script>
</body>
</html>
hi.js:
import * as hi from "hi2.js";
hi.myFunction();
hi2.js:
function myFunction() {
alert('hi')
}
export { myFunction };
Now when I run (using webstorm and chrome 62) above code, I get the following error, reported by the (chrome) debugger:
"Uncaught SyntaxError: Unexpected token import"
What's happening here? I checked for javascript compliance on mdn and it tells me import is supported by chrome 61 and newer. - I use chrome 62 for testing this.
So what's going on, and how to make it work?
Per recomendation I also changed the html line to <script type="module" src="hi.js"></script>. That didn't help at all, same error.
You're correct that you need type="module" on your script tag:
<script src="hi.js" type="module"></script>
<!-- ---------------^^^^^^^^^^^^^ -->
You also need a ./ prefix on your module specifier:
import * as hi from "./hi2.js";
// ------------------^^
This is to leave the door open for a specifier with no path at all to have special meaning at some stage as things evolve. From the WHAT-WG spec:
This restriction (that a relative URL specifier must start with /, ./, or ../ – T.J.) is in place so that in the future we can allow custom module loaders to give special meaning to "bare" import specifiers, like import "jquery" or import "web/crypto". For now any such imports will fail, instead of being treated as relative URLs.
When I make those two changes to your files, with Chrome 62 with no experimental flags set, I get the alert.
According to getting started I created a file called main.js:
export class q {
constructor() {
this.es6 = 'yay';
}
}
In my html file got:
<script src="system.js"></script>
<script>
SystemJS.import('main.js')
.then(null,(err)=>console.error(err))
</script>
When loading the page I get:
Error: Unable to dynamically transpile ES module A loader plugin
needs to be configured via SystemJS.config({ transpiler:
'transpiler-module' }). Instantiating http://localhost:8080/main.js
Loading main.js
at transpile (system.js:3650)
at system.js:3433 SystemJS.import.then # index.html:17
The system.js file I got from here: https://raw.githubusercontent.com/systemjs/systemjs/master/dist/system.src.js
Running static content from http-server (node) with cache killer plugin installed in Chrome.
Not sure what this is but I'll continue reading the docs and maybe find the solution. A bit sloppy for it to break at "getting started" though.
update
I guess this has something to do with it:
https://github.com/jspm/jspm-cli/issues/1312
But nothing there about how to make the error go away. Code works in Chrome and will be transpiled by babel, only part I need system.js for during development is to load the module.
update
https://youtu.be/5P04OK6KlXA?t=3m3s
Looks like the "getting started" should mention that for the example to work one needs traceur as well.
After some searching I found the traceur.js here: http://google.github.io/traceur-compiler/bin/traceur.js
Changed the html to:
<script src="traceur.js"></script>
<script src="system.js"></script>
<script>
SystemJS.import('./main.js')
.then(null,(err)=>console.error(err))
</script>
And it still the same error.
update
Installed systemjs and traceur with npm and added them to the html:
<script src="./node_modules/traceur/bin/traceur.js"></script>
<script src="./node_modules/systemjs/dist/system.js"></script>
Same error. I'm done with this and revert to requirejs for developing, r.js with uglify for distribution.
Was looking into this after reading something about rollup and how compiled code can be smaller when it only imports what you need instead of the entire file.
I'm currently testing ES2015 coverage on Safari Developer Preview (which claims to support 100% ES2015, modules included).
I've made a simple test, using the same syntax I've been using regularly when developing using ES2015 code (along with Babel.JS for transpiling and Browserify for bundling).
Unexpectedly my code wouldn't work without including the .js extension in the import statement. Is that standard behavior? I thought you could omit that.
/* filename: scripts/alert.js */
export default class Alert {
constructor(message) {
this.message = message;
}
show() {
alert(this.message);
}
}
// Another file
/* filename: scripts/index.js */
import Alert from "./alert.js"; // this won't work if I change it to 'import Alert from "./alert";'
(new Alert("Hello, World!")).show();
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>ES2015 Modules</title>
</head>
<body>
<h1>ES2015 Modules</h1>
<script async="async" type="module" src"scripts/index.js">
</script>
</body>
</html>
Unexpectedly my code wouldn't work without including the .js extension in the import statement. Is that standard behavior? I thought you could omit that.
It's not the browser's job to second-guess what that resource specifier means to the server. You can certainly configure your server to respond to the GET without the .js by delivering a matching file that has .js, but that's server configuration.
There's likely to be evolution in this regard. For instance, right now the spec requires that a module resource specifier start with either / or ./. This is specifically so that...
...in the future we can allow custom module loaders to give special meaning to "bare" import specifiers, like import "jquery" or import "web/crypto". For now any such imports will fail, instead of being treated as relative URLs.