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?