hello-vue-components
hello-vue-components copied to clipboard
Script inside SFC results in 'component is not defined' error for UMD.
Steps to reproduce
- Pull
hello-vue-components
from GitHub - Run
npm install
- Update
src/HelloA.vue
(see changes below) - Run
npm run build
- View the output
./dist/demo.html
in the browser (Chrome) - Errors like the Dickens!!! (single error, screenshot below)

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>
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?
Any solution for adding script to components ?