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
Related
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?
I'm trying to use lovell/sharp with Angular universal project, but I have an issue.
I build the server part via webpack and I added sharp to webpack's externals, but I got this error Unexpected character '�' (1:2)
so, I added node-loader to webpack, it builds the project and generates dist folder that contains main.js and sharp-*.node files
but when I run node dist/main I got this error:
Error:
Something went wrong installing the "sharp" module
node-loader:
Error: The specified module could not be found.
//sharp-ac5709806d227d1d966f7f0b76814d78.node
minimal reproduction:
https://github.com/eng-dibo/ng-sharp-issue
1- install dependencies npm install
2- build the server npm run build:server:dev
3- serve node dist/main
to check the webpack configurations, check this file './webpack.server.config.js`
issue solved
the problem is that the webpack plugin webpack-node-externals cannot work with monorepos, in this case it fails to get the correct path of package.json file, results in node modules don't be excluded.
I installed webpack into my react project, but the same error occurred every time when I use npm start:
The react-scripts package provided by Create React App requires a dependency:
"webpack": "4.42.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack was detected higher up in the tree:
C:\react\minimoj\node_modules\webpack (version: 4.43.0)
I tried to remove package-loc.json file + all node_modules + remove webpack name from package.json and reinstall it with npm install. Also I tried same with yarn, but it didn't help. I see that in node_modules version is 4.43 and after I use npm install webpack in the file package-loc.json it shows 4.43, but at the moment when I use npm start it changed to 4.42 and error occur. In addition I also reinstall node.js but it didn't help.
create .env file and add SKIP_PREFLIGHT_CHECK=true
I had similar with a newer webpack version being installed than what react_scripts required.
To fix I deleted webpack and webpack-dev-server from my project's node_modules, went to a console outside of the project dir and ran
npm uninstall webpack
npm uninstall webpack-dev-server
Then ran
npm install
npm run build
And all was well, as my package.json was correct without change.
Since webpack is mostly focused on common js according to some websites, I just tried rollup for my react project and it proved to be much more effective as it supports es+. I would highly recommend it. I took a couple minutes to have everything setup and ready. Also, as a good practice it is better to use yarn as npm has had a lot of known issues for node app management.
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.
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.