While trying to use this library
I initially got error ReferenceError: require is not defined.
To solve it, I added required library. This now started with another error as Module name "crypto" has not been loaded yet for context
FOR LEG PULLERS: This is not a duplicate question, As all the questions are either poorly answered or not answered.
I have done my research, EG: this does not tells where to try it.
this is unanswered. this does not tells where do I get those paths like 'path/to/filesize' and all other paths anyways if I get then also is useless in my context. this defines a module of its own, I need a predefined "crypto" module. The default google library is not doing the job.
From my guessing, you are under browser environment instead of developing a NodeJS app.
This crypto you refer to is actually for back-end (NodeJS), provided as NodeJS API, and also, the require keyword, is a NodeJS one.
And from my knowledge, there is no crypto in the default browser environment, neither is there a require. For most cases, there is a REQUIRE.JS and Browserify that let you use this type of require statement, but for your case, I suggest not to use them.
For crypto used in browser environment, I would suggest something using some third-party libraries, like crypto-js, and you without browserify or bower, you should pay special attention to its Usage without RequireJS section.
Related
I am used to simply using process.cwd() directly inside of node applications, however, I have recently read the node docs and saw that it recommends importing it from node:process.
So what is the difference from just calling it directly?
process.cwd()
vs importing it and calling it:
import {cwd} from 'node:process'
cwd()
I am currently building a CLI application in case that makes a difference.
Is there a difference?
Which one should I be using?
importing it from node:process guarentees that you get the built-in process module, not some global that some other code in the project has configured or overridden.
This may be done for safety reasons or just for robustness reasons so other modules in the project can't hack on a global process object before you get to use it.
It also may not normally be needed, but is considered good project hygiene as it deters certain types of hacking.
I want to make a module to be accessible globally (window). Just like jQuery. How can I do that in webpack?
If I have some file in src folder then how can I access globally.
Making a JavaScript module global doesn't require you to change your Webpack setup. Instead, you can simply create the src file as a JavaScript Module.
The linked MDN page gives detailed information about how this works and how to do it. As you can see, the JavaScript Modules system is supported by all modern browsers, which is why there is no need for any Webpack setup just to use a module.
EDIT given the nature of my reply, I have not answered the question directly. If you still wish to use Webpack, the Webpack documentation gives information on making things global. Such as here. Please note, you will see on that page that they actually try to dissuade you from making things global. Depending on your case, there may be relevant warnings here against this approach.
I am making a Electron app with Svelte and Typescript.
I started with this template for that exact purpose, but it disables node.js built-in imports (like fs) in the browser/electron frontend for security.
I do not need this improved security in my project, so I am trying to get node.js fs to work in the Electron browser.
I already modified the Electron Backend script that creates the Browser to re-enable nodeIntegration, and this works: using require("fs") in the Electron browser console logs the fs library.
Using this in the actual typescript frontend code does not work, however. From looking at the bundled JS, it seems like rollup is assuming that the import of fs is just available as a global variable, and trying to guess its name.
When building while importing fs and path, I get the following warnings:
(!) Missing shims for Node.js built-ins
Creating a browser bundle that depends on "path". You might need to include https://github.com/snowpackjs/rollup-plugin-polyfill-node
(!) Missing global variable names
Use output.globals to specify browser global variable names corresponding to external modules
fs (guessing 'fs')
path (guessing 'path')
The first warning suggests a 404 GitHub link that seems to be a polyfill for some Node built-in libraries. This isn't what I want, I want the real node.js fs library. It also informs me that I'm creating a browser bundle - I have tried setting the browser option of #rollup/plugin-node-resolve (used by the template) to false, but this did not help.
The second warning seems to simply inform that it's trying to guess global variable names - which it should not, it should keep the imports.
How do I allow importing Node.js modules here? The linked template project still closely resembles my current one.
Help is greatly appreciated.
Turns out that the deciding factor was the output.format of the rollup.config.js.
This was set to iife, which produced a result without require or import.
Changing it to cjs solves this problem.
I was going through the React codebase, and I noticed how React's require doesn't quite behave like in Nodejs. I don't get what's going on here.
Looking at line 19 on ReactClass.js for instance, there's a require('emptyObject'), but emptyObject isn't listed in package.json, nor does it say anywhere where that module's coming from.
https://github.com/facebook/react/blob/master/src/isomorphic/classic/class/ReactClass.js#L19
I did find "emptyObject" on npmjs, but the API there seems different from the one used in React; the .isEmpty grepped in React isn't related to emptyObject.
So where is emptyObject getting loaded from, and how is React's require doing what it's doing? This is not intuitive. At all.
The location of the emptyObject module which React refers to is https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/emptyObject.js#L9 Note that it doesn't follow the CommonJS module system.
To make it easier for Facebook to share and consume our own JavaScript. Primarily this will allow us to ship code without worrying too much about where it lives, keeping with the spirit of #providesModule but working in the broader JavaScript ecosystem.
From https://github.com/facebook/fbjs#purpose
The way of defining a module by adding #providesModule in the license header and loading those modules with require in Node is called Haste, a customized module system built for Facebook's open source projects.
In fact, unless you would like to understand the inner workings of React or contribute to Facebook's open source projects, you don't need to know that. In other words, it's not recommended to use Haste to write your own project.
Along the same lines, the invariant module being loaded at line 10 of ReactClass.js is declared at https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/__forks__/invariant.js#L9
As far as I know, both Eclipse and WebStorm don't support Haste so IDE can't help. But with Haste, the name of file and module should be the same, so you can find a module by searching for the filename, i.e. double shift in Webstorm and Ctrl+Shift+r in Eclipse. However, the emptyObject you asked about or invariant are not part of React so it's still cumbersome to find their origin.
Otherwise, there is a team that shares and organizes what they learn from hacking React that I contribute to occasionally and they have linked those requires by following Haste to the corresponding origin file e.g. https://annot.io/github.com/facebook/react/blob/cc3dc21/src/isomorphic/classic/class/ReactClass.js?l=19 You may want to see that.
I noticed how React's require doesn't quite behave like in Nodejs.
Right. Facebook has its own module loader. All modules have unique identifiers, provided by the #providesModule directive in each module. This allows you to use the identifier to load the module, instead of the file path.
Of course that doesn't work in a Node.js based environment. So when React or any other Facebook project is published to npm, all require calls are rewritten automatically to something that Node understands.
This functionality is provided by fbjs which contains shared dependencies and build helpers for all Facebook projects. This is where you find the emptyObject module.
If you look at React's gulp file, you can see how the module maps are constructed and that a custom Babel plugin is used to convert all require calls.
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