I am using protobuf.js in an ionic2 project. I have a valid .proto file which I first convert to a static javascript file by:
pbjs -t static databaseapi.proto > databaseapi.js
Becasue ionic2 uses typescript, I add a d.ts file by doing:
pbts databaseapi.js > databaseapi.d.ts
my application transpiles and runs, but I end up with a runtime error:
Runtime Error $protobuf is not defined
I know it is because the compiled protocol buffer file references the variable $protobuf, but I don't quite know where this variable is defined. I also don't know how to include the missing file because it needs to be referenced by the js file rather than the ts file.
-t static just creates the raw code but doesn't wrap it as a module (and thus does not define the $protobuf dependency).
To also wrap it as a module, use -t static-module and pick your desired format through -w default|commonjs|amd|es6. default uses an universal wrapper that works with AMD, CommonJS and a global variable.
For all command line options, see: https://github.com/dcodeIO/protobuf.js#command-line
Thanks dcode, I ended up doing it a little differently. To others reading this, the solution is Ionic specific, please see the answer by dcode for a better generic solution.
What I ended up doing, was adding a reference to the compiled js file to Cordova's index.html as follows:
<script src="lib/protobuf.js"></script>
<script>$protobuf = protobuf;</script>
<script src="js/databaseapi.js"></script>
<script> $database = $root.com.database.api.v1; </script>
databaseapi.js is the name of the compiled protobuf file.
Related
First things first. I know that there are other questions that are similar to this e.g. use NodeJs Buffer class from client side or
How can I use node.js buffer library in client side javascript
However, I don't understand how to make use of the reference to use browserify though it is given approval.
Here is my Node code:
import { Buffer } from 'buffer/';
I know this is the ES6 equivalent of require.
I would like a javaScript file implementation of this module so that I can simply use the standard html file reference:
<script src=./js/buffer.js></script>
And then use it as in for example
return new Buffer(temp).toString('utf-8');
This simply falls over with the
Uncaught ReferenceError: Buffer is not defined
no matter how I create the buffer.js file.
So using the browserify idea I've tried using the standalone script (from the https://www.npmjs.com/package/buffer as https://bundle.run/buffer#6.0.3 )
I've created a test.js file and put
var Buffer = require('buffer/').Buffer
in it and then run browserify on it as
browserify test.js -o buffer.js
and many other variations.
I'm not getting anywhere. I know I must be doing something silly that reflects my ignorance. Maybe you can help educate me please.
These instructions worked for me. Cheers!
Here are the instructions you can look at the web section.
https://github.com/feross/buffer
Here is what the instructions state about using it in the browser without browserify. So from what you tried
browserify test.js -o buffer.js
I would just use the version directly that does not require browserify
To use this module directly (without browserify), install it:
npm install buffer
To depend on this module explicitly (without browserify), require it like this:
var Buffer = require('buffer/').Buffer // note: the trailing slash is important!
I have a frontend in HTML and JAVASCRIPT. I need to get value from nodejs file and display it in HTML label. So I create new node js file node.js as:
const Web3 = require('web3');
const web3 = new Web3('https://kovan.infura.io');
web3.eth.getBalance('0x9E632F36D8193a23ee76e7C14698aCF4b92869A2').then(console.log);
I include this file in script tag as:
<script src="node.js"></script>
First I want to look output in the console but it is giving an error
Uncaught ReferenceError: require is not defined
So, I try this code directly in HTML file within the script tag without including node file but still gives the same error.
Can somebody help me with this? I am new to use all this together.
Somehow, I managed to find a solution. I used browserify, which makes easy for me to run the nodejs code from my web app.
Browsers don't have the require method defined, but Node.js does. With Browserify you can write code that uses require in the same way that you would use it in Node.
browserify will recursively analyze all the require() calls in your app in order to build a bundle you can serve up to the browser in a single tag.
I referred this link: http://browserify.org/
I am new in Node.js platform and want to use https://www.npmjs.com/package/simple-peer module in my application. But can not figure out how to implement that in my application. I can't figure out their documentation. Is there any resource that can show the procedure of using that module with Node.js or Node+Express?
Might be late but :
If you do not want to, it's not compulsory to use browserify or webpack for this very module to work, but is a good practice though, atleast for now.
In simple-peer package it is mentioned :
Note: If you're NOT using browserify, then use the included standalone file simplepeer.min.js. This exports a SimplePeer constructor on window.
This means you can get SimplePeer() on the window object by adding a script tag in your html file like :
<script src="<path to your node_modules>/simple-peer/simplepeer.min.js"></script>
For me this works :
<script src="<path to your node_modules>/simple-peer/simplepeer.min.js"></script>
<script src="/index.js"></script> <!-- Keep this script tag below simplepeer.min.js-->
Now use SimplePeer() inside index.html as :
const peer = new SimplePeer({
// Code ...
});
Hope this helps :)
As explained in the documentation,
This module works in the browser with browserify.
Basically you need to write nodeJS (i.e. commonJS) code - as shown in the examples - then using browserify, generate a bundle file which can be used browser side.
Most likely, webpack can be used as an alternative to browserify
I have a Javascript file in which I have data that needs to be saved into a Mongoose schema and subsequently inserted into a MongoDB table. The schema is defined in a file in a separate directory so I tried to essentially import it by including the following line at the top of the file:
//import schema for sketches
var SketchSchema = require('../schemas/sketch_objs');
I then got the error "Uncaught ReferenceError: require is not defined"
which I found out here was due to the fact that require() doesn't exist on the client-side. As suggested in the answer for that post, I installed Browserify in order to be able to require the schema javascript file.
I couldn't really ascertain the specific usage of Browserify's functionality to achieve this but it seemed from the github readme that something like the following has to be done:
$ browserify main.js > bundle.js
where the required files in main.js will be included inside of bundles.js. I tried to doing this for the file that needed to include the schema and successfully generated the new file; however, for some reason when I run the project, I still get the error about require not being defined. Is it supposed to be that the new file generated by Browserify is supposed to be used instead of the old file? If this isn't the case, what is the correct way to require another js file inside a file on the client side?
So
you need browserify to require the JS file CommonJs way.
I do not think mongoDB is compatible with browserify, FYI, https://jira.mongodb.org/browse/NODE-698
I am using Browserify (http://browserify.org/) to load a module in JavaScript. I keep getting the following error:
I have no idea why this is happening. I have a "package.json" file in a directory called "wordnet-develop", which is located in the same location as the JavaScript file.
Originally I thought that there might be a path problem. However, I did the same exact thing but with a test.js file, and it worked. So, I think that there may be something wrong with using package.json.
The beginning of the package.json file:
The beginning of my JavaScript file:
The directory containing the javascript file:
The directory (seen above as "wordnet-develop")containing the package.json file:
UPDATE
I replaced var WordNet = require('./wordnet-develop/node-wordnet'); with var WordNet = require('./wordnet-develop/lib/wordnet'); as suggested by klugjo.
It may have worked, but now I am getting a new error message:
This happened again but with 'async' module missing. I checked lib/wordnet, and it included requirements for bluebird and async, so that's probably the error source.
However, I now have no idea what to do. I'm new to node.js and modules, so I'm unfamiliar with solutions. Am I supposed to parse all of the code and find all the required modules online? Shouldn't they have been included in the module? Is the problem that I'm trying to use a node.js module in vanilla JavaScript?
I don't think what you are trying to do is supported: you have to link directly to the entry javascript file of the node-wordnet library.
Replace
var WordNet = require('./wordnet-develop/node-wordnet');
With
var WordNet = require('./wordnet-develop/lib/wordnet');