I'm using Webpack to bundle dependencies, one of which is the emailing service postmark. This service depends upon something called child_process that apparently ships with node.
The problem is, when I attempt to run webpack to bundle my app, it complains:
Module not found: Error: Cannot resolve module 'child_process' in ...
Most of the answers online say that, in response to this error, I should add the line:
node: {
child_process: 'empty'
}
to my webpack config. But this makes no sense, because then webpack just doesn't try to look for child_process, and consequently, when I run my app, I get the following error:
Uncaught TypeError: exec is not a function
which is an error from postmark (the service that relies upon child_process) complaining that the exec function within the child_process module doesn't exist.
Thus, I'm wondering how I can include the child_process module in my build without webpack complaining?
Front-end developer of Postmark here.
It looks like you're trying to bundle postmark.js into your client-side JavaScript but https://github.com/wildbit/postmark.js is a Node.js library. This means it will not run in the browser and requires a running Node.js server.
The main reason for not supporting browser environment is security. As you can see in this example:
var postmark = require("postmark");
var client = new postmark.Client("<server key>");
it requires you to insert the auth token. Bundling this with your client-side JS would expose it and allow everyone access your postmark account API.
Hope this clarifies it.
Related
I have included (via npm) the twilio/voice-sdk package (v.2.1.0) into a project. When I include the following code (as shown in many examples):
const Device = require('#twilio/voice-sdk').Device;
I get a console error stating:
"Cannot find module 'events' in '#twilio/audioplayer/es5'". I am trying to import this onto the client side, not server.
I get this whether I use require or import.
As an attempt around this, I have also include the node package #twilio/audioplayer, but to no avail. Kind of stuck as to what is going on here.
I am trying to use this on a Wix (or Velo more specifically) project. Hoping to create a dialer that can both answer and instigate phone calls on a site that already exists on that platform.
I have installed both of the above npm packages into my project, but get he above enumerated error.
Any ideas from the Internet?
Additional Information:
If I add the 'require' on the server side I do not get the same error. I was going to try this and then do an async call to the server to get my Device object. However, the Twilio Device SDK package utilizes the Window object, which of course does not exist on the server side.
The #twilio/audioplayer package uses the "events" module. This module is available in Node.js and when applications are bundled with something like Webpack is polyfilled.
I haven't used Velo, but I assume they are bundling differently in a way that doesn't add polyfills for this. I'd recommend installing the events npm module to your project too. That should provide the EventEmitter that the library is using for the browser environment and stop this error.
I had a similar problem, where I can import Device, but cannot construct it. The problem I had was that the bundler (in my case Vite) doesn't have a polyfill to run some functions inside the #twilio/voice-sdk.
The solution in my case was by installing polyfill on Vite.
Here is how:
First, install these packages:
npm i #esbuild-plugins/node-globals-polyfill #esbuild-plugins/node-modules-polyfill --save-dev
Then add the polyfill config to your vite.config.js. Here is link of the code: https://medium.com/#ftaioli/using-node-js-builtin-modules-with-vite-6194737c2cd2.
Because I use React, I still need to add plugins: [react()] inside the polyfill config. So it becomes something like:
export default defineConfig({
plugins: [react()],
// rest of the polyfill config
})
Now you can do:
import { Device } from "#twilio/voice-sdk";
new Device(token);
I have a node module that I am building, and I want it to be able to execute on the server (in nextjs server side rendering) and the client (call additional lifecycle methods in the UI). This same module also needs to work when used purely as a js library that can be included in a <script> tag on the page. This module depends on the uuid module, which has logic in it to check if it is running in a browser or server context, and use the proper random number generators/crypto libraries that are available in that context.
If I don't specify a target in my webpack config, the bundle works great in a client browser. It includes the webpack browser logic just fine. But it doesn't work in the server case - webpack removed the server capable logic in the uuid module.
If I target: 'node' in my webpack config - it executes just fine as a node module on the server and the client. It seemingly included all of the logic this time. But now it doesn't work if included just as a script tag on the page. I get ReferenceError: require is not defined from the file that depends on the uuid module.
It seems like the uuid module should handle these different environments just fine, but webpack is messing with that. How can I let that module resolve the proper implementation at runtime?
I unfortunately do not have a minimally reproducible example, or additional code to share at this time. I figured someone might have run into this with webpack (or even webpack and the uuid module) and know the solution.
I was trying to do this by building a single version of the package, but I don't think that is possible.
What is possible is building multiple versions, and then hosting the web bundle via unpkg or jsdelivr via an entry in package.json. Those entries can point to the target: 'web' version of the package, while the npm package can point to the target: 'node' version.
I'm trying to load in audiosprite in my React app which is running on a Webpack server and I'm getting the following error:
Module not found: 'child_process' in
C:\Users\BenLi\Desktop\development
projects\app\node_modules\audiosprite
Have no idea what this could be or why it's occurring with this module as apparently, Webpack should not throw child_process errors as it comes with it.
I'm including it in my app like so:
import audiosprite from 'audiosprite';
The error in coming from here in the file:
function spawn(name, opt) {
opts.logger.debug('Spawn', { cmd: [name].concat(opt).join(' ') })
return require('child_process').spawn(name, opt)
}
How do I fix this error?
TL;DR
There is no way around this unless you (maybe) switch to Browserify (need to test this myself) which offers a browserify-fs module. Since the browser has no access to the file system or child processes anyways, the module audiosprite can't be used in this usecase. The browser cannot do what it's incapable of.
Explanation
This is because of Webpack. Webpack, by default, is designed to compile code to run in a web-browser environment. The whole reason it exists is to bundle everything up to be browser-friendly (hence the name "web pack").
Node offers some built-in modules such as child_process, path, os, fs, etc. that only exist in a Node environment. When Webpack comes along and tries to bundle code for the browser, the browser does not have access to these modules. Thus, when modules such as audiosprite use child_process, Webpack bundles them for the web by default and you no longer have access to these modules. This explains why the error reports that the "module is not found".
"Solutions"
A "fix" is to specify your Webpack configuration to compile for usage in a Node-like environment, where you do have access to these built-in modules. That way, Webpack won't mess with the built-in modules and child_process can be used. You can do this by specifying the target option. From the Webpack Configuration documentation:
target
"web" Compile for usage in a browser-like environment (default)
"node" Compile for usage in a node.js-like environment (use require to load chunks)
(documentation cut for brevity)
But there's a consequence. Because of you setting your target as a Node environment, require will not work when using the browser as there is no require in the browser environment.
What you can do is keep the target environment the same ("web" by default) and try to mock the module for what you need. With the node option:
node
Include polyfills or mocks for various node stuff:
<node buildin>: true, "mock", "empty" or false
And apply it to the Webpack configuration file:
node: {
fs: "mock"
}
But this will error out telling you:
Error: No browser version for node.js core module 'fs' available
So this is just by design. There is nothing you can do because bundling for the browser environment will inevitably forbid you from accessing the file system because it can't. You can't provide a browser mock for a module which does things that are impossible in the browser. The same goes for child_process and others.
Edit: I've been looking for some alternatives, and Browserify may or may not work. They do offer a browserify-fs module as a replacement to Node's fs. I have yet to test this so I'm not sure if it could be useful but it looks better than what Webpack does now.
I guess you have to let NPM install the dependency
just
npm install --save autiosprite
Just want to know is it possible to initialize/start node.js from C++ application. Root of this question is that I am having a C++ console application, which launches an javascript application which does require('os').Now It is failing as I suppose node.js is missing or not initialized as I am getting Uncaught ReferenceError: require is not defined
Edit 1:
I tried browserify and it resolved the require() issue. Now problem is that I am not able to use any of the methods exposed by the required module.
I am getting "undefined is not a function" error.
Since require is not defined it seems like your JavaScript engine is not supporting the CommonJS specification. You cannot run node modules without CommonJS support.
Generally it's hard to run node modules anywhere but in node, because of the node internals. There exists software to transform node modules and scripts to other platforms like webpack and browserify. Maybe those will create JavaScript that you can use in your project.
I am running a polymer starter kit app and I need a firebase connection, but I don't know why the browser say that require is undefined.
$ npm install firebase --save
var Firebase = require("firebase");
The problem is that require is a function provided by node.js's 'module' module. It is not part of the ES5 spec, and so it is not natively available in web browsers.
In order to load modules using require, you will have to use a web bundler (like Webpack, Browserify or RequireJS). This will bundle together all of the JS in your project into a single file, automatically handling calls to require.
I'd recommend reading Getting started with Webpack to get you on your way.