0

I've encountered a problem with a library I've created that I'm trying to reproduce/fix by creating a simple Codepen that uses it. However, I haven't used Codepen before and I'm having trouble getting started, as I'm used to just referencing things through the ES6 import/export system and having webpack roll everything up.

The library I'm trying to debug is distributed on NPM and I've tried to import it through its unpkg URL. In the pen settings I also configure Vue to be imported immediately before it, as it requires that to be globally accessible. The library exposes the Vue component I'm trying to use as its default export, but I get ReferenceError: ExpandableGrid is not defined when trying to use it.

Here is my pen. For the sake of convenience I've reproduced it as a snippet below:

new Vue({
  el: "#app",
  components: {
    ExpandableGrid
  }
});
#app {
  width: 100vw;
  height: 100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.js"></script>
<script src="https://unpkg.com/vue-expandable-grid@0.2.0-2/dist/vue-expandable-grid.umd.min.js"></script>

<div id="app">
  <ExpandableGrid />
</div>
Tagc
  • 8,736
  • 7
  • 61
  • 114
  • 1
    `const ExpandableGrid = window["vue-expandable-grid"];` (because umd module in browser ([here](https://stackoverflow.com/questions/38638210/how-to-use-umd-in-browser-without-any-additional-dependencies)) ). then I *think* your next problem is that your module does not have a name-property (or so says the console log). – ippi Jun 15 '18 at 08:06
  • @ippi hah, you posted exactly as I tried exactly that, and got exactly the problem you described. Yeah, I'm not familiar with how UMD worked (my build process generated umd and commonjs distributables by default) - from what I've glanced at, it seems that UMD is more modern than commonjs and is what I should be referencing, but I was unclear how it worked until just now. – Tagc Jun 15 '18 at 08:08
  • 1
    [That](https://stackoverflow.com/questions/50871217/how-can-i-import-a-vue-component-from-an-npm-package-in-a-codepen#comment88744484_50871217) + [`.default`](https://github.com/webpack/webpack/issues/706) – ghybs Jun 15 '18 at 08:15
  • [Awesome, thank you](https://codepen.io/tagc/pen/pKWjqK) – Tagc Jun 15 '18 at 08:16

1 Answers1

0
  1. component names should be kebab-case in DOM templates.
  2. self closing tags are not valid in DOM templates, except for void elements.
  3. use window['vue-expandable-grid'].default
<div id="app">
  <expandable-grid></expandable-grid>
</div>

new Vue({
  el: "#app",
  components: {
    ExpandableGrid: window['vue-expandable-grid'].default
  }
});
Tiny Wisp
  • 1
  • 1