Vue project and googleapis - will not build - child_process errors - node.js

Goal
Install and build the googleapis package within a vue-cli project.
Example
https://github.com/ChaddPortwine/test-googleapis
To create this example I simply:
vue init webpack test-googleapis
npm install
npm install googleapis --save, npm install google-auth-library --save
npm run dev (so far, okay, app builds and runs)
Add line, import googleapis from 'googleapis' to main.js
npm run dev (ERR Child_Process)
Errors
ERROR Failed to compile with 13 errors 11:16:12 AM
These dependencies were not found:
* child_process in ./node_modules/googleapis/node_modules/google-auth-library/lib/auth/googleauth.js
* fs in ./node_modules/google-p12-pem/index.js, ./node_modules/googleapis/lib/googleapis.js and 5 others
* net in ./node_modules/forever-agent/index.js, ./node_modules/tough-cookie/lib/cookie.js and 1 other
* tls in ./node_modules/forever-agent/index.js, ./node_modules/tunnel-agent/index.js
To install them, you can run: npm install --save child_process fs net tls
Question
How do I get the app to build with googleapis?

You are getting these errors because the googleapis library is a Node library, as in, it does not work on the client side (browser), so Webpack can't handle it properly.
You can use it in Node based back-ends such as Express, but not in a client side Vue app - it might work with a server-side rendered Vue app via Nuxt, not sure though, haven't tried.

Related

How to include polyfills in self-published npm package so that it does not cause errors when used with Webpack v5.x?

Hi this is my first npm package (it is a React component library) that Ive published and I realized that while it works perfectly fine when used with Webpack v4.x, the issue is that anyone who uses Webpack v5.x or uses npx create-react-app command to create a React app and tries to use my npm package will encounter a bunch of errors due to Webpack v5.x no longer including polyfills.
Thus the person will have to install a number of npm packages and then configure their Webpack.config.js file to include a number of fallbacks.
For example, the person will get 15-20 error messages when they try to use my npm package such as cannot resolve crypto or cannot resolve http, etc. This is due to one of the dependencies for my npm package being the npm package ‘ws’.
Is there anything I can do on my end when publishing my npm package so that these additional steps for users of my npm package is not necessary and they won’t have to install a bunch of npm packages and then edit their Webpack.config.js file just to able to use my npm package?

google-auth-library has missing dependencies when installed

I am trying to use google-auth-library with a react app but am getting various errors which seem to indicate missing dependencies. The errors are all in a format similar to this:
Module not found: Error: Can't resolve 'buffer' in '/private/tmp/minimal-example/node_modules/buffer-equal-constant-time'
The error messages include details on how to add a polyfill for the missing dependencies, but even after going through and adding all these polyfills I am unable to use the library. The logs for the development server still show errors for missing files, and the browser console has the following error:
GET http://metadata.google.internal./computeMetadata/v1/instance net::ERR_NAME_NOT_RESOLVED
Steps to reproduce:
Install Node 16.13.2
Create a react app npx create-react-app minimal-example
Enter directory for the created project cd minimal-example
Install google-auth-library npm install google-auth-library --save
Add the following code to ./src/App.js
const {GoogleAuth} = require('google-auth-library');
Start the development server npm start
Observe errors
What am I doing wrong?
I Have the same problem with same google-auth-library package!
This is a problem with using webpack 5 on React scripts=> v5
Have three solutions to resolve:
downgrade react-scripts to version 4.0.3. on package.json file.
Overwrite the config webpack config, but, i will need install react-app-rewired to do this, because react app not have webpack.config on tree app files.
you can eject the script to root folder executing npm run eject, but caution, this action is permanent, more here: https://stackoverflow.com/a/48395890
Some people answered this problem in How to Polyfill node core modules in webpack 5
and https://github.com/facebook/create-react-app/issues/12072

get error when trying to use twilio's npm package in meteor

I am trying to use the twilio node.js library with my meteor application. I was able to install the package using meteor npm install --save twilio
and it installed correctly. However, when I use import twilio from 'twilio'; I get this error
Error: Cannot find module 'crypto'(…)require # modules-runtime.js?hash=637cb12…:119meteorInstall.node_modules.twilio.lib.webhooks.js # modules.js?hash=9468cd4…:38774fileEvaluate # modules-runtime.js?hash=637cb12…:191require # modules-runtime.js?
Any thoughts on how to fix this. Seems to be a meteor error.
Normally, when you hit the command meteor npm install it should create a folder name meteor-node-stubs (/node_modules/meteor-node-stubs) in which the dependencies such as crypto etc. is arranged.
I think there is a problem with this folder in your project. My suggestion is to check whether you have this folder.
If you do not have it, you can try to install it by meteor npm install --save meteor-node-stubs That should solve your problem if this is the case

Using NodeJS plugins in Electron

I am new to Electron (Atom-shell), and I am trying to load a NodeJS plugin into the application I am building, but I don't know how. The documentation is not clear on that.
For instance, I am trying to use sqlite3 plugin in my app, I used npm install sqlite3, and it was successfully installed. But the application throws and error when I try to call it var sqlite = require('sqlite3'). Are there any further steps I am not aware of ?
Thanks.
For pure JS (i.e. not native) modules you need the following:
Have the module listed in your package.json dependencies
Let electron know where to find the module (e.g. export NODE_PATH=/PATH/TO/node_module)
The first requirement is obvious and the second has its roots in this issue.
For native node modules (such as sqlite3) which use C++ bindings, you need to build them against electron headers to work. According to electron docs, the easiest way to do that would be:
npm install --save-dev electron-rebuild
# Every time you run npm install, run this
./node_modules/.bin/electron-rebuild
To install the npm modules correctly you should go into the folder of your electron app and install the module via npm.
npm install --save sqlite3
The flag --save is important, because npm will install the module inside your app.
Afterwards the require should work.

emberjs, node and dependencies

I declare dependencies in my app.js (ember) file, such as:
var _ = require('underscore');
Since my app.js file will be sent to the client and need to execute in a browser, how would this code be made available to the client?
Currently I'm using lineman to concatenate and uglify all my js files, and inside my vendors folder I did include underscore.min.js (all of this get bundled up into app.js) - yet my app isn't working.
Could someone kindly explain the process of adding npm packages to an ember app and the resulting requirements on the client side?
You can use Ember Browserify to use node packages in your ember app.
See this answer for specific usage.
To install Ember Browserify:
npm install --save-dev ember-browserify
and utilize something from a package isntalled through NPM:
import Xyz from 'npm:xyzPackage';

Resources