I'm playing with the Google Cloud API Speech-to-Text Node client library. Works quite well, and well described in their documentation.
Problems come when I wanted to use it in a VueJS : it simply seems not to be supported.
First attempt :
npm run serve returns
ERROR Failed to compile with 3 errors 11:35:13
This dependency was not found:
* http2 in ./node_modules/#grpc/grpc-js/build/src/channel.js, ./node_modules/#grpc/grpc-js/build/src/subchannel.js and 1 other
But http2 is a core module in Node now, and when I run node -p http2 I do get results.
Second attempt :
npm i http2
npm run serve returns
WARNING Compiled with 1 warnings 11:41:07
warning in ./node_modules/http2/lib/protocol/index.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
In browser, console provides error
Uncaught Error: not supported
at Root.loadSync (root.js?ee6e:234)
at Object.loadSync (index-light.js?071f:69)
at Object.eval (index.js?f193:244)
at eval (index.js:250)
at Object../node_modules/#grpc/proto-loader/build/src/index.js (app.js:1383)
at __webpack_require__ (app.js:724)
at fn (app.js:101)
at Object.eval (grpc.js?6f5f:34)
at eval (grpc.js:288)
at Object../node_modules/google-gax/build/src/grpc.js
My Vue App is basic and can be retrieved using vue-cli by running vue create app. I then added in the HelloWorld Component the basic code displayed in the quickstart guide.
My theory is : VueJS can't use google-gax module due to gRPC. What do you think ?
Currently the Google Cloud API client libraries such as the one you are using cannot be used from the browser. As you noted, those libraries use gRPC, which in turn uses http2. The problem is that currently no major browser allows JavaScript libraries to use the full functionality of the HTTP/2 protocol, so there is currently no complete browser shim for the Node http2 module.
The http2 module you got from npm is a different library with a different API. It most likely also does not work in the browser for the same reason.
Related
Has anyone successfully deployed a SvelteKit app using npm pg to Netlify/Vercel/Cloudflare? My local dev implementation works just fine with how I have it set up ( db.ts file with a query function in lib/server, and then using endpoint actions and the load function in +page.server.ts files)
My build errors are as follows:
node_modules/pg-connection-string/index.js:3:18: ERROR: Could not resolve "url" node_modules/pg-connection-string/index.js:4:17: ERROR: Could not resolve "fs" node_modules/pg-pool/index.js:2:29: ERROR: Could not resolve "events" node_modules/pg-protocol/dist/parser.js:9:41: ERROR: Could not resolve "assert" node_modules/pg/lib/client.js:3:27: ERROR: Could not resolve "events"
And many of the above display a previous log message with something along the lines of:
✘ [ERROR] Could not resolve "buffer"
node_modules/safe-buffer/index.js:3:21:
3 │ var buffer = require('buffer')
╵ ~~~~~~~~
The package "buffer" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
I've been trying to get it to just build and it seems like it isn't able to use the pg package because it isn't a true node server environment. For each adapter it attempts to build with (except the node adapter) it refuses to build anything to do with the pg npm package. I could be wrong about the why, but my question about the how remains.
My hope is to avoid something like Prisma (which hasn't been working for me either) and I am trying to do this as "intended" meaning that I want to use SvelteKit as both the front end and the true backend. So an additional express server or the like is not the solution I'm looking for.
EDIT: I have also successfully deployed the app to Azure using the node adapter, but pg AND Postgres.js both do not work.
I built a Minting API using hardhat. I want to host it on heroku/vercel.
However I get the below error on deployment.
Error: Cannot find module 'hardhat'
I am using node.js, express.js
I have the below require.
const hre = require("hardhat");
My code works perfectly fine on localhost.
Do check if the 'hardhat' is under devDep or dep. It should be under dep in package.json.
I am trying to use graphql-upload in a typescript express app (graphql api) built with webpack. When I run with ts-node my app works fine. But when I compile with webpack and then run I get a weird error when I try to upload a file.
My setup
Typescript app
Apollo server / Typegraphql
Build with webpack
My Code
(stripped down to the essentials)
https://github.com/ziggy6792/graphql-file-uploads
My Problem
When I run with ts-node yarn start:ts:node then run yarn test an image gets uploaded no problem
But then I build with webpack yarn start then run yarn test I get the following error
/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:56105
if (!isObject(operations) && !Array.isArray(operations))
^
TypeError: isObject is not a function
at Busboy.<anonymous> (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:56105:18)
at Busboy.emit (node:events:378:20)
at Busboy.module.exports../node_modules/busboy/lib/main.js.Busboy.emit (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:32204:33)
at PartStream.onEnd (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:32528:15)
at PartStream.emit (node:events:390:22)
at Dicer.onPart (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:32386:13)
at Dicer.emit (node:events:378:20)
at Dicer.module.exports../node_modules/dicer/lib/Dicer.js.Dicer.emit (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:45439:35)
at Dicer.module.exports../node_modules/dicer/lib/Dicer.js.Dicer._oninfo (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:45540:12)
at SBMH.<anonymous> (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:45486:10)
[nodemon] app crashed - waiting for file changes before starting...
My Attempts to solve
I am not sure if this actually a problem with graphql-upload or webpack or something else. I also noticed that my issue looks similar to this issue, but I didn't really understand if there were any fixes to that issue and if indeed it is the same issue I am facing.
I tried to upgrade webpack (branch upgraded-packages) but this made the problem worse as I get this issue when I start the server
TypeError: Cannot read property 'graphql' of undefined
at getPeerDependencyGraphQLRequirement (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:104216:44)
at Object.ensureInstalledCorrectGraphQLPackage (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:104221:32)
at Function.checkForErrors (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:103346:27)
at Function.generateFromMetadataSync (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:103325:14)
at Function.generateFromMetadata (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:103315:29)
at Object.buildSchema (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:103940:61)
at /Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:99831:41
at Generator.next (<anonymous>)
at /Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:99819:71
at new Promise (<anonymous>)
Any help would be greatly appreciated.
My best guess at the problem
From reading the linked issue it seems like isObject seems to ship ECMA Script modules with a newer version. Webpack might pick the ES modules version, but this version differs in the sense that the default export is now default and Apollo Server would have to import it as such or call isObject.default. In this changelog they say it might be breaking for users using bundlers.
Your two options now:
You could use yarn force the dependency to a previous version of isobject:
{
...
"resolutions": {
"graphql-file-uploads/isobject": "3.0.1"
}
}
Or you could simply not bundle your app and use TypeScript for building instead. You lose the benefits of bundling, but you are using an environment that is much more common for running node apps. Furthermore you will use TypeScript as a compiler just like ts-node unifying your development and production tooling.
You can compile using TypeScript like this:
yarn tsc 'src/**/*.ts'
In your TSConfig you should configure the output so that it also emits files to /dist.
I wanted to start using Google Authentication in my nodejs webapp am using the googleapis package.
The moment I require this package after installing it, I immediately get the following error:
protocol sync?8d88:2 Uncaught Error: Cannot find module './framer'
at webpackEmptyContext (eval at ./node_modules/http2/lib/protocol sync recursive (app.js:1053), <anonymous>:2:10)
at Array.map (<anonymous>)
at eval (index.js?1fa7:46)
at Object../node_modules/http2/lib/protocol/index.js (chunk-vendors.js:7788)
at __webpack_require__ (app.js:854)
at fn (app.js:151)
at Object.eval (http.js?4679:136)
at eval (http.js:1264)
at Object../node_modules/http2/lib/http.js (chunk-vendors.js:7711)
at __webpack_require__ (app.js:854)
I've looked into the source here:
var modules = ['./framer', './compressor', './flow', './connection', './stream', './endpoint'];
modules.map(require).forEach(function(module) {
for (var name in module.serializers) {
exports.serializers[name] = module.serializers[name];
}
});
And confirmed that those files are present:
I've already tried to reinstall the packages (http2 & googleapis) but no change.
Why would those relative require statements fail? The files are clearly present.
My webapp is a client-server app using vue. Also note that this is my first little project using node so if you need any additional information on this issue from me just let me know.
Thanks in advance for the help.
I also faced this issue while trying to make googleapis lib work in React app. Reason is googleapis is recommended for server-side web apps.
For React/Client side web apps, I made it work following this documentation.
https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow#js-client-library
I'm using the library node-rsa (https://www.npmjs.com/package/node-rsa) in a NuxtJS project. When building for production using the command nuxt build (which includes minification of JS and CSS by default), the build process breaks near the end with the following message:
ERROR in 0.nuxt.bundle.7c6932a7a42bdaaa7fa4.js from UglifyJs
Unexpected token: name (pem) [./~/node-rsa/src/formats/pkcs1.js:55,0][0.nuxt.bundle.7c6932a7a42bdaaa7fa4.js:42640,20]
Error: Webpack build exited with errors
at /home/ubuntu/front-end/node_modules/nuxt/dist/nuxt.js:904:44
at /home/ubuntu/front-end/node_modules/webpack/lib/Compiler.js:267:15
at Compiler.emitRecords (/home/ubuntu/front-end/node_modules/webpack/lib/Compiler.js:362:37)
at /home/ubuntu/front-end/node_modules/webpack/lib/Compiler.js:260:12
at /home/ubuntu/front-end/node_modules/webpack/lib/Compiler.js:355:11
at next (/home/ubuntu/front-end/node_modules/tapable/lib/Tapable.js:154:11)
at Compiler.compiler.plugin (/home/ubuntu/front-end/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
at Compiler.applyPluginsAsyncSeries1 (/home/ubuntu/front-end/node_modules/tapable/lib/Tapable.js:158:13)
at Compiler.afterEmit (/home/ubuntu/front-end/node_modules/webpack/lib/Compiler.js:352:8)
at Compiler.<anonymous> (/home/ubuntu/front-end/node_modules/webpack/lib/Compiler.js:347:14)
at /home/ubuntu/front-end/node_modules/async/dist/async.js:460:16
at iteratorCallback (/home/ubuntu/front-end/node_modules/async/dist/async.js:1034:13)
at /home/ubuntu/front-end/node_modules/async/dist/async.js:944:16
at /home/ubuntu/front-end/node_modules/graceful-fs/graceful-fs.js:43:10
at FSReqWrap.oncomplete (fs.js:117:15)
I was able to temporarily mitigate the issue by disabling uglifyJS (solution found at https://github.com/nuxt/nuxt.js/issues/250) but that does not seem like a long term solution. What is the correct way to resolve this?
Potentially related issue: Webpack breaks when i include node-rsa library
The problem is that I was trying to use a node library (not uglify-safe) on the browser without webpacking it. I switched to using pure JS for my crypto needs and everything went fine.