webpack throws error about undefined custom component dependency which is not so

[dgk]

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>