Issue integrating grpc / dependencies

  • 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('', grpc.credentials.createInsecure());
      console.log ('GRPC reply:' + client.Hello('Yo, hello world, man.'))

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


  • @mboeni no idea about grpc, tho see the discussion here

  • @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 = [

    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?

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

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

    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)

  • 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?

  • 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.

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

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

Log in to reply