Using JQuery in Node server - TypeScript - javascript

I need to do an ajax call from node server using TypeScript.
I am importing jquery as below to my class
import * as $ from "jquery"
if I hover over my implementation, it recognizes the ajax as below
Then, I compile this TypeScript to JavaScript. It is successful.
If I host the node server and try to access this function I am getting below error
TypeError : $.ajax is not a function.
I think I am missing something. I am unable to figure the things out.

Don't do this; jQuery is for the client side, not the server
As mentioned in comments, You should use a server-side HTTP client, such as the built in http.request method, or a library such as npm-fetch or Axios as your needs might dictate.
However, assuming you're using the jquery npm package, please note the following quote from the package page:
For jQuery to work in Node, a window with a document is required. Since no such window exists natively in Node, one can be mocked by tools such as jsdom.
What the npm package provides is a factory for instantiating jQuery injected with a faked window. They give an example of how to do that, but this part is pretty revealing:
This can be useful for testing purposes.
"For testing purposes" means purposes such as running unit tests in nodejs as part of your build pipeline for a client side package. Not as a general purpose library for use in node.

Related

How to use an npm module in angular

I've been trying to use a npm module called solc in AngularJs but I can't seem to succeed in anyway.
I know it's meant to be used with a Node application but I was wondering if there is a way to use it client side.
I've been trying to use Require.js and require every file included inside the git-repo but there are too many dependencies so I was wondering if there is another way.
I've been looking at browserify but that doesn't seems to do exactly what I need.
Does anyone have any idea?
You can use a npm package in browser applications if the package does not have any dependency on Node's built-in APIs. That's because Node APIs are available on server side and not on browser.
If you see here and here in the github repo of solc, you will see that it requires Node's built-in modules path and https. So it will not work in any browser application.

Require is not defined nodejs

Trying to use this smartsheet api: http://smartsheet-platform.github.io/api-docs/?javascript#node.js-sample-code
and its telling me to do this for nodejs:
var client = require('smartsheet');
var smartsheet = client.createClient({accessToken:'ACCESSTOKEN'});
So i do this in my main.js file but I get the error: Uncaught ReferenceError: require is not defined
I think its because im new to nodejs/npm but I cannot find it anywhere where to actually put this require function. I think i need to mess with my node.js file but im note entirely sure. Any link to documentation or suggestions are greatly appreciated!
Try Removing "type": "module", from package.json
Replace all require statements to import statements. Example:
//BEFORE:
var client = require('smartsheet');
//AFTER:
import client from 'smartsheet';
Worked for me.
This is because you are using node-specific calls in the browser! NodeJS is a server-side technology and not a browser technology. Thus, node-specific calls will only work in the server.
The smartsheet api you're trying to use needs to be called from the server-side code and not client side code.
For your case, you can set up ExpressJS and create an dummy api which internally calls the smartsheet api.
If you indeed want to use such calls on the client side, you can use CommonJS client side-implementations
you can't use require directly in browser. you need RequireJS, a JavaScript module loader.
This is introductory note from RequireJS.
RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.
Technically it is inbuilt in the browser and the best thing to do is disable the es-lint in the project and all these errors will not occur.
Or try out commenting the whole es-lint file.
It worked for me!
require() does not exist in the browser/client-side JavaScript
More info on Client on Node.js: Uncaught ReferenceError: require is not defined

Is it possible to load twilio.js library with webpack?

What i need is a way to bundle all my javascript dependencies into one javascript file with Webpack (Just like with socket.io-client), but i can't do that with twilio.js.
I can see that the latest of twilio.js is listed here.:
https://www.twilio.com/docs/client/twilio-js as a script tag to:
//static.twilio.com/libs/twiliojs/1.2/twilio.min.js
But this is just a loader script for building the real twilio.js library here:
https://static.twilio.com/libs/twiliojs/refs/82278dd/twilio.min.js
And none of these supports Webpack.
https://github.com/twilio/twilio-node also exsistes, but this is for node.js only - not just plain client side javascript.
So my question is, is there a way to require the twilio.js library with Webpack ?
This answer is for Twilio.js client version 1.3.16 (script file, documentation).
The Twilio codebase is pretty bad. They don't publish their code to npm, and simply loading the twilio.js file from their CDN has side effects, including reading from window and looping through all script tags on the page. This means, even with the below answer, the client code can't be loaded in node, blocking server side rendering and testing, etc.
I published the package to npm as a mirror of the code, but it's not straightforward to use. Webpack can't correctly handle whatever bogus require structure they have set up. First, install:
npm install --save twilio-client-mirror
Then to use, require as normal:
import * as loadTwilio from 'twilio-client-mirror';
However, you can't actually use the loadTwilio object. You have to reference the global Twilio object, injected by the script:
const Twilio = window.Twilio;
Twilio.Device.setup(token);
...
This is a first attempt I made to try to include this flaky code inside a modern codebase. Hopefully with the coming 1.4 beta they will address these issues.
I know this is late, but I, too, just wrestled with this issue. Being new to Node, TypeScript and Webpack, I failed to understand that Webpack should be used for client-side scripts, while the Twilio-node library is a server-side library (as discussed loosely here). In other words, you shouldn't use require('twilio') in any client-side scripts...only Node scripts.
I had success with the following:
Add <script type="text/javascript" src="//static.twilio.com/libs/twiliojs/1.2/twilio.min.js"></script> to my main .html page
Use var twilio = require('twilio'); inside of a Node (server) script...not in client-side JavaScript (for example, add the Twilio calls inside of API methods, which can be created using a framework such as Express)
If you happen to be using TypeScript for Node scripting, use a transpiler such as the native TypeScript transpiler tsc (easy to do from a command line). If using JavaScript, use GulpJS (my fave) or GruntJS to help you consolidate and even run your Node server-side scripts
Use Webpack for anything else
Again, I'm new to this, so I'm open to input or corrections if I've stated anything incorrectly.

How to import javascript code both on the client and on the server side when using node.js?

I have a couple of Javascript functions I need to use both on the server side and on the client side in a node application.
On the server side, I could create a module and require it. I would need to module.exports my functions. Unfortunately, I could not use that code module on the client side, because there is no such thing as require on the client side.
I don't want to maintain the (nearly) same code in two version of the files. Is there a standard/safe way to import Javascript code in a node module? I mean literally, without using require and module.exports? Or is there another solution to my issue?
You're looking for browserify, which lets you run Node-tyle modules with require() and module.exports in the browser.
I have used browserify in the past. It allows you to use common.js style require syntax on the client side. A word of warning, you will probably have to use a single client side entry point, and therefore re-write a lot of your client side code.
Here's the link - borwserify
I'm sure I've seen Ember implement its own require method but I can't find any documentation for it.
On the way I saw http://www.requirejs.org which creates its own new require method which works which both the browser and nodejs.

Javascript library for both the browser and node

I want to write a javascript library that works like an SDK for an external API.
Ideally this library could be used both for frontend projects, in the browser and for backend projects using node.js.
Initally I wasn't considering node so I was planning to require jquery as a dependency for using the ajax functions (for making the API calls) and deffered objects, but now I have second thaughts.
Considering that my goal is to have the same code base for both scenarios what do you think I should do? Is using the jquery npm package a good idea, or do you have other suggestions?
You can use the jquery package from the npm repo without problems.

Categories