0

I have a Vue.js application (m4ops), and am developing a public Vue.js package (vfg-display-fields) to be part of it. As it is a tree structure, the package has a pair of components which are circular references. I have resolved this using the methods in the Vue.js Guide.

Within my vfg-display-fields package this works well using either method. When I publish the package and import it into my main m4ops package it also works fine using either method.

The problem comes when I try to showcase the package within a CodeSandbox (see https://codesandbox.io/s/ykpj1jpxvv).

With the first suggested method I use

beforeCreate() {
  this.$options.components['vfg-display-fields'] = require('./DisplayFields.vue').default;
},

and in CodeSandbox I get the error:

[Vue warn]: Unknown custom element: <vfg-display-fields> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Using the second method

components: {
  'vfg-display-fields': () => import('./DisplayFields.vue'),
},

I get the error

proxyConsole.js:72 [Vue warn]: Failed to resolve async component: function vfgDisplayFields() {
      return _promise.default.resolve().then(function () {
        return require("".concat(function () {
          return require('./DisplayFields.vue');
        }));
      });
    }
Reason: DependencyNotFoundError: Could not find dependency: 'function () {
          return require('.' relative to '/node_modules/vfg-display-fields/src/DisplayGroups.vue'

This is only my first package and I am feirly new to Vue.js. My package seems to work fine in its intended location (my m4ops application) but not within CodeSandbox. Is this my error or something within CodeSandbox?

tony19
  • 125,647
  • 18
  • 229
  • 307
Peter Cooper
  • 151
  • 5
  • It's problem of `vfg-display-fields`, because it's own codesandbox show the same error. Try to write him issue about that. – Alex Mar 17 '19 at 15:48
  • Thanks @Alexander. I am the author of `vfg-display-fields`, and that is why I raised this issue. Seeing as my code for `vfg-display-fields` works OK with my main application, I suspect that it might be a problem with CodeSandbox rather than my code. – Peter Cooper Mar 17 '19 at 16:59

2 Answers2

0

In DisplayGroups.vue you use component vfg-display-fields by custom element name, but that component has name DisplayFields. Base on documentation about Recursive Components, name of component must be the same as used in Vue.component(...).
In src / DisplayFields.vue you must write

export default {
  name: 'vfg-display-fields',
...

Or in src / index.js change name of component while register it

Vue.component('display-fields', DisplayFields);

and don't forget to change element name in src / DisplayGroups.vue:

<template>
  <div>
    <display-fields .../>
  </div>
</template>

Hope this help you.

tony19
  • 125,647
  • 18
  • 229
  • 307
Alex
  • 1,373
  • 8
  • 15
  • Thanks @Alexander. I think I have altered the naming as you suggest but I still have the same issue. The new version (0.0.5-d) works fine within my own application, but not in CodeSandbox. – Peter Cooper Mar 18 '19 at 06:54
0

Per this helpful post I realised the problem was that I had published my package as ES6 code, while also using .vue files. I should have transpiled them to ES5 for publishing.

There is so much more for me to learn.

Peter Cooper
  • 151
  • 5