Quasar Framework

mboeni

If you don’t need it too fancy…I’m doing a bit of regex in my utility lib to achieve this:

export function validateEmail (email) {
  var reg = /^([A-Za-z0-9_\-.+])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,})$/
  if (!reg.test(email)) return false
  return true
}

mboeni

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

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?

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

@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

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

mboeni

@metalsadman Okay, I finally got it…

  {
    path: '/devtools',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      {
        path: '',
        component: () => import('pages/Devtools.vue'),
        children: [
          {
            path: 'ivedebug',
            component: () => import('pages/IveDebug.vue')
          }
        ]
      }
    ]
  }

Thanks for your help and sorry for the slow thinking

mboeni

@metalsadman Thanks for the example. That’s exactly what I want to do. I am trying to replicate this and have come up with:

<template>
  <q-layout>
    <q-page-container>
      <q-page class="flex flex-start bg-secondary">
        <div style="width:100%">
          <q-splitter
            :value="160"
            disable
            unit="px"
          >
            <template v-slot:before>
              <q-tabs
                v-model="selectedTab"
                vertical
                dense
                inline-label
                >
                <div class="q-pa-sm">
                  <q-item-label lines="1" class="q-mt-xs text-body2 text-weight-bold text-uppercase" :style="{ color: localTextColor1 }" >DEV TOOLS</q-item-label>
                </div>
                <q-route-tab
                  name="iveDebug"
                  icon="library_books"
                  label="IVE Debugging"
                  style="justify-content:initial"
                  :style="{ color: localTextColor2 }"
                  to="/devtools/ivedebug"
                  exact
                />
              </q-tabs>
            </template>
            <template v-slot:after>
              <router-view />
            </template>
          </q-splitter>
        </div>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

and on the routing side:

  {
    path: '/devtools',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      {
        path: '',
        component: () => import('pages/Devtools.vue') },
      {
        path: 'ivedebug',
        component: () => import('pages/IveDebug.vue') }
    ]
  }

It still does not work (it’s still like the second screenshot above) - but I really don’t see where I’m getting it wrong…I’m sure it’s a minor thing but I just don’t see it right now… -.-

mboeni

@metalsadman Thanks, that’s appreciated. Yep I’ve tried to replicate the behavior based on the nesting docs…current status (not working yet, though):

  {
    path: '/devtools',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '/devtools', component: () => import('pages/Devtools.vue') },
      { path: '/devtools/iveDebug', component: () => import('pages/IveDebug.vue') }
    ]
  }

To illustrate more…

…here is what I want:

and here is what I (currently) get:

mboeni

@metalsadman
This is my current state, does not really solve the issue, though…

  {
    path: '/devtools',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/Devtools.vue') },
      { path: 'iveDebug', component: () => import('pages/IveDebug.vue') }
    ]
  }

I’ve read the routing docs…is there anything specific that you have in mind which helps for this?

mboeni

@mboeni

Posts made by mboeni