I got error when link external library with javascript - javascript

I installed the color-convert library via npm but the browser shows me an error message
Uncaught ReferenceError: require is not defined home.js:134
at HTMLButtonElement.<anonymous> (home.js:134)
at HTMLButtonElement.dispatch (jquery-3.4.0.js:5233)
at HTMLButtonElement.elemData.handle (jquery-3.4.0.js:5040)
JS
var convert = require('color-convert'); // this is line 134
alert(convert.hex.lab('DEADBF'));
I think there is a problem with paths?

require() isn't a function provided by your browser, and is more of a sign that this source code is a common JS module.
In order to use a common JS module, you first need to run your source through a program that bundles the source, sorta replacing each require('other_module') with the source of the other module, producing a single Javascript source file which can included in your frontend HTML.
Two examples of bundlers are browserify and webpack.

Related

How to use nodejs file with html file?

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/

browserify :- Uncaught TypeError: fs.readFileSync is not a function

i am trying to use natural .js in my code , to use it on the client side i used browserify ,but it is giving an error
Uncaught TypeError: fs.readFileSync is not a function
at loadDictionary (main.js:10999)
at Object.<anonymous> (main.js:10894)
at Object.69../base_stemmer_id (main.js:11175)
at o (main.js:1)
at main.js:1
at Object.44../analyzers/sentence_analyzer (main.js:6380)
at o (main.js:1)
at main.js:1
at Object.1.natural (main.js:23)
at o (main.js:1)
the code is tried is
var natural =require("natural");
var tokenizer =new natural.WordTokenizer();
console.log(tokenizer.tokenize("my name is akash"));
any help?
From the npm page for natural.js:
"Natural" is a general natural language facility for nodejs.
Since this is built for Node.js, it likely uses Node specific modules, like fs, which allows Node to access the file system. The fs module does not exist in the front end.
So when natural.js tries to require fs (using Browserify, I guess), it doesn't get the actual module that Node has, thus it can't call the readFileSync method.
It is trying to access the file system library fs, which is not available from a browser. Unfortunately, Browserify only converts node.js-style module imports (like require('package-name');) into a form the browser understands. It doesn't make all node.js packages work in the browser.
From browserify.org
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.
I had the same issue trying to browserify a library for NLP based on Natural. Finally my solution was to don't use Natural and move the stemmers/tokenizers. Right now I have the NLP library bundle working in the browser, you can find it here: https://github.com/axa-group/nlp.js/tree/master/dist
To use it better read the docs.

jquery not working in nw.js (node webkit)

I am switching my desktop app from electron to nw.js because of source code security features.
I am requiring the module jquery-confirm in my nodejs file, I get this error:
Uncaught Error: jquery-confirm requires jQuery
I fix this error by:
var $ = require('jquery');
window.jQuery = $;
var jconfirm = require('jquery-confirm');
and importing the js file in index.html like this:
<script>require('./bot.js')</script>
Becuase I get the same jquery error if I require the js file like:
<script src="bot.js"></script>
When I fix the error like above and I launch the app with nw.js, it immediately crashes giving this error:
TypeError: $(...).button is not a function
First question:
I am assuming there is something wrong with jquery. When I import it in index.html, it doesnt work at all. However, I am still running into issues after requiring it in the js file. How can I fix this?
Second question:
Why dont I get the Uncaught Error: jquery-confirm requires jQuery error if I import my js file using 'require' instead of ?
This is an issue of javascript context in Node Webkit. We must ensure all the javascript required inside the browser (the window context) is brought into that context by using the src attribute of a script tag.
Node Webkit places JavaScript from require() statements in the nodejs global context - and makes it unavailable inside the browser.
So we see errors such as $ is not defined or $(...).button() is not a function if files are in opposite contexts.

Node.js Error: require is not defined in clientside js file

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

Loading Node.js Module using Browserify

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');

Categories