I'm trying to create a project using elasticsearch.js. I'm following the docs found here.
In the <head> I've loaded:
<script src="js/jquery-1.10.2.js"></script>
<script src="js/elasticsearch.js"></script>
<script src="js/esInit.js"></script>
and in custom.js I have
var elasticsearch = require('elasticsearch');
var client = new elasticsearch.Client({
{Host Here}
});
In FB console I see
ReferenceError: require is not defined
var elasticsearch = require('elasticsearch');
I'm reading that require() is not a function of javascript. Very confused.
It looks like you are loading the version that is supposed to be used with Node.js.
There are browser compatible builds available as well: http://www.elasticsearch.org/guide/en/elasticsearch/client/javascript-api/current/browser-builds.html
Yes require is not a default function in javascript. Instead you need to download that js file from "http://requirejs.org/docs/download.html"
Related
today i was working on a project, and i got this error.
Uncaught ReferenceError: launch is not defined
at HTMLInputElement.onclick (home.html:77)
i don't understand what i did wrong here..
Here is the index.js file:
function launch() {
console.log('test');
}
module.exports.launch = launch;
and home.html:
<script>
let func = require('./index');
let launch = func.launch();
document.getElementById('lanBTN').addEventListener('click', () => {
launch();
});
<input type="button" value="Launch!" id="lanBTN" onclick="launch()">
</script>
Any ideas why this is happening..?
Require is a commonjs module specification, it doesn't work on the browser unless you use some bundler like webpack or browserify to resolve the dependencies between all of you modules and bundles one single js file to include in your html
As #mehdi-belbal mentioned you can not use CommonJS in HTML files expect if when using module bundlers like Webpack.
Besides of that module.exports is useless here, try to link your javascript module in the head of the document. and the declared function after. that will attach to the window object and you can use them both by using window.func() and func()
<head>
<script src="./index.js"></script>
</head>
<body>
...
<script>
func();
</script>
</body>
I have a well tested npm library (https://www.npmjs.com/package/yuml-diagram) that I would like to Browserify so it can be used in browser applications.
The full source code is here: https://github.com/jaime-olivares/yuml-diagram
I managed to build the library as a monolithic package with the following command line:
browserify index.js -g uglifyify -o ./dist/yuml-diagram.min.js
Then I tried to use it in a similar fashion as in Node-JS, as suggested in several places:
<html>
<head>
<script src="https://gist.githubusercontent.com/jaime-olivares/5cd18b40f2bdcf5e403ed78d181c3d85/raw/00f5624fe30500a22144962184e927236f1ac45f/yuml-diagram.min.js"></script>
<script>
function loadSvg()
{
var yuml_diagram = require('yuml-diagram');
var yumlText =
`// {type:sequence}
[:Computer]async test>>[:Server]
[:Computer]sync test>[:Server]`;
var yuml = new yuml_diagram();
var svg = yuml.processYumlDocument(yumlText, false);
document.body.innerHTML = svg;
}
</script>
</head>
<body onload="loadSvg();">
</body>
</html>
The require() function is not recognized, even if I use the flag --exports require in Browserify.
How can I invoke the library's processYumlDocument() function from the application script?
Browserify does not add support for require onto your page. Browserify is used on a javascript file that is using resolve internally and produces a version with the resolves statically included.
In your example you should move the content of your script block into a javascript file and then execute browserify on that file. Then include the final produced file in your page.
Found my own answer. It is required the standalone parameter in Browserify, as here:
browserify index.js --standalone yuml_diagram -g uglifyify -o ./dist/yuml-diagram.min.js
Where yuml_diagram represents the whole bundle. Then the library can be used with a couple of lines:
<html>
<head>
<script src="../dist/yuml-diagram.min.js"></script>
<script>
function loadSvg()
{
var yumlText =
`// {type:sequence}
[:Computer]async test>>[:Server]
[:Computer]sync test>[:Server]`;
// Create the object and invoke a function inside it
var yuml = new yuml_diagram();
var svg = yuml.processYumlDocument(yumlText, false);
document.body.innerHTML = svg;
}
</script>
</head>
<body onload="loadSvg();">
</body>
</html>
I need to decode h264 data at browser side for that I am using openh264 library build in web Assembly using emscripten.
I have build it successfully and tried to use it in java script to decode the h264 data. But I am getting one error for following line,
var open_decoder = Module.cwrap('open_decoder', 'number', null);
Error is: Uncaught TypeError: Module.cwrap is not a function
If anyone has has build openh264 with emscripten please help me to figure out issue.
Following steps I have used to build openh264 with emscripten.
$ source emsdk_env.sh
$./emsdk activate latest
cd openh264-js-master
make
Note : The code for openh264 has been downloaded from github( ttyridal) and already has make file with emscripten competent.
-s EXTRA_EXPORTED_RUNTIME_METHODS=["cwrap"]
Include above in command line while compiling your source
emcc source.c -s EXPORTED_FUNCTIONS=['_my_add'] -s EXTRA_EXPORTED_RUNTIME_METHODS=["cwrap"]
Probably you are trying to use Module before the Emscripten runtime has been initialized, so Module.cwrap is undefined.
To make sure the runtime is ready, place your code inside of Module.onRuntimeInitialized, as in the following example:
<!doctype html>
<html>
<body>
<script>
var Module = {
onRuntimeInitialized: function() {
my_add = Module.cwrap('my_add', 'number', ['number', 'number'])
alert('1 + 2 = ' + my_add(1, 2));
},
};
</script>
<script async type="text/javascript" src="index.js"></script>
</body>
</html>
See full example in this github repo
I am trying to instantiate PouchDB in a javascript file. I am importing it with below code :
var imported = document.createElement('script');
imported.type = 'text/javascript';
imported.src = 'pouchdb-6.1.2.js';
document.head.appendChild(imported);
Inside my custom function I am instantiating it as :
var db = new PouchDB('mydb');
This, however, is throwing an error - 'Uncaught ReferenceError: PouchDB is not defined'. Please Help
Did you try this to see if it works:
imported.src='//cdn.jsdelivr.net/pouchdb/6.2.0/pouchdb.min.js'
Also, you can try to add the script tag inside HTML:
<head>
<script src="//cdn.jsdelivr.net/pouchdb/6.2.0/pouchdb.min.js"></script>
</head>
Download the latest PouchDb minified here: https://github.com/pouchdb/pouchdb/releases/download/6.2.0/pouchdb-6.2.0.min.js
Put it in your js or scripts folder and the list it in your index.html file:
<script type="text/javascript" src="js/pouchdb-6.2.0.min.js"></script>
I'm trying to create a new Range object in Ace Editor. I've found numerous examples prescribing the following:
var Range = require("ace/range").Range;
var newRange = new Range(0, 0, 0, 10);
But when I try this I get the following error:
Uncaught ReferenceError: require is not defined
I'm loading the Ace Editor JS in a script tag in a Rails view:
<script src="/js/ace_editor/ace.js" type="text/javascript" charset="utf-8"></script>
If you are using no-conflict version you need to use ace.require instead of require, since no-conflict doesn't create global require to not conflict with other incompatible implementations of require, that might be loaded on the page.