hello-vue-components icon indicating copy to clipboard operation
hello-vue-components copied to clipboard

Script inside SFC results in 'component is not defined' error for UMD.

Open cbeninati opened this issue 5 years ago • 2 comments

Steps to reproduce

  1. Pull hello-vue-components from GitHub
  2. Runnpm install
  3. Update src/HelloA.vue (see changes below)
  4. Run npm run build
  5. View the output ./dist/demo.html in the browser (Chrome)
  6. Errors like the Dickens!!! (single error, screenshot below)
Screen Shot 2019-04-12 at 11 22 54 AM

Change to the SFC

...
<!-- HelloA.vue -->

<script>
  export default {
    name: 'hello-a',
    data() {
      return {
        name: 'HelloA',
      }
    },
  }
</script>
...

Complete SFC

<!-- HelloA.vue -->

<template>
  <div class="hello">
   {{ name }}
  </div>
</template>

<script>
  export default {
    name: 'hello-a',
    data() {
      return {
        name: 'HelloA',
      }
    },
  }
</script>

<style>
.hello {
  color: orange;
}
</style>

<meta>
{
  "description": "A component that says \"HelloA\" with orange text."
}
</meta>

<example>
  <!-- No props or content are necessary. -->
  <hello-a></hello-a>
</example>

cbeninati avatar Apr 12 '19 17:04 cbeninati

I think there is a problem with the file global-vue-loader.js I'm not expert in node, but looks like it's trying to replace the export default with this window.Vue.component('${componentName}', component.exports) and component.exports is not defined. I'm having the same problem. Any guess on what to replace here?

midejesus avatar Jun 18 '19 15:06 midejesus

Any solution for adding script to components ?

tiagosimoesdev avatar Jul 09 '20 13:07 tiagosimoesdev