Svelte only supports es6+ syntax. Set your 'compilerOptions.target' to 'es6' or higher

Question

I have been using Svelte, TypeScript and Rollup (letting TypeScript handle the transpilation) to target ES7. Now I'm starting a new project and need to target ES5.

The first thing I have noticed is that everything gets transpiled but the components are still classes. I didn't have any scripts in the components at that point. Once I added a script tag to.svelte file, I immediately got the error:

Svelte only supports es6+ syntax. Set your 'compilerOptions.target' to 'es6' or higher

I understand that I will need to set TS target to ES6/ES7 and install Rollup Babel plugin to handle the transpilation to ES5. But why would plain TypeScript transpilation not work? Why does Svelte care about TypeScript target? You'd think that Svelte files get converted to TS before being transpiled to ES5, but it seems like it's the other way around?

Answer 1

The Svelte compiler operates on JS, any other language is pre-processed to turn into JS, otherwise the Svelte compiler would have to deal with many different languages. Also, you cannot just turn JS into TS, TS has more information that JS, there is no way to get that information back.

If your end-result should be ES5 you probably need a multi-step pileline:

TS => JS 6+ =Svelte=> JS 6+ => JS 5