i start a little project using pixijs. I follow that tutorial : https://www.youtube.com/watch?v=FrnXCZmmAZo but it doesn't work for me.
HTML :
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<script src="./node_modules.js/pixi.js/dist/pixi.min.js"></script>
<body>
<script src="index.js" type="module"></script>
</body>
I got pixi module with the following command : npm install pixi.js
index.js :
import * as PIXI from './node_modules/pixi.js/dist/pixi.min.js';
const log = console.log;
const app = new PIXI.Application();
Error :
PIXI.Application is not a constructor[En savoir plus] index.js:4:13
<anonyme>
http://localhost:3000/index.js:4:13
InnerModuleEvaluation self-hosted:4290:5 evaluation self-hosted:4243:9
UPDATE
HTML :
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<script src="./node_modules.js/pixi.js/dist/pixi.min.js"></script>
<script src="index.js" type="module"></script>
</body>
</html>
index.js :
const log = console.log;
const app = new PIXI.Application();
Error :
PIXI is not defined
The tutorial doesn't use modules.
PIXI is exposed globally: https://github.com/pixijs/pixi.js/blob/v4.8.1/src/index.js#L51
If you remove the import, and fix the typo in the script tag, it should work.
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<script src="./node_modules/pixi.js/dist/pixi.min.js"></script>
<script src="index.js" type="module"></script>
</body>
</html>
index.js:
const log = console.log;
const app = new PIXI.Application();
If you're using npm, I got this error cause I ran npm install pixi (incorrect) instead of npm install pixi.js (correct).
Related
I'm looking to do a simple process using the skypack (https://cdn.skypack.dev/) module in javascript.
I have described the following script.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sample</title>
</head>
<body>
<button id="button" onclick="mybutton">click</button>
<!-- <script type="module" src="https://cdn.skypack.dev/#...<modulename>...">// <- Uncaught ReferenceError: mybutton is not defined -->
<script type="text/javascript" src="https://cdn.skypack.dev/#...<modulename>...">// <- Uncaught SyntaxError: export declarations may only appear at top level of a module
import { METHOD } from "<modulename>";
function mybutton(){
console.log("aaa");
// ... snip ...
}
</script>
</body>
</html>
However, the module does not work in the script tag.
I have tried two things.
import in the script tag.
This gave me the following error.
Uncaught SyntaxError: export declarations may only appear at top level of a module.
It seems that you need to use <script type="module" when importing a module.
do script type="module" .
This gave the following error:
Uncaught ReferenceError: mybutton is not defined.
It seems that the function defined directly below is not found.
What can I do to resolve these?
I will post the code that worked.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="button">click</button>
<script type="module">
document.getElementById('button').addEventListener('click', mybutton);
import { METHOD } from "https://cdn.skypack.dev/.../<modulename>";
function mybutton(){
console.log("aaa");
// METHOD(arg); ...
// ... snip ...
}
</script>
</body>
</html>
I have a small problem. I'm developing a game using CraftyJS and I need to use Electron to run it, but Electron throws this error:
Uncaught TypeError: Crafty.scene is not a function
at Level1.js:4
Why does it do this? Here's the relevant code + markup:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Overtime-game</title>
</head>
<body>
<div id="game"></div>
<script type='text/javascript' src='./node_modules/craftyjs/dist/crafty.js'></script>
<script src='./Level1.js'>
</script>
</body>
</html>
JS:
//Relevant code:
Crafty.scene('main', function() {
Crafty.init(500,500, document.getElementById('game'));
// rest of Crafty.scene...
}
Crafty.scene('main')
FIXED ON ELECTRON FORUMS:Apparently if you require a module in the file Electron will not look in node_modules.
https://discuss.atom.io/t/solved-typeerror-crafty-scene-is-not-a-function/61273
I am trying to code for the first time ever in Angular, and I can't load an expression on my page because I get the error [$injector:modulerr] Failed to instantiate module. I know there are a lot of similar issues on stackoverflow but none of them have solved my issue. The link to app.js is not broken.
HTML
<!DOCTYPE html>
<html ng-app="store">
<head></head>
<body>
<script type"text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.js"></script>
<script type="text/javscript" src="js/app.js"></script>
<p>{{ "hello" + "there"}}</p>
</body>
</html>
app.js
(function(){
var app = angular.module('store', [ ]);
})();
I am just trying this locally on my computer. Thanks!
Your only problem are the typos in the code.
There's an = missing in the first script (line 5) and it's written javscript instead of javascript in the second script (line 6)
Try the following code
<!DOCTYPE html>
<html ng-app="store">
<head>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.js"></script>
<script type="text/javascript">
(function() {
var app = angular.module('store', []);
})();
</script>
<p>{{ "hello" + "there"}}</p>
</body>
</html>
Hope it helps!
Context
I've used Mocha before many times, both in the browser and just using the command line. I tend to use Chai's expect module for bdd.
I have five test files that have been working with command line npm test. I just want to run the tests in the browser for better debugging.
Problem
The setup is just boggling my mind. I either get a blank Mocha page without tests or I see the first test flash on screen, then it redirects.
Current specRunner.html
<!DOCTYPE HTML
<html>
<head>
<title>Mocha Tests</title>
<link rel="stylesheet" href="node_modules/mocha/mocha.css" />
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/mocha/mocha.js"></script>
<script src="node_modules/chai/chai.js"></script>
<script>mocha.setup('bdd');</script>
<script src="mineLocation.js"></script>
<script src="test/mineTests.js"></script>
<script>
window.expect = chai.expect;
mocha.run();
</script>
</head>
<body>
<div id="mocha"></div>
</body>
</html>
Previous Attempts
I've tried moving script tags around, thinking that dependencies are being unmet at load time.
I've tried relative vs. absolute paths. Console says all the tags are loading correctly.
I've tried modifying the run script tag. When it is as the example above, it turns out a blank page and says "Cannot read property 'appendChild' of null", pointing back to Mocha:
When the run script tag looks like this:
$(function() {
window.mochaPhantomJS ? mochaPhantomJS.run() : mocha.run();
});
It redirects from /specRunner.html to /2,1 and the console error repeats about every 30 seconds.
Here you go, just tested it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mocha Test</title>
<link rel="stylesheet" type="text/css" href="node_modules/mocha/mocha.css">
</head>
<body>
<div id='mocha'></div>
<div id='app'></div>
<script src="node_modules/mocha/mocha.js"></script>
<script src="node_modules/chai/chai.js"></script>
<script src="app.js"></script>
<script>
mocha.setup('bdd');
var expect = chai.expect;
</script>
<!-- Tests -->
<script src="app_test.js"></script>
<script>
mocha.run();
</script>
</body>
</html>
So, I've found that it's not necessarily an issue with the HTML setup, but rather an issue with a test.
Setting the location variable globally within the file causes the strange redirection (to /2,1) and error "Cannot read property 'appendChild' of null".
Moving the variable within the describe statement, on line 4, fixes the problem.
My final HTML is cleaner as well:
<html>
<head>
<meta charset="utf-8">
<title>Mocha Tests</title>
<link rel="stylesheet" href="node_modules/mocha/mocha.css" />
</head>
<body>
<div id="mocha"></div>
<script src="node_modules/mocha/mocha.js"></script>
<script>mocha.setup('bdd');</script>
<script src="node_modules/chai/chai.js"></script>
<script>var expect = chai.expect;</script>
<!-- src files -->
<script src="narcissistic.js"></script>
<script src="morseCodeDecoder.js"></script>
<script src="windComponents.js"></script>
<script src="mineLocation.js"></script>
<!-- test files -->
<script src="test/narcissisticTests.js"></script>
<script src="test/morseTests.js"></script>
<script src="test/windTests.js"></script>
<script src="test/mineTests.js"></script>
<script>mocha.run();</script>
</body>
</html>
I have a script that I am exporting a single variable:
module.exports = {
hello: "world"
};
I am bundling with browserify and then consuming the bundle in my index.html
Here is my html file:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<script type="text/javascript" src="./bundle.js"></script>
</head>
<body>
<script>
console.log(hello);
</script>
</body>
</html>
I am getting that my variable hello is undefined. I can see the bundle.js with my dev tools, so I know it is there. Why does my script in the body not have access to the variables that the bundle.js is exporting?
What am I missing here?
In CMD call
browserify -r ./bundle-module.js:bundle > bundle.js
bundle-module.js is your raw module code
bundle-module.js:bundle - after-colon "bundle" is what will be used in require call
bundle.js is browserify-generated code
HTML
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<script type="text/javascript" src="./bundle.js"></script>
</head>
<body>
<script>
var bundle = require('bundle');
console.log(bundle.hello);
</script>
</body>
</html>