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>
Related
I have a very basic html file that uses a script tag to import a javascript file, but the javascript file is not run when I load the html locally in a browser. How am I formatting the script tag incorrectly?
Folder Structure
-folder
--test.html
--script.js
test.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>TEST</title>
</head>
<body>
<p>TEST</p>
<script type='text/javascript' src="script.js" />
</body>
</html>
script.js
console.log('HELLO WORLD')
(function () {
setTimeout(() => alert('HELLO WORLD'), 3000)
})();
You should close your script tag in a separate tag :
<script type="text/javascript" src="script.js"></script>
Your script tag is incorrect it should be :
<script type='text/javascript' src="script.js"></script>
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 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).
I can’t get my external JavaScript to run.
My index.html is:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<h1>Test</h1>
<script> console.log("foo") </script>
<!-- NOT WORKING-->
<script src="scripts/notworking.js" type="javascript"></script>
<script> console.log("bar") </script>
</body>
</html>
my notworking.js contains only the following two lines:
console.log("working?")
alert("working!");
But nothing happens. Only the "foo" and "bar" from the index.html file are displayed.
<!-- NOT WORKING-->
<script src="scripts/notworking.js" type="javascript"></script>
type="javascript" is no valid MIME type.
Use type="text/javascript" or simply remove it.
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>