@rstoenescu
To encourage folks to joint/donate via patreon why don’t use say that if you are a patreon donor of >=$x then you can expect to receive a reply on the forum in 1-2 days. Lately several things I need feedback on have no replies. It’s not like you won’t respond to other just no guarantees. That would be all the motivation I need to get going on patreon.

Nothing bad about this idea. We all need $$ to eat and you need to get paid for all your efforts including responding to forum posts which you have done kindly in the past.

@rstoenescu

had to do this with your suggestion
export { ws }
but the warning still continues.
FYI I imported my custom websocket module directory into my .vue page and it works fine. Clearly nothing to do with my code itself.

==========================

Ok so if I try your axios example from the guide page verbatuim I get the same warning
17:235-240 "export 'axios' was not found in 'quasar'

so this really has nothing to do with my plugin. Either I am doing something wrong or something changed in .16? that was not documented. Capital or lower case in plugins prop or file name makes no difference. Is latest version of webpack missing bundling this??

First I yarn added axios to my package.json node_modules
then

in src/plugins I have axios.js with code from your guide.

import axios from 'axios'

export default ({ Vue }) => {
  // we add it to Vue prototype
  // so we can reference it in Vue files
  // without the need to import axios
  Vue.prototype.$axios = axios

  // Example: this.$axios will reference Axios now so you don't need stuff like vue-axios
}

here is my config file. Note I did start this a a clean new .16 project not as an upgrade from .15x

// Configuration for your app

module.exports = function (ctx) {
  return {
    // app plugins (/src/plugins)
    plugins: [
    ],
    css: [
      'app.styl'
    ],
    extras: [
      ctx.theme.mat ? 'roboto-font' : null,
      'material-icons',
      ctx.theme.ios ? 'ionicons' : null
      // 'mdi',
      // 'fontawesome'
    ],
    supportIE: false,
    build: {
      scopeHoisting: true,
      vueRouterMode: 'history',
      // vueCompiler: true,
      // gzip: true,
      // analyze: true,
      // extractCSS: false,
      extendWebpack (cfg) {
        cfg.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules|quasar)/
        })
      }
    },
    devServer: {
      // https: true,
      // port: 8080,
      open: true // opens browser window automatically
    },
    // framework: 'all' --- includes everything; for dev only!
    framework: {
      components: [
        'QLayout',
        'QLayoutHeader',
        'QLayoutDrawer',
        'QPageContainer',
        'QPage',
        'QToolbar',
        'QToolbarTitle',
        'QBtn',
        'QIcon',
        'QList',
        'QListHeader',
        'QItem',
        'QItemMain',
        'QItemSide',
        'QInput',
        'QField'
      ],
      directives: [
        'Ripple'
      ],
      // Quasar plugins
      plugins: [
        'Notify',
        'axios'
      ],
      iconSet: ctx.theme.mat ? 'material-icons' : 'ionicons'
    },
    // animations: 'all' --- includes all animations
    animations: [
    ],
    pwa: {
      // workboxPluginMode: 'InjectManifest',
      // workboxOptions: {},
      manifest: {
        // name: 'Quasar App',
        // short_name: 'Quasar-PWA',
        // description: 'Best PWA App in town!',
        display: 'standalone',
        orientation: 'portrait',
        background_color: '#ffffff',
        theme_color: '#027be3',
        icons: [
          {
            'src': 'statics/icons/icon-128x128.png',
            'sizes': '128x128',
            'type': 'image/png'
          },
          {
            'src': 'statics/icons/icon-192x192.png',
            'sizes': '192x192',
            'type': 'image/png'
          },
          {
            'src': 'statics/icons/icon-256x256.png',
            'sizes': '256x256',
            'type': 'image/png'
          },
          {
            'src': 'statics/icons/icon-384x384.png',
            'sizes': '384x384',
            'type': 'image/png'
          },
          {
            'src': 'statics/icons/icon-512x512.png',
            'sizes': '512x512',
            'type': 'image/png'
          }
        ]
      }
    },
    cordova: {
      // id: 'org.cordova.quasar.app'
    },
    electron: {
      // bundler: 'builder', // or 'packager'
      extendWebpack (cfg) {
        // do something with Electron process Webpack cfg
      },
      packager: {
        // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options

        // OS X / Mac App Store
        // appBundleId: '',
        // appCategoryType: '',
        // osxSign: '',
        // protocol: 'myapp://path',

        // Window only
        // win32metadata: { ... }
      },
      builder: {
        // https://www.electron.build/configuration/configuration

        // appId: 'quasar-app'
      }
    }
  }
}

I followed the docs for custom plugin

in my /src/plugin folder I have a file Socket.js with this content

// import WebSocket from '@uci/websocket-client'
import WebSocket from '../../uci-websocket-client/browser-client'

// leave the export, even if you don't use it
export default ({ Vue }) => {
  let url = process.env.WSS || 'ws://0.0.0.0:8090'
  const ws = new WebSocket(url)

  Vue.prototype.$socket = ws
}

I then have 'Socket' in the plugins section of the config file but I get

17:221-227 "export 'Socket' was not found in 'quasar'

no manner of fiddling with names get’s me by this error. Am I not supposed to use the default export like in the axios example?

I have custom component I wrote (source is below). It makes use of lodash.find. 'lodash.find` is been added by yarn to package.json.

When I use it directly on a page I have no issue. But went it’s used within another custom component (which happens to be rendered in script instead of using a template) I get a webpack error saying lodash_find is undefined. This seems more a webpack “bug” because clearly the component functions fine in this context using lodash_find without error.

Clearly this issue is not with the component itself but when I am using it within another. Am I missing some kind of additional registration here?? Isn’t a component’s imports/dependencies self-contained? A wrapping component does not need to know about these??? All that needs be be done is to assure that the component’s dependency is in package.json and is installed in node_modules. I really do need to get rid of this console error even it if doesn’t seem to affect the function of the component. The stack trace goes on for multiple screenfuls which I didn’t bother to share but you can imagin how super irritating it is and makes it impossible to do any other debugging using the console.

[Vue warn]: Error in render: "TypeError: __WEBPACK_IMPORTED_MODULE_0_lodash_find___default(...)(...) is undefined"

found in

---> <QChipsOptionGroup> at src/components/ChipsOptionGroup.vue
       <QField>
         <QForm> at src/components/Form.vue
           <QSlideTransition>
             <QCollapsible>
               <QFormc> at src/components/CollapsibleForm.vue 
                 <QList>
                   <Switches> at src/pages/config/Switches.vue
                     <QPageContainer>
                       <QLayout>
                         <LayoutDefault> at src/layouts/default.vue
                           <Root>
vue.runtime.esm.js:587
TypeError: __WEBPACK_IMPORTED_MODULE_0_lodash_find___default(...)(...) is undefined

the chip options group custom component

<template>
  <div>
   <q-chips-input
   v-model="names"
   v-bind:show="show"
   @input="update()"
   @change="update()"
   float-label='click down Arrow for list of circuits'
   :before="[
     {
        icon: 'arrow drop down circle',
        handler() {
          show = !show
        }
      }
    ]"
    />
   <q-option-group
   v-show="show"
  color="secondary"
  type="checkbox"
  v-model="selected"
  @input="update()"
  @change="update()"
  :options="options"
  inline="inline"
/>
   </div>
</template>

<script>

import find from 'lodash.find'

export default {
  data () {
    return {
      show: false,
      selected: []
    }
  },
  props: [ 'value', 'options', 'inline' ],
  computed: {
    names: {
      get: function () {
        // console.log('get', this.selected)
        return this.selected.map(option => {
          return find(this.options, function (o) { return o.value === option }).label
        })
      },
      set: function (updated) {
        // console.log('set', this.names, updated, this.selected)
        this.selected.find((sel) => {
          let label = find(this.options, function (o) { return o.value === sel }).label
          // console.log('loop', sel, label)
          if (updated.indexOf(label) === -1) {
            this.selected = this.selected.filter(item => item !== sel)
            return true
          }
        })
      }
    }
  },
  methods: {
    update () {
      // console.log('updating', this.selected)
      this.$emit('input', this.selected)
    }
  },
  beforeMount () {
    this.selected = this.value
    // console.log(this.selected)
  }
}
</script>

<style lang="stylus">

@import '~variables'

.on
    background $positive

.off
    background grey

</style>

here is the rendered component that embeds the chips options component. You see it’s registered there in case it is used (in this case yes)

<script>

// import makeFieldProps from '../helpers/makeFieldProps.js'
import QChipsOptionGroup from 'src/components/ChipsOptionGroup.vue'

export default {
  data () {
    return {
    }
  },
  render (element) {
    return element('form', {}, this.makeForm(element))
  },
  components: {
    QChipsOptionGroup
  },
  props: ['values', 'schema'],
  methods: {
    makeForm (element) {
      let form = []
      // console.log('formm values', this.values)
      // console.log('form schema', this.schema)
      for (let key in this.schema) {
        // console.log('form schema key on render', key)
        if (this.schema[key].fieldType !== 'hidden') {
          let field =
          element('q-field', {
            props: {
              label: this.schema[key].fieldProps.label,
              helper: this.schema[key].fieldProps.helper
            }
          }, [
            element(this.schema[key].fieldType ? `q-${this.schema[key].fieldType}` : 'q-input', {
              props: this.fieldProps(this.values[key], this.schema[key]),
              on: {
                input: (value) => {
                  // this.values[key] = value
                  // console.log('input changed', key, value)
                  this.$emit('changed', { name: key, value: value })
                }
              }
            }),
            this.tooltip(this.schema[key].fieldProps.tip, element)
          ]
          )// end field element
          form.push(field)
        } // skip for hidden
        // console.log('field', key, field)
      }// end form field loop
      // console.log('the form object', form)
      return form
    },
    fieldProps (value, field) {
      let props = field.fieldProps // quasar compenent props here
      // let props = makeFieldProps[ field.fieldType ? field.fieldType : 'input' ](field)
      // console.log('props after processing', props)
      props.value = value
      return props
    },
    tooltip (tip, e) {
      if (tip) {
        return e('q-tooltip', {}, [ tip ])
      } else {
        return null
      }
    }
  },
  mounted () {
  }
}
</script>

<style lang="stylus">

@import '~variables'

</style>

Ok pretty much working. I can’t remove the text input without disabling the entire chip input component so will just have to leave it for now (made a feature request). Instead I added a :before icon to toggle display of the options group.

Note: Depends on lodash.find

component

<template>
  <div>
   <q-chips-input
   v-model="names"
   v-bind:show="show"
   @input="update()"
   @change="update()"
   float-label='Down Arrow for List of Options'
   :before="[
     {
        icon: 'arrow drop down',
        handler() {
          show = !show
        }
      }
    ]"
    />
   <q-option-group
   v-show="show"
  color="secondary"
  type="checkbox"
  v-model="selected"
  @input="update()"
  @change="update()"
  :options="options"
/>
   </div>
</template>

<script>

import find from 'lodash.find'

export default {
  data () {
    return {
      show: false,
      selected: []
    }
  },
  props: [ 'value', 'options' ],
  computed: {
    names: {
      get: function () {
        console.log('get', this.selected)
        return this.selected.map(option => {
          return find(this.options, function (o) { return o.value === option }).label
        })
      },
      set: function (updated) {
        console.log('set', this.names, updated, this.selected)
        this.selected.find((sel) => {
          let label = find(this.options, function (o) { return o.value === sel }).label
          console.log('loop', sel, label)
          if (updated.indexOf(label) === -1) {
            this.selected = this.selected.filter(item => item !== sel)
            return true
          }
        })
      }
    }
  },
  methods: {
    update () {
      console.log('updating', this.selected)
      this.$emit('input', this.selected)
    }
  },
  beforeMount () {
    this.selected = this.value
    console.log(this.selected)
  }
}
</script>

<style lang="stylus">

@import '~variables'

.on
    background $positive

.off
    background grey

</style>

usage

<template>
  <div>
  <div>Test chip-option-group</div>
  <chip-option-group v-model="selected" :options="opts" />
  <div> {{ selected }} </div>
  </div>
</template>

<script>

import ChipOptionGroup from 'src/components/ChipOptionGroup.vue'

export default {
  data () {
    return {
      selected: ['op1', 'op3', 'op6'],
      opts: [
        { label: 'Option 1', value: 'op1' },
        { label: 'Option 2', value: 'op2' },
        { label: 'Option 3', value: 'op3' },
        { label: 'Option 4', value: 'op4' },
        { label: 'Option 5', value: 'op5' },
        { label: 'Option 6', value: 'op6' }
      ]
    }
  },
  components: {
    ChipOptionGroup
  }
}
</script>

<style>
</style>

yup no context (binding) unless you use v-bind

I did it like this

   <q-chips-input
   v-model="names"
   v-bind:show="show"
   float-label='Down Arrow for List of Options'
   :before="[
     {
        icon: 'arrow drop down',
        handler() {
          show = !show
        }
      }
    ]"
   @keyup.down="showme"/>
   <q-option-group
   v-show="show"
  color="secondary"
  type="checkbox"
  v-model="value"
  :options="options"
/>
   </div>
</template>

<script>

// import find from 'lodash.find'

export default {
  data () {
    return {
      show: false
    }
  },

I was expecting the handler function to have some context (i.e the component) but apparently not. I can’t access any methods with this and not even console.log is known. Too this.$q is unknown/undefined

any other prop of this is ignored so no access to even the data of the component.

Seems without a proper context the handler is useless and there is no way to set a binding for it since I’m just passing it not calling it.

Well, my first issue is the chips component has no way to disable the text input field without disabling the click event of the component. Thus there is no way for me to have the click event show a options group. I was hoping not to modify the chips component but just use it but it looks like that may not be possible to access the click event.

Anyone with any ideas how to bypass this behavior without writing my own version of the chips component??

Maybe the chips component’s disable property should just hide the text box instead of disabling the entire component or sure keep it but have another prop to hide the text field or if I rewrite this then one could have prop to use either text filed or options group.