CODEWITHSUNDEEP
typescriptsvelte
Zerg Overmind
Zerg Overmind

Reputation: 1065

Typescript with svelte not compiling

I have setup the project via npm create svelte@latest, enabled ts and added tailwind.

Upon declaring <script lang="ts"> I get an Unexpected Token errors such as:

D:/gits/rpg-board/src/lib/components/FilterBar.svelte:3:12 Unexpected token
 1 |  <script lang="ts">"use strict";
 2 |  class Greeter {
 3 |      greeting;
                  ^
 4 |      constructor(message) {
 5 |          this.greeting = message;
\r\n\r\n
WatWat

\r\n"}, node_ids: [0, 1], params: {}, routeId: "deck", data: (function(a){return [a,a]}(null)), errors: null }, paths: {"base":"","assets":""}, target: document.querySelector('[data-sveltekit-hydrate="1regxrp"]').parentNode, trailing_slash: "never" });

The repository I am using is public at: https://github.com/FurtherUnspecified/rpg-board/commit/8ce8eed599bf042f1d8ccd6db2d57456e6d7f15c

I am lost as to what I missed in the configuration.

And following is the whole log of the svelte project initialization

PS D:\gits> npm init vite
√ Project name: ... rpg-board
√ Select a framework: » Svelte
√ Select a variant: » SvelteKit
Need to install the following packages:
  [email protected]
Ok to proceed? (y) y

create-svelte version 2.0.0-next.172

Welcome to SvelteKit!

This is beta software; expect bugs and missing features.

Problems? Open an issue on https://github.com/sveltejs/kit/issues if none exists already.

√ Directory not empty. Continue? ... yes
√ Which Svelte app template? » Skeleton project
√ Add Prettier for code formatting? ... No / Yes
√ Add Playwright for browser testing? ... No / Yes

Your project is ready!
✔ Typescript
  Inside Svelte components, use <script lang="ts">
✔ ESLint
✔ Prettier
  https://prettier.io/docs/en/options.html
  https://github.com/sveltejs/prettier-plugin-svelte#options
✔ Playwright
  https://playwright.dev

Install community-maintained integrations:
  https://github.com/svelte-add/svelte-adders

Next steps:
  1: cd rpg-board
  2: npm install (or pnpm install, etc)
  3: git init && git add -A && git commit -m "Initial commit" (optional)
  4: npm run dev -- --open

To close the dev server, hit Ctrl-C

Stuck? Visit us at https://svelte.dev/chat

This still results in being unable to use ts

Upvotes: 1

Views: 1581

Answers (1)

hackape
hackape

Reputation: 20007

TL;DR: add to tsconfig.json

"compilerOptions": {
  // lower the emit target ES version to ES2021
  "target": "ES2021",
}

This is due to how TS emit class field code. The whole story goes like this:

Your TS code

class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }
}

is transformed into JS code:

class Greeter {
  greeting;
  constructor(message) {
    this.greeting = message;
  }
}

This greeting; syntax is a newly released ES2022 feature called "class fields declaration".

However, svelte/compiler internally use acorn as ECMAScript parser and they have hard-coded it to parse ecmaVersion: 12, which corresponds to ES2021.

Now blame svelte-kit team, since they declared in "./.svelte-kit/tsconfig.json" by setting compilerOptions.target = "esnext", TS works accordingly to emit latest class fields syntax, because it is indeed valid ES2022 code. "esnext" means always tracking latest features.

Upvotes: 4

Related Questions