I use this code in my .js file which is part of web site that is used via npm global http-server:
function getParsedStorage() {
let fs = require('fs');
return JSON.parse(fs.readFileSync('./../manager-data.json', 'utf8'));
}
and get errors:
jQuery.Deferred exception: Can't find variable: require (2) (exceptionHook — jquery.min.js:2:31584)
ReferenceError: Can't find variable: require (jquery.min.js:2:31697)
I've installed file-system package with npm install file-system --save but that didn't change anything.
It looks to me like you're attempting to make use of Node.js's require function from within a web browser without using a module system that provides a compatible require method.
Without additional information I can't be certain, however my advice would be to investigate a module loader like Require.js, SystemJS or Browserify which should all enable you to make use of this syntax in your module.
That being said, for the use case you're describing (accessing a JSON file from a website) you may be better served using a simple XHRHttpRequest or the fetch API.
The following is an example which makes use of the fetch API to return the parsed JSON file content.
// Returns a Promise that resolves to the parsed storage data
// NOTE: Lacks any error handling
function getParsedStorage() {
return fetch("../manager-data.json").then(response => response.json())
}
Related
I`m only starting my JS journey and I will be really grateful if you help me to receive data using the JS. I found that info on the alcor exchange site that is the exchange site for wax (gaming crypto currency).
What is on site:
// Code not tested yet, and provided for explanation reason
import fetch from 'node-fetch'
import { Api, JsonRpc, RpcError } from 'eosjs'
const rpc = new JsonRpc('https://wax.greymass.com', { fetch })
// Get buy orderbook from table
const { rows } = await rpc.get_table_rows({
code: 'alcordexmain',
table: 'buyorder',
limit: 1000,
scope: 29, // Market id from /api/markets
key_type: 'i128', // we are using it for getting order sorted by price.
index_position: 2
})
I faced with some trouble because of JSHint version and updated it to 9. But still "await" is red and JSHint is asking for semicolon after it - which causes huge amount of new errors. However the project is opening in the browser with no info of course. But in the console I see an error.
index.html:1 Uncaught TypeError: Failed to resolve module specifier "node-fetch". Relative references must start with either "/", "./", or "../".
P.S. I checked the posts with such error but actually didn't understand what should I do because all of them are proposing some changes for JSON file and I only have index.html and that js. file.
There is a difference between JavaScript in your browser and JavaScript on a server.
JavaScript in a browser is the code that can be injected into HTML (inlined or linked), which is evaluated by the browser.
JavaScript on a server is not related to JavaScript in a browser. The language is the same, but the environment is not. It's like “draw in Paint” and “draw on a real life canvas”. Colors are the same, but everything else is not.
So, what you are trying to do here is to run server-side JavaScript in a browser. That's the real reason you're getting this error.
There are two ways to fix this error.
Probably the one you should go
You should install Node.js, read about npm, init your npm project, put everything into .js file and eval using Node.
In a nutshell, let's say you've already installed Node.js and node -v outputs something in your terminal. Then everything you need to do is:
$ cd path/to/the/directory/you/like
$ npm init -f
$ npm install --save node-fetch eosjs
$ touch index.js
Then edit index.js using your favorite editor, adding there the code you're trying to run.
You may encounter error due to using await on a “top-level”. In this case, put it into an async function:
import fetch from 'node-fetch'
import { Api, JsonRpc, RpcError } from 'eosjs'
const rpc = new JsonRpc('https://wax.greymass.com', { fetch })
(async () => {
const { rows } = await rpc.get_table_rows({
code: 'alcordexmain',
table: 'buyorder',
limit: 1000,
scope: 29, // Market id from /api/markets
key_type: 'i128', // we are using it for getting order sorted by price.
index_position: 2
});
})();
Aaaand, that's it. You do not need to run browser here at all.
Probably the one you should not go, but can
If you need to run your JavaScript in a browser, then you need to either bundle all the deps using a tool like webpack (which still requires you to use Node.js & npm), or you may replace the deps you're trying to use with client-side alternatives.
E.g. instead of requiring node-fetch you may use Fetch API.
What to use instead of eosjs I do not know, but if you decide to use this dependency in a browser, you will at least need to use import maps to tell the browser how to resolve such dependencies. Because, well, the error you've got tells you exactly this: your browser does not know what you're trying to import. Browsers use URLs as import paths, not ids (or “bare names”).
Is there an existing API or library that can be used to load a JSON file in both the browser and Node?
I'm working on a module that I intend to run both from the command-line in NodeJS, and through the browser. I'm using the latest language features common to both (and don't need to support older browsers), including class keywords and the ES6 import syntax. The class in question needs to load a series of JSON files (where the first file identifies others that need to be loaded), and my preference is to access them as-is (they are externally defined and shared with other tools).
The "import" command looks like it might work for the first JSON file, except that I don't see a way of using that to load a series of files (determined by the first file) into variables.
One option is to pass in a helper function to the class for loading files, which the root script would populate as appropriate for NodeJS or the browser.
Alternatively, my current leading idea, but still not ideal in my mind, is to define a separate module with a "async function loadFile(fn)" function that can be imported, and set the paths such that a different version of that file loads for browser vs NodeJS.
This seems like something that should have a native option, or that somebody else would have already written a module for, but I've yet to find either.
For node, install the node-fetch module from npm.
Note that browser fetch can't talk directly to your filesystem -- it requires an HTTP server on the other side of the request. Node can talk to your filesystem, as well as making HTTP calls to servers.
It sounds like as of now, there is no perfect solution here. The 'fetch' API is the most promising, but only if Node implements it some day.
In the meantime I've settled for a simple solution that works seamlessly with minimal dependencies, requiring only a little magic with my ExpressJS server paths to point the served web instance to a different version of utils.js.
Note: To use the ES-style import syntax for includes in NodeJS (v14+) you must set "type":"module" in your package.json. See https://nodejs.org/api/esm.html#esm_package_json_type_field for details. This is necessary for true shared code bases.
Module Using it (NodeJS + Browser running the same file):
import * as utils from "../utils.js";
...
var data = await utils.loadJSON(filename);
...
utils.js for browser:
async function loadJSON(fn) {
return $.getJSON(fn); // Only because I'm using another JQuery-dependent lib
/* Or natively something like
let response = await fetch(fn);
return response.json();
*/
}
export { loadJSON };
utils.js for nodeJS
import * as fs from 'fs';
async function loadJSON(fn) {
return JSON.parse(await fs.promises.readFile(fn));
}
export { loadJSON };
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 currently developing a local JavaScript app that will help me to dynamically generate some managerial documents such as invoices and vouchers for unpaid services for a specific client.
I'll be using node_modules, and so far I am using (["jsonfile", "uniqid", "mkdirp"]) these modules need require to be stored in a variable.
The problem is that I am calling jsonfile as mention in its documentation
var jsonfile = require("jsonfile");
When console.log(jsonfile) from javascript file it returns function localRequire() unlike if i wrote that command inside browsers console .. for that it will return
>> console.log(jsonfile)
Object { spaces: null, readFile: readFile(), readFileSync: readFileSync(), writeFile: writeFile(), writeFileSync: writeFileSync() }
undefined
and to make the problem more complicated, when calling readFile() from console or from the script it returns that readFile() is not a defined function rather for jsonfile or fs which is a node module that is required for jsonfile
>>function readFile()
jsonfile.readFile()
TypeError: fs.readFile is not a function
I don't really know what is the difference and how to use that variable from console than the variable of script. Especially that I don't redefine it in console after running the app.
Some code snippets you may need:
I am calling two scripts in index.html:
<!--requirejs -->
<script data-main="app" src="node_modules/requirejs/require.js"></script>
<!-- a script which will use $ which is not defined -->
<script src="services/specifyDocType.js"></script>
<!--the script the call require and have the jsonfile variable -->
<script src="jsonfile-test.js"></script>
app.js code:
requirejs.config({
//"baseUrl": "node_modules",
"paths": {
"app": "app",
"jsonfile": "jsonfile/index",
"graceful-fs": "jsonfile/node_modules/graceful-fs/graceful-fs",
"fs": "/node_modules/jsonfile/node_modules/graceful-fs/fs",
"jquery": "node_modules/jquery/dist/jquery.min"
}
});
requirejs(["dist/js/main"]);
main.js :
define("jquery", function($) {
$('body');
});
For the local script that will create jsonfile variable, here is the initial code I had to do the working test:
var data = 'DOCS/voucher/voucher.json';
var jsonfile = require(["node_modules/jsonfile/index"]);
console.log(jsonfile);
//this console that returns the function localRequire() mentioned above.
jsonfile.readFile(data, function(err, obj) {
console.dir(obj);
});
For this app, I don't need to use a framework such as Angularjs, and I need to use require for each module I am using so far to create unique ids and directories in the root directory.
One more thing, this is my console on the first run:
function localRequire() jsonfile-test.js:4:1
TypeError: jsonfile.readFile is not a function[Learn More] jsonfile-test.js:6:1
ReferenceError: module is not defined[Learn More] index.js:133:1
Error: Module name "fs" has not been loaded yet for context: _. Use require([]) http://requirejs.org/docs/errors.html#notloaded require.js:168:17
Use of getPreventDefault() is deprecated. Use defaultPrevented instead.
You seem to think that RequireJS is a drop-in replacement for Node's require call. It isn't.
Node supports the CommonJS module system. RequireJS supports the Asynchronous Module Definition (AMD) system. (See here for a question about the difference between the two.) It also provides support to facilitate consuming CommonJS modules, but it does not support consuming CommonJS modules as-is. At the very least, the CommonJS module must be wrapped in a define call. If you start with this CommonJS module, for instance:
function foo() {}
exports.foo = foo;
then you need at a minimum to convert it to this:
define(function (require, exports) {
function foo() {}
exports.foo = foo;
});
In addition, while RequireJS can consume CommonJS modules, it is not able to provide support for those modules that depend on the node VM. fs is one such module. It depends on the Node VM. It cannot be run in the browser. The DOM does not expose an API that the fs module could use to access the filesystem. jsonfile depends on fs so you cannot just load it with RequireJS in the browser. You could possibly find a module made to run in browsers that present an API compatible with fs and present a fake filesystem to the client code and this may work, but you have to do the job of finding the replacement module. RequireJS won't do this for you.
I have installed Node from:
Node
and run this in cmd:
npm install twilio
I then tried the example code provided by Twilio:
var accountSid = 'MyAccountSidHere';
var authToken = "MyAccountAuthTokenHere";
var client = require('twilio')(accountSid, authToken);
client.sms.messages.create({
body: "Jenny please?! I love you <3",
to: "SomeNumber",
from: "MyNumber"
}, function(err, message) {
process.stdout.write(message.sid);
});
Saved this to MyFile.js file and double clicked it.
I get the error message:
ReferenceError: require is not defined
This is my first encounter with JavaScript and I found a lot of similar questions, but have not been able to solve this.
I am to use this with QML, so I want to load it using:
import "MyFile.js" as MyFile
then call the javascript code as a function.
I've read a little into QML and I don't see how you could use a node.js module in QML. QML is used as a language where QT is the JavaScript engine and node.js is a server-side Javascript engine.
The require() function is a core function of node.js which is part of the engine. It's not something language-specific just like the window object in browser-based Javascript is not something in the Javascript language.
As I said in my comment, you should check out what node.js actually is: a server-side JavaScript engine, which executes JavaScript files. It is not a framework which you could load into another engine like QT.
Your code will run if you use it like this from the command-line:
node MyFile.js
I doubt this is helpful for your use-case as a QML import though.