I have the index.html as:
<!DOCTYPE html>
<html>
<head>
<script data-main="scripts/main" src="lib/require.js"></script>
</head>
<body>
<h1>Example 1: basic usage</h1>
</body>
</html>
and the main.js:
requirejs.config({
waitSeconds: 200,
paths: {
"app": "app"
}
});
and the app.js:
define(function () {
alert('Hello World');
});
both main and app are under scripts folder.
When I opened the index.html, and in the console if I give:
require("app")
I get an error like this:
Uncaught Error: Module name "app" has not been loaded yet for context: _. Use require([])
Not sure, where I have made mistake.
You haven't started your app, to do this you should call requirejs(['app/app']).
Here is the basic requirejs example https://github.com/volojs/create-template/tree/master/www
Related
I want to setup the web-component-tester to test my web components. I installed it via npm (devDependency) and created the following script:
package.json:
"scripts": {
"wcttest": "./node_modules/.bin/wct --npm src/app/modules/essen/components/essen-list/test/wct-test.html"
},
As the script states, I have the .html file located there. But now if I run the script npm run wcttest the following route opens:
http://localhost:8081/components/wc-frontend/generated-index.html?cli_browser_id=0 where wc-frontend is the root name of the project folder. But I dont get, why it opens the components path first.
The test opens all the browsers I intalled but there is nothing but a white page. If I open the console there is the following script:
<script>
WCT.loadSuites(["src/app/modules/essen/components/essen-list/test/wct-test.html"]);
<script>
Here the path looks correct.
wct-test.html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<script src="../../../../../../../node_modules/mocha/mocha.js</script>
<script src="../../../../../../../node_modules/wct-mocha/wct-
mocha.js"></script>
<script src="../../../../../../../node_modules/web-component-tester/browser.js"></script>
<script type="module" src="../essen-list.component.js"></script>
</head>
<body>
<mp-essen-list></mp-essen-list>
<script>
suite('suite', function () {
const list = document.body.querySelector('mp-essen-list');
test('test', function () {
list.setAttribute('value', 100);
assert.equal(list.value, 100);
//console.log('test');
//assert.equal(list.shadowRoot.querySelector('#speisekarte').style.left, 50);
});
});
</script>
</body>
</html>
Edit: I noticed that it is not the wrong path. I looked into the console errors and found the following error:
wct-mocha.js:2446 Uncaught Error: WCT requires Mocha. Please ensure that it is present in WCT.environmentScripts, or that you load it before loading web-component-tester/browser.js
at _ensureMocha (wct-mocha.js:2446)
at Object.ensureDependenciesPresent (wct-mocha.js:2435)
at HTMLDocument.<anonymous> (wct-mocha.js:2781)
For some reason when I try to run Angular 1.5 I get a 404 error. Also I am using typescript with typings to compile my files. I noticed that two angular.min.js files are compiled, one that has all the code and another one that is an empty file. The 404 error directs to the empty file.
This is my HTML
<!doctype html>
<html>
<head>
</head>
<body ng-app="app">
<header></header>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="Scripts/app.js"></script>
</html>
JS
/// <reference path="../typings/index.d.ts" />
var app = angular.module("app", []);
app.component('header', {
controller: function () {
this.header = "Hello World";
},
template: "\n\t\t<h3>{{$ctrl.header}}</h3>\n\t"
});
//# sourceMappingURL=app.js.map
EDIT: I tried using a local file of angular but that made no difference.
I'm trying to make simple page with JS module that will do something with the page. I need to use node.js's modules so I'm learning how to browserify works.
My HTML:
<!doctype html>
<html>
<head>
<script src="js/bundle.js" type="text/javascript"></script>
</head>
<body>
<p>Hello world!</p>
<script type="text/javascript">
var test = require("./test.js");
test.init();
</script>
</body>
</html>
This is my JavaScript (test.js):
"use strict";
alert("here1");
var init = function() {
alert("here2");
}
exports.init = init
I'm making a bundle with:
browserify.cmd test.js -o bundle.js
When I'm trying to open the page it shows "here1" but doesn't show "here2".
In browser's console I see:
Uncaught ReferenceError: require is not defined index.html:9
Any ideas how to make module's function (init) work well?
You need to put all JavaScript code which contains anything from Node in the test.js file which you are then converting with the browserify into te bundle.js. In your example you are using a Node function require in the index.html which is not going to be converted. Browser then sees function require() which he doesn't know and this is where the problem is hidden.
Simply told: all your javascript code (containing Node) must be included in your index.html as a single bundle.js which is a browserifed result from your source files.
EDIT
Browserify doesn't (by default) allow you to call any browserified function out of the browserified code. But you can make it available by attaching the function into window scope.
This is test.js (which is then converted to bundle.js by browserify) and index.html
"use strict";
alert("here1");
window.init = function() {
alert("here2");
}
<!doctype html>
<html>
<head>
<script src="js/bundle.js" type="text/javascript"></script>
</head>
<body>
<p>Hello world!</p>
<script type="text/javascript">
init();
</script>
</body>
</html>
I have a basic HTML page with a button:
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
<button id="button" onclick="uclicked()">Click me</button>
<script src="./bundle.js"></script>
</body>
</html>
and an app.js:
//(function(){
console.log('started up')
function uclicked(){
console.log('You clicked');
}
//})();
webpack is installed and webpack --watch succeeds. The webpack.config.js is:
module.exports={
entry: './app.js',
output: {
path: __dirname,
filename: 'bundle.js'
}
}
When I load the page console.log is working but when I push the button I get Uncaught ReferenceError: uclicked is not defined.
If I replace <script src="./bundle.js"></script> with <script src="./app.js"></script> and bypass webpack the button clicks fine. Why doesn't this basic webpack setup work?
When you run the file over webpack, webpack will try not to litter the global scope and so the function will not be made available globally by default.
If you want the function to be accessible outside the scope of he JS file, you should put it in the global scope.
function uclicked() {
// do something
}
window.uclicked = uclicked;
Or just:
window.uclicked = function() {
// do something
}
ReactDOM depends on React to be loaded before it is loaded, in a sequential manner.
I have to load scripts with requirejs, as I cannot change the synchronous loading of js.
I have tried creating a test app but I keep getting the following error: Error: Script error for "react", needed by: helper/react-dom.min
after hello is printed
What I have tried...
Index.html
<!DOCTYPE html>
<html>
<head>
<title>My Sample Project</title>
<!-- data-main attribute tells require.js to load
scripts/main.js after require.js loads. -->
<script data-main="scripts/main" src="scripts/require.js"></script>
</head>
<body>
<h1>My Sample Project</h1>
</body>
</html>
main.js
require(['helper/react-loader'], function(){
// do something with the loaded modules
console.log('hello);
});
react-loader.js
require(['helper/react.min','helper/react-dom.min'], function(){
// do something with the loaded modules
console.log('react loaded');
});
ReactDOM uses define(['react'], f) to define module (see), so you have to define React module's name equals to react, which means you config requirejs like below:
require.config({
paths: {
'react': 'helper/react.min',
}
});