Issue integrating grpc / dependencies

mboeni

Hey there

We’re using grpc for client/server communication and I am currently working on the client side. I now have the issue that Quasar/Electron seems to be missing some dependencies. I get the following error when using grpc:

Uncaught Error: Cannot find module 'C:\dev\nx-ummc\node_modules\grpc\package.json'
    at webpackEmptyContext (eval at ./node_modules/grpc/node_modules/node-pre-gyp/lib sync recursive (0.js:10), <anonymous>:2:10)
    at Object.exports.find (pre-binding.js?3eca:20)
    at Object.eval (grpc_extension.js?c0f3:29)
    at eval (grpc_extension.js:64)
    at Object../node_modules/grpc/src/grpc_extension.js (vendor.js:3771)
    at __webpack_require__ (app.js:791)
    at fn (app.js:151)
    at eval (client_interceptors.js?5e97:144)
    at Object../node_modules/grpc/src/client_interceptors.js (vendor.js:3724)
    at __webpack_require__ (app.js:791)

and I also get:

 WARNING  Compiled with 3 warnings                                                                                   3:42:13 PM

 warning  in ./node_modules/grpc/src/grpc_extension.js

Critical dependency: the request of a dependency is an expression

 warning  in ./node_modules/grpc/node_modules/node-pre-gyp/lib/pre-binding.js

Critical dependency: the request of a dependency is an expression

 warning  in ./node_modules/grpc/node_modules/node-pre-gyp/lib/util/versioning.js

Critical dependency: the request of a dependency is an expression

i assume that I need to add grpc and the above mentioned files to webpack, but I have no clue on how that is done…This would be both for dev and build.

Here’s the hello world code:

export function grpcHelloWorld () {
  var messages = require('src/nxs/gwmessages/GatewayService_pb')
  var services = require('src/nxs/gwmessages/GatewayService_grpc_pb')
  var grpc = require('grpc');

  var client = new services.NexusGatewayService('192.168.14.220:8080', grpc.credentials.createInsecure());
  
  console.log ('GRPC reply:' + client.Hello('Yo, hello world, man.'))
}

Can anyone shed some light on how to make this work?

Cheers,
Michael

metalsadman

@mboeni no idea about grpc, tho see the discussion here https://github.com/quasarframework/quasar/issues/5605

mboeni

@metalsadman Yep, that looks like a lead…Although I’m not really sure where to add the extension

I think I need something like:

 cfg.externals = [
  'grpc'
]

But I’m not sure where to add that. Reading the link you posted, I had the impression that is for SSR mode only (referencing index.js / extensions.js). Where do I set this globally / for an electron project?

mboeni

@metalsadman okay, got it (quasar.conf.js):

      extendWebpack (cfg) {
        cfg.module.rules.push({
          enforce: 'pre',
          test: /\.(vue)$/,
          loader: 'eslint-loader',
          exclude: /node_modules/,
          options: {
            formatter: require('eslint').CLIEngine.getFormatter('stylish')
          }
        }),
        cfg.externals = [
          'grpc'
        ]
      }
    },

This fixes the warnings. But I still get the error:

external "grpc"?a322:1 Uncaught ReferenceError: grpc is not defined
    at eval (external "grpc"?a322:1)
    at Object.grpc (app.js:1238)
    at __webpack_require__ (app.js:791)
    at fn (app.js:151)
    at eval (GatewayService_grpc_pb.js?4c32:4)
    at Module../src/nxs/gwmessages/GatewayService_grpc_pb.js (0.js:11)
    at __webpack_require__ (app.js:791)
    at fn (app.js:151)
    at Module.grpcHelloWorld (utility.js?bcca:19)
    at VueComponent.keyListener (MainLayout.vue?713b:371)

mboeni

Debugging into this I found that there is a difference in the App.js code at runtime:

eval("module.exports = require(\"events\");\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXZlbnRzLmpzIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vL2V4dGVybmFsIFwiZXZlbnRzXCI/N2E3ZSJdLCJzb3VyY2VzQ29udGVudCI6WyJtb2R1bGUuZXhwb3J0cyA9IHJlcXVpcmUoXCJldmVudHNcIik7Il0sIm1hcHBpbmdzIjoiQUFBQSIsInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///events\n");

eval("module.exports = grpc;\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JwYy5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy9leHRlcm5hbCBcImdycGNcIj9hMzIyIl0sInNvdXJjZXNDb250ZW50IjpbIm1vZHVsZS5leHBvcnRzID0gZ3JwYzsiXSwibWFwcGluZ3MiOiJBQUFBIiwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///grpc\n");

Have a look at how grpc misses the “require(…)” part that any other module export has…Why is this and where is this generated?

metalsadman

Ive nothing to follow on this sorry, afaik grpc doesnt work well with webpack. You could chime in on that gh ticket, seem like that’s still open.

mboeni

@metalsadman I have…and I’m happy to do tests or whatever… It’s quite a puzzling issue…

asymness

@mboeni Were you able to find a solution / workaround to this problem?