My situation
I'm checking out spine.js for a web application I'm thinking of writing. I've read all the documentation and gone through all the examples. Now I'm trying to run the spine.contacts example project on my own Windows 7 laptop.
I'm running node v0.6.6 for Windows
What I've done
Installed node
Installed spine, spine-app and hem through npm
Extracted spine.contacts in a folder
Run npm install . inside the folder, which created the node_modules folder with a bunch of directories inside, including jqueryify
Run hem server to start the test server
Basically followed all the instructions to the letter
The problem
Running the application in Chrome (http://localhost:9294), JavaScript throws an exception at line 9 in index.html (I've included index.html below). It reads "Uncaught module jqueryify not found". I know the jqueryify dependency was installed by npm earlier, but I tried removing that line anyway and linking in jQuery manually. Now I got the error "Uncaught module index not found" in application.js. That certainly isn't a dependency error, since the index.js file is local and it's the main script file in the project.
So it seems there's a problem with the require function. I've Googled a lot and nothing I've found has indicated that spine.js shouldn't work on Windows.
Any ideas?
Some links
The GIT page for spine.contacts
A demo of the exact same project on herokuapp.com
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>App</title>
<link rel="stylesheet" href="/application.css" type="text/css" charset="utf-8">
<script src="/application.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var jQuery = require("jqueryify"); // I'm line 9!!
var exports = this;
jQuery(function(){
var App = require("index");
exports.app = new App({el: $("#article")});
});
</script>
</head>
<body>
<header id="header"><h1>Spine Contacts</h1></header>
<article id="article"></article>
</body>
</html>
Hem is not supported on Windows. I found myself in the same situation and tried the same approaches.
More info here: https://github.com/maccman/hem/issues/23
Try inserting that before line 9:
for(var winPath in require.modules)
{
path = winPath.replace(/\\/g, '/');
path = path.match('/node_modules/') ? path.split('/node_modules/')[1] : path;
path = path.match('/app/') ? path.split('/app/')[1] : path;
require.modules[path] = require.modules[winPath];
}
I think a fix will be there soon.
Related
I am currently working on a CNC project, I want to be able to parse DXF files into objects in JS.
I started with SVGs instead but the drawings did not export as shapes but as lines (a square as four lines and not a shape with four points). So I began to search for a JS library that would help me work with DXF files, I found "dxf-parser" and "three-dxf". I wasn't able to run an example with neither... That might be because I have a very limited experience with vanilla JS , I usually use P5.
So, in conclusion, I am searching for a working example projects of any of these libraries.
What I did by now was to write in the command line:
npm init -y
npm i dxf parser
Then I opened an html file:
<!DOCTYPE html>
<html lang="en">
<head>
</script>
<meta charset="utf-8" />
</head>
<body>
<main>
</main>
<script type="module" src="index.js"></script>
</body>
</html>
And a JS file:
// Grab fileText in node.js or browser
import parse from 'dxf-parser';
const fileText = "./dxfTests/test.dxf";
try {
const dxf = parse(fileText);
}catch(err) {
console.log(err.stack);
}
Then I start click the go live button in VScode and i get this error:
127.0.0.1/:1 Uncaught TypeError: Failed to resolve module specifier "dxf-parser". Relative references must start with either "/", "./", or "../".
Help would be very much appreciated!
I'm trying to use some protocol buffer code generated with protoc for javascript. I got some javascript files that i can import (after choosing the commonjs style) into other javascript files.
I've installed an npm dependency called google-protobuf and am able to bundle all javascript with webpack. When i try to run the page in firefox i get no errors related to this, chrome however gives me:
Invalid regular expression: /[Ö‘-Û¯Ûº-ࣿâ€�-��-�ï¬-ï·¿ï¹°-ﻼ]/: Range out of order in character class
I've tried adding some additional tags to <meta> and <script> and they don't work. I've never seen an error like this and don't know where to start looking.
The end goal is, i'd like all my npm i and all my import { Foo } from 'foo.js' to work on a web page without errors.
What webpack injected using HTMLWebpackPlugin is:
<script type="text/javascript" src="frontseat.bundle.js"></script>
Originally there are no <meta> tags, i just added the one under head so it looks:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>...
Try to update your regex to this regex below:
[Ö‘\-Û¯Ûº-ࣿâ€�-��-�ï¬-ï·¿ï¹°-ﻼ]
And your meta tag is like this? <meta charset="utf-8"> with this charset
I got the same issue as you have.I cannot upgrade google-protobuf over than 3.6.1. Only version 3.6.1 works for me before. All versions later 3.6.1 raise the same errors in my project.
However, the <meta charset="utf-8"> helps now on my side. I create a minimum sample and hope it can give you some idea.
google-protobuf version: 3.11.2
index.js
import * as pb from 'google-protobuf';
console.log(pb);
build command
npx webpack index.js -o bundle.js
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="bundle.js"></script>
</head>
</html>
Then, you should be able to see something like this on chrome devtools console without the error.
{Map: ƒ, Message: ƒ, BinaryReader: ƒ, BinaryWriter: ƒ, ExtensionFieldInfo: ƒ, …}
I have followed the simple step-by-step instructions in the Basic Aurelia Project Setup guide. But starting the index.html in a browser results in the config-esnext.js file throwing: "JavaScript runtime error: 'System' is undefined". This is on the first line: System.config({...
The browser's output window has this to say:
"Could not find file 'C:\Users\Bruce\Dropbox\Projects Aurelia\Basic Aurelia Setup\scripts\system.js.map'..Unhandled exception at line 1, column 1 in http://localhost:56477/scripts/config-esnext.js"
Is there some "map" configuration missing from the simple instructions? I am running the project from Visual Studio 2015, configured for Esnext.
The comments to the original question have some good discussion going. But for the sake of providing an "answer" for others to find, here goes.
Without seeing your index.html file, I can't determine exactly what is going on. But the error you're seeing is happening because System isn't defined on the window. This will happen if you haven't loaded up System yet. You need to make sure that your index.html file loads up SystemJS first, then you load up your config file.
You can see in the skeleton project's index.html found here, that system.js is loaded before we bring in the configuration file. Here is an example of a proper index.html using SystemJS.
<!DOCTYPE html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body aurelia-app="main">
<span>Loading...</span>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
As an alternative, the CLI helps get a skeleton project up quickly (it doesn't include a navigation example, it is a bare-bones skeleton). It uses RequireJS however, but we have plans to support other module loaders (such as SystemJS) down the road.
Issue updated. Please check the edit
I want to use the debugger included in Webstorm to run my project. I'm
using Angular2 and TypeScript. I need to place breakpoints into my typescript files.
Basically, my index.html just imports some .js files and starts my
app by calling a function named bootstrap defined in another .js file (transpiled from a .ts file !).
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/">
<meta charset="UTF-8">
<title></title>
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="../node_modules/es6-shim/es6-shim.min.js"></script>
<script src="../node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="../node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="../node_modules/rxjs/bundles/Rx.js"></script>
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="build/core/system.config.js"></script>
<script src="build/core/moduleLoader.js"></script>
<script src="build/core/bootstrap.js"></script>
<script src="../node_modules/angular2/bundles/router.dev.js"></script>
<script>
bootstrap();
</script>
</head>
<body>
<app-view>Loading...</app-view>
</body>
</html>
bootstrap is defined as follow :
const bootstrap:()=>Promise<void>= async function() {
await ModuleLoader.loadAll();
System.import('core/app').then(null, console.error.bind(console));
};
window.bootstrap = bootstrap;
When I run my index.html in debug mode, an error is thrown,
bootstrap() is not defined.
When I run the app inside a browser, it works well. Have I missed some configuration ?
I've installed the jetbrains plugin (I'm using chrome) and configured the port. I can see the "Loading..." on my browser.
EDIT
Maybe a usefull information :
I'm using node. Into my main server-side script, I set up express and do some configuration. When I'm trying to debugging, my server is listening but on another port (8080). The debugger uses the port 63343.
You can start a JavaScript debug session for any URL - you just need to specify it in the JavaScript run configuration. If you app is running on localhost:8080, then use that URL in the JavaScript debug configuration.
Another important point: make sure you generate source maps when compiling your TypeScript code.
I have a simple angular app with a directory structure that looks like the following:
-lpbm
-shared
- js
- css
-public
app.js
index.html
I run http-server within the lpbm folder which creates http://localhost:8080
I then try to access http://localhost:8080/public/index.html but i get a blank page and the following error in my terminal window: "GET /public/index.html" Error (404): "not found"
This was working before, and something random must be stopping it from working correctly, as the directory and url structure are correct. I've tried removing all my custom files other than my index.html and app.js which are below
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cheapest Fares</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../shared/css/bootstrap-cerulean.css">
<link rel="stylesheet" href="../shared/css/app.css">
<link rel="stylesheet" href="../shared/css/lpbm.css">
<script src="../shared/js/angular.js"></script>
<script src="../shared/js/angular-messages.js"></script>
<script src="../shared/js/angular-message-format.js"></script>
<script src="../shared/js/angular-route.js"></script>
<script src="../shared/js/angular-animate.js"></script>
<script src="app.js"></script>
</head>
<body class="container" ng-app="app" ng-strict-di ng-controller="AppController as app">
<h1>Our cheapest fares from London</h1>
<div class="row">
<ng-view autoscroll></ng-view>
</div>
</body>
</html>
app.js:
angular.module('app', ['ngMessages', 'ngMessageFormat', 'ngRoute', 'ngAnimate'])
.controller('AppController', function() {
console.log('working?');
})
Is there any obvious reason this is not working? if i open up a test angular app and do the same http-server process it works, suggesting it is something wrong with my app.js or index.html but i can't spot what, i've literally removed everything and it still refuses to load.
I've moved your code to Plunker and removed additional dependecies and all seems to be working fine.
I would sugest to do the same on your side as well. If this is not an issue, try to look on the server side of the app.
Also the error
"GET /public/index.html" Error (404): "not found"
you've mentioned might be sugesting this.
Plunker link: http://plnkr.co/edit/MLkrJdzyd7mPEHyYe1v6?p=preview
The reason your files are accessible at http://localhost:8080/ and not http://localhost:8080/public/ is because you are using a virtual mount path. In a framework like express, for example, that is done like this:
app.use('/', express.static('public'));
This determines what parts of your server are accessible client-side. The first argument ('/') sets the location that clients navigate to in order to access the files at the location in the second argument ('public'). The reason your /shared folder was not accessible until you place it in the /public directory is because it was outside the scope of what was being exposed to the client.
If you aren't using express, the code may look slightly different, but this is essentially what is happening. Somehow this line of code was uncommented or added to your server.