I am new to Javascript and am interested in using a library from github. I am using netbeans to code and I have installed node.js. However, I am still getting the error 'Require is not defined'. I have installed 'browserify' as this seemed like a common solution, but I am still getting this error.
Am I doing something wrong?
Image of set up libraries
Update
I have also found that there is a problem with one of my libraries, think it could be relevant to the original problem.
Problem with library
If you are developing NodeJS based project, you should use NodeJS project type in NetBeans where require() is considered as known global function and as such NetBeans won't show the hint.You can change your current project to enable NodeJS support by right clicking on the project, select Project Properties -> NodeJS and check Enable NodeJS support.
If you are using RequireJS library, you can also enable RequireJS support in Project Properties in JavaScript Frameworks -> RequireJS
I guess this is because require() does not exist in the browser/client-side JavaScript.Can you give it a try to following statements;
Use <script> tag.
Use a CommmonJS implementation. Synchronous
dependencies like Node.js
Use an AMD implementation.
And keep library codes and application codes seperated. ( bundle.js and script.js )
Browserify will take all the script files necessary and put them into the "bundle.js" file, so you should only have to include "bundle.js" in the HTML file, not the "script.js" file.
Related
I'm a Webpack beginner who is trying to refactor an old JavaScript/jQuery application by decomposing it in several ES6 module usign Webpack and Babel.
So far i've managed to refactor the core components of the application, but now i'm stucked with a module that requires jQuery (v2.2) and another library ( BIMsurfer #V1) available on the global scope.
The problem is that the BIMsurfer library isn't designed as a module and uses Grunt to produce a minified file.
I've seen that i could use the webpack.ProvidePlugin but i'm getting this error:
TypeError: $.extend is not a function [bimsurfer.js:14]
I've created a GitHub repo with the minimal code to reproduce the error.
My goal is to produce a single bundle with my JavaScript library that can be re-used in several application.
Downloaded your repo and did some test. The webpack config is fine. But there are other problems you need to fix.
the src/libs/jquery.js file is empty.
in the src/libs/bimsurfer/bimsurfer.js file, at line 15015 and 22438, the declaration of WebGLDebugUtils and SceneJS_PubSubProxy are missing the var keyword.
once you fix these two problem, you should be able to see a clean console in chrome devtool.
****** EDIT *******
I do realize the mistake now, i was running my script in my terminal when i was testing my require.
****** OLD ****
The answer might all ready be here on the page, but i have not been able to find it, the general answers i see is that i cannot use "require" client sided.
The thing is the script i am trying to run works perfectly on my school laptop. But it doesnt want to run on my on Desktop at home.
I am trying to run a script where i want to require like this. "var fs = require('fs');"
But the console in my browser just gives me this error ( ReferenceError: require is not )
I am using Visual Studio Code, with Node.js.
I have a basic index.html file which uses 1 script.js file. Nothing else is being used for it.
A link for my files should you want to take a look (
https://drive.google.com/file/d/1VgEmwtcHkURFT1WmPOnEKr_OHLT_SY78/view?usp=sharing )
I am using Visual Studio Code, with Node.js.
I have a basic index.html file which uses 1 script.js file.
So you have two sets of JS.
JS that runs in Node.js
JS that runs in the browser (delivered via index.html)
var fs = require('fs'); is very much in the former category. require is a built-in in Node.js. fs is a core library of Node.js.
You are trying to run it in the browser, where it isn't supported and does not work. You need to run it in Node.js.
i see is that i cannot use "require" client sided.
There are browser-side implementations of require and tools (like Webpack) which will bundle modules into a browser compatible file, but neither of those approaches will help you here because fs itself depends on Node.js.
require() is not standard JavaScript, it's built into NodeJS to load modules.
Try using Express or similar to run a simple web server and it should work. Right now it's not working from home because it's not being compiled by the Node engine.
require() it's not an internal function of javascript in the front-end, you're going to need to import some library that realizes this for you, as for example require.js or browserify.
Otherwise fs is only supported in NodeJS you need to run in the server not in the browser.
this helped me, check your package.json for type:"module" and remove it.
I am doing a HTML/Javascript project and part of it involves using glMatrix. My problem is that I have no idea how it actually implement it and use it.
I tried doing what you'd usually do to use a Javascript file in a HTML page:
<script type="text/javascript" src="src/lib/gl-matrix.js"></script>
The folder 'lib' being where all the files related to glMatrix is stored. The problem is that if I run this file, I get this:
Uncaught ReferenceError: exports is not defined at gl-matrix.js:29
I have not changed anything in the glMatrix code, so the problem is presumably how I'm using it, but the website gives no documentation or anything that would instruct me on how to actually use this.
So how do I use glMatrix in my projects?
The version I'm using is 2.3.2.
You are trying to run CommonJS code in the browser, which needs to be prepared by a transpiler first. You can use Webpack for that, or Browserify.
I am trying to implement elasticsearch.js in my project and when I added:
var elasticsearch = require('elasticsearch');
It broke my project and said require is not defined. I did research and saw that I would have to use a library called require.js within my project but that is changing my whole project structure just for one script.
I wanted to see if anybody knows how to call an instance without using require:
var elasticsearch = require('elasticsearch');
var client = new elasticsearch.Client();
You seem to be following the instructions for using elasticsearch in a node project or using a bundling system that supports CJS modules (like browserify or webpack). If you want a script that's for a browser-only project, see the Browser Builds page.
Note that at this time, they have this note:
These versions of the client are currently experimental.
You're using a version that should be used in a node project or through a module loader/bundler. The require keyword is node specific, the browser has no idea what to do with it. Require.js would help, you can also install Rollup or Webpack which would bundle the CJS (require) dependencies and your code into one file.
Or to be simple just go to https://www.elastic.co/guide/en/elasticsearch/client/javascript-api/current/browser-builds.html as Jacob said
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.