Throws SyntaxError: Unterminated template for no apparent reason
morewry opened this issue · 5 comments
I'm having an issue with this plugin(?) throwing a SyntaxError: Unterminated template on seemingly valid code produced by a prior plugin. If I remove this plugin, the code runs in Chrome without errors. The Babel REPL (with a configuration as close as I can get it to my real one) also has no trouble transforming the code.
Rollup & Babel configuration
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import filesize from 'rollup-plugin-filesize';
import livereload from 'rollup-plugin-livereload';
import nodeExternal from '@yelo/rollup-node-external';
import resolve from 'rollup-plugin-node-resolve';
import svelte from 'rollup-plugin-svelte';
import { terser } from 'rollup-plugin-terser';
const production = !process.env.ROLLUP_WATCH;
export default {
input: 'src/index.js',
external: nodeExternal({
whitelist: [/@babel/, /svelte/]
}),
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: 'public/bundle.js'
},
plugins: [
svelte({
legacy: true,
customElement: true,
// enable run-time checks when not in production
dev: !production
}),
// If you have external dependencies installed from
// npm, you'll most likely need these plugins. In
// some cases you'll need additional configuration —
// consult the documentation for details:
// https://github.com/rollup/rollup-plugin-commonjs
resolve(),
commonjs(),
babel({
babelrc: false,
extensions: ['.js', '.html', '.svelte'],
include: ['**/*.js', '**/*.html', '**/*.svelte'],
exclude: ['node_modules/@babel/runtime/**'],
plugins: [
'transform-custom-element-classes',
[
'@babel/plugin-transform-runtime',
{
regenerator: false,
useESModules: false
}
]
],
presets: [
[
'@babel/preset-env',
{
targets: {
ie: '11'
}
}
]
],
runtimeHelpers: true
}),
// Watch the `public` directory and refresh the
// browser on changes when not in production
!production && livereload('public'),
// If we're building for production (npm run build
// instead of npm run dev), minify
production && terser(),
production && filesize()
]
};
rollup-plugin-babel error
rollup v1.10.0 bundles src/index.js → public/bundle.js... [!] (babel plugin) SyntaxError: ~/dls/demos/svelte/src/field.html: Unterminated template (126:31)124 | super();
125 |126 | this.shadowRoot.innerHTML = `<style>:host{display:block}.field{display:inline-flex;flex-flow:column nowrap}._fieldLabelLayout{align-items:center;display:flex;flex-flow:row nowrap}.fieldLabel{}.fieldLabel,.fieldLabel>slot::slotted(label){font-family:"Lab Grotesque", sans-serif;font-size:16px;font-weight:700;letter-spacing:0;line-height:24px;text-transform:none}.fieldOptional{margin-left:12px}.fieldOptional{color:#706F6E;font-family:"Lab Grotesque", sans-serif;font-size:14px;font-weight:400;letter-spacing:0px;line-height:20px;text-transform:none}.fieldOptional{display:none}.fieldOptional.optional{display:block}.fieldDetail,.fieldDetail>slot::slotted(p){color:#706F6E;font-family:"Lab Grotesque", sans-serif;font-size:16px;font-weight:400;letter-spacing:0;line-height:24px;text-transform:none}.fieldDetail>slot::slotted(p){margin:0;margin-top:4px}.fieldControl,.fieldControl>slot::slotted(input),.fieldControl>slot::slotted(select),.fieldControl>slot::slotted(textarea){color:#3E3939;font-family:"Lab Grotesque", sans-serif;font-size:16px;font-weight:400;letter-spacing:0;line-height:24px;text-transform:none}.fieldControl>slot::slotted(input)::placeholder,.fieldControl>slot::slotted(textarea)::placeholder{color:#706F6E;font-family:"Lab Grotesque", sans-serif;font-size:16px;font-weight:400;letter-spacing:0;line-height:24px;text-transform:none}.fieldControl>slot::slotted(*:only-of-type){margin-top:8px}.fieldControl>slot::slotted(input),.fieldControl>slot::slotted(select),.fieldControl>slot::slotted(textarea){border-color:#E0E3E4;border-radius:2px;border-style:solid;border-width:1px;box-sizing:border-box;display:block;min-height:52px;padding:0 16px;width:100%}.fieldControl>slot::slotted(input[disabled]),.fieldControl>slot::slotted(select[disabled]),.fieldControl>slot::slotted(textarea[disabled]),.fieldControl>slot::slotted(input[readonly]),.fieldControl>slot::slotted(textarea[readonly]){background:#EEEEEE;border-color:#E0E3E4}.fieldControl>slot::slotted(input:focus),.fieldControl>slot::slotted(select:focus),.fieldControl>slot::slotted(textarea:focus){box-shadow:0 2px 6px 0 rgba(0,0,0,0.14);outline:0}.fieldMessage{position:relative}.fieldMessage,.fieldMessage>slot::slotted(p){color:#706F6E;font-family:"Lab Grotesque", sans-serif;font-size:14px;font-weight:400;letter-spacing:0px;line-height:20px;text-transform:none}.fieldMessage>slot::slotted(p){margin:0;padding-top:8px}.fieldMessage::before{background:red;border-radius:0 0 2px 2px;content:"";height:5px;position:absolute;top:-5px;width:100%}.fieldMessage>slot::slotted(dls-icon-check-small){color:#2D8560}.fieldMessage>slot::slotted(dls-icon-circle-exclamation-small){color:#C73E3E}
| ^
127 |
128 |
129 | init(this, { target: this.shadowRoot }, instance, create_fragment, safe_not_equal, ["theme", "optional"]);
src/field.html (126:31)
SyntaxError: /dls/demos/svelte/src/field.html: Unterminated template (126:31)124 | super();
125 |126 | this.shadowRoot.innerHTML = `<style>:host{display:block}.field{display:inline-flex;flex-flow:column nowrap}._fieldLabelLayout{align-items:center;display:flex;flex-flow:row nowrap}.fieldLabel{}.fieldLabel,.fieldLabel>slot::slotted(label){font-family:"Lab Grotesque", sans-serif;font-size:16px;font-weight:700;letter-spacing:0;line-height:24px;text-transform:none}.fieldOptional{margin-left:12px}.fieldOptional{color:#706F6E;font-family:"Lab Grotesque", sans-serif;font-size:14px;font-weight:400;letter-spacing:0px;line-height:20px;text-transform:none}.fieldOptional{display:none}.fieldOptional.optional{display:block}.fieldDetail,.fieldDetail>slot::slotted(p){color:#706F6E;font-family:"Lab Grotesque", sans-serif;font-size:16px;font-weight:400;letter-spacing:0;line-height:24px;text-transform:none}.fieldDetail>slot::slotted(p){margin:0;margin-top:4px}.fieldControl,.fieldControl>slot::slotted(input),.fieldControl>slot::slotted(select),.fieldControl>slot::slotted(textarea){color:#3E3939;font-family:"Lab Grotesque", sans-serif;font-size:16px;font-weight:400;letter-spacing:0;line-height:24px;text-transform:none}.fieldControl>slot::slotted(input)::placeholder,.fieldControl>slot::slotted(textarea)::placeholder{color:#706F6E;font-family:"Lab Grotesque", sans-serif;font-size:16px;font-weight:400;letter-spacing:0;line-height:24px;text-transform:none}.fieldControl>slot::slotted(*:only-of-type){margin-top:8px}.fieldControl>slot::slotted(input),.fieldControl>slot::slotted(select),.fieldControl>slot::slotted(textarea){border-color:#E0E3E4;border-radius:2px;border-style:solid;border-width:1px;box-sizing:border-box;display:block;min-height:52px;padding:0 16px;width:100%}.fieldControl>slot::slotted(input[disabled]),.fieldControl>slot::slotted(select[disabled]),.fieldControl>slot::slotted(textarea[disabled]),.fieldControl>slot::slotted(input[readonly]),.fieldControl>slot::slotted(textarea[readonly]){background:#EEEEEE;border-color:#E0E3E4}.fieldControl>slot::slotted(input:focus),.fieldControl>slot::slotted(select:focus),.fieldControl>slot::slotted(textarea:focus){box-shadow:0 2px 6px 0 rgba(0,0,0,0.14);outline:0}.fieldMessage{position:relative}.fieldMessage,.fieldMessage>slot::slotted(p){color:#706F6E;font-family:"Lab Grotesque", sans-serif;font-size:14px;font-weight:400;letter-spacing:0px;line-height:20px;text-transform:none}.fieldMessage>slot::slotted(p){margin:0;padding-top:8px}.fieldMessage::before{background:red;border-radius:0 0 2px 2px;content:"";height:5px;position:absolute;top:-5px;width:100%}.fieldMessage>slot::slotted(dls-icon-check-small){color:#2D8560}.fieldMessage>slot::slotted(dls-icon-circle-exclamation-small){color:#C73E3E}
| ^
127 |
128 |
129 | init(this, { target: this.shadowRoot }, instance, create_fragment, safe_not_equal, ["theme", "optional"]);
at Parser.raise (/dls/demos/svelte/node_modules/@babel/parser/lib/index.js:3851:17)
at Parser.readTmplToken (/dls/demos/svelte/node_modules/@babel/parser/lib/index.js:4817:14)
at TokContext.types$1.template.p [as override] (/dls/demos/svelte/node_modules/@babel/parser/lib/index.js:573:52)
at Parser.nextToken (/dls/demos/svelte/node_modules/@babel/parser/lib/index.js:4047:18)
at Parser.next (/dls/demos/svelte/node_modules/@babel/parser/lib/index.js:3989:10)
at Parser.parseTemplate (/dls/demos/svelte/node_modules/@babel/parser/lib/index.js:6610:10)
at Parser.parseExprAtom (/dls/demos/svelte/node_modules/@babel/parser/lib/index.js:6291:21)
at Parser.parseExprSubscripts (/dls/demos/svelte/node_modules/@babel/parser/lib/index.js:5914:23)
at Parser.parseMaybeUnary (/dls/demos/svelte/node_modules/@babel/parser/lib/index.js:5894:21)
at Parser.parseExprOps (/dls/demos/svelte/node_modules/@babel/parser/lib/index.js:5781:23)
I'm finding this happens only when the rollup build is run with the watch flag.
I wonder if this could be the watch mode itself causing issues, for instance if it tries to read the file content while your editor is still in the process of writing the new file content. I'd be very surprised if this was a Babel-related issue, other than Babel's presence maybe affecting the timing of things.
I had the same thought, since the error kind of looked like it might've been getting an incomplete file when I looked at it vs the output I got without Babel.
However, it's looking more and more like it actually is Babel's issue. It chokes on a CSS source maps inside a template literal. Chrome is fine with the same code.
It chokes on a newline followed by a slash / in a template literal here. Remove the sourcemap, remove the slash, or remove the newline so it's on the same line as the preceding styles and there's no error.
Note the reason the source map didn't appear in my sample output was that
dev: !productionpart of the Svelte configuration. I was inadvertently hiding the issue from myself by using a different build configuration during some of my trial and error. Using thebuildscript (production build) vsdevscript (dev build that also starts a server).
But if we take it down to this super reduced case, it's fine...
So I guess it's not quite as simple as it looks in that other one.
Still, I think I'll report it to Babel.
Ahh perfect. That sounds like babel/babel#9790