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.
Related
We are using guacamole-common-js in one of our projects and using guacamole-common.min.js in the script results in a module not found error:
<script type="text/javascript" src="guacamole-common.min.js"></script>
I am using guacamole-common.js: 1.4.0-a
At first, I thought this might be related to guacamole-common.js version but I tried downgrading its version but still facing the same error.
The use of module.exports indicates that the file is a CommonJS module. This is the default module format of Node.js and is not supported by browsers.
Either:
You have a module designed for Node.js and not web browsers. There might be a browser targetted version available.
You have a module designed for use with a module bundling tool (such as Webpack or Parcel) and should use one of those to build your browser-side JS application.
Try carefully reading the documentation from wherever you downloaded the JS file from.
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 written a node module and published it as a node package. It works when I use it in backend applications (pure nodejs, no babel or transpile).
However, when I use this same npm module in the frontend (in my case a 'create-react-app') application, it breaks. Bellow is the exact error:
Module parse failed: Unexpected token (14:2)
You may need an appropriate loader to handle this file type.
The error is referring to my use of the spread operator (...). I would prefer not to have to rewrite the library, and would rather add some kind of transpiler to package my library. I haven't found a clear solution to this, they are all very convoluted.
I have tried using rollupjs, and https://github.com/insin/nwb. Neither sadly seem to be what I'm after.
Run my code:
You can install the library to your create react app using npm i cbs-proxy-client#0.0.3. And then add the line const cbsProxyClient = require('cbs-proxy-client') or import cbsProxyClient from 'cbs-proxy-client' to any of your scripts.
Advice would be appreciated :)
A library used for frontend is expected to package an already transpiled version of the source javascript. To do this, you might want to use rollup as a build process in your library to create a bundle file. You can use babel to transpile your code for desired browser support. Let's say the bundle file is saved in dist/bundle.js. Now you will modify the package.json to load this bundled file as the entry file using main parameter in package.json
If you are building using rollup or webpack, it is easy to miss that the bundled file should be prepared as a library. This means that importing the file using commonjs should be able to export correct variables. A typical webpack build removes such exports because it is supposed to work straight on a browser. This blog is in my bookmarks titled "js library steps" since I was creating my first js library.
Note that you do not need to put your generated file in version control. You can use npm files property in package.json to package your bundled files while ignoring them in git.
I installed a npm package that had 'http' as a dependency, so I installed that as well. All that was downloaded by npm for 'http' was a package.json file which referenced a non-existent index.js file. Is the index.js indeed missing from package.json or am I doing something wrong?
I'm using systemJS as a library loader.
TL;DR: you can't run server-side modules inside a browser.
From what I understand, you're trying to use server-side JavaScript modules inside of a browser, which isn't going to work. Browser have (very) limited abilities to set up network connection, or read from local file systems.
The http dependency that you're refering to is part of the Node standard library. So for Node apps, running server-side, it's always available.
In your case, you assumed that because require('http') didn't work (in the browser), you needed to install a separate package for that (this package).
But even if that package was working properly (it isn't), it wouldn't have worked inside of a browser because it depends on other modules inside the Node standard library, that also aren't available in a browser.
I don't know if CouchDB has a REST API itself that you would be able to use from the browser, but if not, you're going to have to implement a server-side API that will act as go-between between the browser and CouchDB.
From the browser, to talk to CouchDB, try the PouchDB library (https://pouchdb.com/) and put the URL to your CouchDB in the constructor. It's intended for connecting to a local PouchDB (javascript implementation of CouchDB) but their APIs are identical. Or, try actually using a local PouchDB and then syncing between the two databases.
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.