Script without final semicolon throws error using Buble #169
Description
Expected behavior
If I have a simple component like this, where the main export default does not have a semicolon after it:
<template>
<div class="foo" />
</template>
<script>
export default {
created() {
console.log('created');
}
}
// ^^ notice, no semicolon above
</script>
<style>
.foo {
color: #000;
}
</style>
... I expect it to roll up without any errors. I'm using rollup-plugin-vue followed by rollup-plugin-buble. This is what my rollup-plugin-vue options look like:
{
css: true,
}
Actual behavior
When I load this in the browser I get a console error:
Uncaught TypeError: {(intermediate value)(intermediate value)(intermediate value)} is not a function
The compiled code looks like this:
(function () { if (typeof document !== 'undefined') { var head = document.head||document.getElementsByTagName('head')[0], style=document.createElement('style'), css=" .foo { color: #000; } "; style.type='text/css'; if (style.styleSheet) { style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style); } })();
var TestComponent$1 = {render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"foo"})},staticRenderFns: [],
created: function created() {
console.log('created');
}
}
// ^^ notice, no semicolon above
Next in the code there's another IIFE for injecting the following component's styles, which looks something like:
(function () { if (typeof document !== 'undefined') { var head = document.head||document.getElementsByTagName('head')[0], style=document.createElement('style'), css=" .bar { color: #000; } "; style.type='text/css'; if (style.styleSheet) { style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style); } })();
Without a semicolon at the end of var TestComponent$1 = { ... }, the following IIFE gets treated as a list of arguments for calling TestComponent$1. Since it's not a function, it fails. This has to do with rules for automatic semicolon insertion; see here for a similar issue on SO.
This could be seen as an issue with Buble, but since it's being surfaced by rollup-plugin-vue's IIFE for injecting styles I thought I would start with an issue here.
FWIW, there was a similar issue with Babel a while back.
Steps to reproduce the behavior
I think I've described it sufficiently, but happy to give more details if I forgot something.