SvelteKit build error with incorrect message, unable to use decorators

[trusktr]

Describe the bug

I bootstrapped an app with sv create, choosing the minimal setup with TypeScript.

It is giving me an incorrect error message that tells me I'm doing what it says I should be doing:

Reproduction

https://github.com/trusktr/sveltekit-issue-14139 (commit f4cbe816ad3d0bb10449964ad0fa0e137cfcbf5e)

git clone [email protected]:trusktr/sveltekit-issue-14139.git
cd sveltekit-issue-14139
git checkout f4cbe816ad3d0bb10449964ad0fa0e137cfcbf5e
npm ci
npm run build

Logs

> vite build

vite v5.4.10 building SSR bundle for production...
✓ 38 modules transformed.
x Build failed in 94ms
error during build:
src/lib/index.ts (11:0): Using the export keyword between a decorator and a class is not allowed. Please use `export @dec class` instead. (Note that you need plugins to import files that are not JavaScript)
file: /Users/trusktr/src/svelte-example/src/lib/index.ts:11:0

 9: 
10: export
11: @element('kitchen-sink')
    ^
12: class KitchenSink extends Element {}

    at getRollupError (file:///Users/trusktr/src/svelte-example/node_modules/rollup/dist/es/shared/parseAst.js:395:41)
    at ParseError.initialise (file:///Users/trusktr/src/svelte-example/node_modules/rollup/dist/es/shared/node-entry.js:13252:28)
    at convertNode (file:///Users/trusktr/src/svelte-example/node_modules/rollup/dist/es/shared/node-entry.js:14963:10)
    at convertProgram (file:///Users/trusktr/src/svelte-example/node_modules/rollup/dist/es/shared/node-entry.js:14206:12)
    at Module.setSource (file:///Users/trusktr/src/svelte-example/node_modules/rollup/dist/es/shared/node-entry.js:15949:24)
    at async ModuleLoader.addModuleSource (file:///Users/trusktr/src/svelte-example/node_modules/rollup/dist/es/shared/node-entry.js:19827:13)

System Info

System:
    OS: macOS 15.0.1
    CPU: (8) arm64 Apple M2
    Memory: 36.94 MB / 8.00 GB
    Shell: 5.9 - /opt/homebrew/bin/zsh
  Binaries:
    Node: 20.6.1 - ~/.n-node-versions/bin/node
    Yarn: 1.22.19 - ~/.n-node-versions/bin/yarn
    npm: 10.5.2 - ~/.npm-packages/bin/npm
    pnpm: 9.0.5 - ~/.npm-packages/bin/pnpm
    Watchman: 2023.11.27.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 110.1.48.158
    Chrome: 130.0.6723.92
    Chrome Canary: 132.0.6816.0
    Safari: 18.0.1
    Safari Technology Preview: 18.0
  npmPackages:
    svelte: ^5.0.0 => 5.1.9 

Severity

blocking usage of decorators in SvelteKit

[trueadm]

What happens when you enable decorators in your TS config? https://www.typescriptlang.org/docs/handbook/decorators.html

[benmccann]

As you suggested in vitest-dev/vitest#6581 (comment), I think any issue would be coming from Rollup. I'll close this for now as I'm not sure there's anything we can do about it and would suggest filing the issue there. We can reopen this if there's more evidence it's coming from Svelte

[trusktr]

What happens when you enable decorators in your TS config?

In TS 5, there's nothing to enable, as non-legacy decorators are enabled by default.

Looks like something else is fumbling on decorators.

I can work around the OP error by converting the code in the reproduction from

export
@element('kitchen-sink')
class KitchenSink extends Element {}

to

@element('kitchen-sink')
class KitchenSink /*extends Element*/ {} // (Element is commented out, looks like Svelte runs that on the server, which has no globalThis.Element.)
export { KitchenSink };

After making that change, npm run build (vite build) works, but npm run dev (vite dev) fails with a SyntaxError on the client, although not obvious:

SyntaxError: Invalid or unexpected token
    at new AsyncFunction (<anonymous>)
    at instantiateModule (file:///Users/trusktr/src/svelte-example/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:52963:24

Commenting out the decorator like so,

// @element('kitchen-sink')
class KitchenSink /*extends HTMLElement*/ {}
export { KitchenSink };

avoids the client-side error (but of course without decorators).

This seems to indicate that decorators are causing errors in more than one way. Maybe Rollup, maybe something else (esbuild?).

[trusktr]

@benmccann do you know how to configure SvelteKit to work around the problem and start using decorators? For example, what are all the way to configure how the underlying build tools? I have a feeling its multiple build tools below that need to handle decorators.

Also not sure if this is related, but seems to be the same error: babel/babel-eslint#662 . Is there a linter running?

[trusktr]

Here's a reproduction of the second issue, with the workaround for the export syntax, which allows vite build to succeed while vite dev fails:

https://github.com/trusktr/sveltekit-issue-14139 (commit 5587c169f9fd58bf0c99430a0c9bfa41b97ad32b)

git clone [email protected]:trusktr/sveltekit-issue-14139.git
cd sveltekit-issue-14139
git checkout 5587c169f9fd58bf0c99430a0c9bfa41b97ad32b
npm ci
npm run build # it works
npm run dev # errors

Question is, why is the prod build handling syntax differently than the dev build?

[trusktr]

Some other issues with the same error message:

• Fix false negatives for decorators stylelint/stylelint#4761 (Babel config issue, not Rollup)
• bug: npm run build raise error  windmill-labs/windmill#4516 (project with a Svelte UI, 10k+ stars)
• Using the export keyword between a decorator and a class is not allowed. Please use export @dec class instead. swc-project/swc#9641 (not Babel?)

I can't figure out how to work around it with svelte-preprocess. @benmccann Can you please advise if there's a way to have full control of how script source is compiled (f.e. is that what svelte-preprocess is for)?

[benmccann]

I would recommend trying to reproduce the issue by using decorators in a simple Rollup project without Svelte or SvelteKit and filing the issue there as that's where it seems to be coming from.

If Rollup works fine I'd next try the Svelte playground, esbuild, and Vite individually: https://github.com/sveltejs/kit?tab=readme-ov-file#bug-reporting. You need to narrow down which particular part of the system is having difficulty with the syntax.

[trusktr]

I was able to reproduce with the "Vanilla" Vite template:

• Unable to use standard decorators in Vanilla template, using TypeScript vitejs/vite#18693

[trusktr]

The solution for vanilla Vite is to do this:

/** @import {UserConfig} from 'vite' */

// Make sure to put the target in all three locations below.
const target = 'es2022'

/** @type {UserConfig} */
export default {
  build: {
    target,
  },
  esbuild: {
    target,
  },
  optimizeDeps: {
    esbuildOptions: {
      target,
    }
  }
}

but based on Svelte's doc, and the type definition for SvelteKit's Config, I can't figure where to configure that for Vite in svelte.config.js.

EDIT: Ohh duh, we now configure Vite in vite.config.js proper, instead of kit.vite in svelte.config.js. I was finding outdated info, and no mention in the docs (unless I missed it):

• https://gist.github.com/shirakaba/2283ca9f12fcfb3e01a08c41b28b7c02
• https://www.reddit.com/r/sveltejs/comments/uhn038/sveltekit_vite_configuration_help/

And finally https://stackoverflow.com/questions/78608831/svelte-config-js-unexpected-option-config-kit-vite provided the tip which should have been obvious (for some reason I didn't look at all the files and I figured I needed to work in svelte.config.js).

I edited or commented on those with the detail of the kit.vite error, which should help anyone googling the error in case Gemini or ChatGPT tell them to use config.kit.vite (they both told me that).

Here's the reproduction repo at the commit that shows the working configuration:

https://github.com/trusktr/sveltekit-issue-14139/tree/3aa2c8c4bc1970bcce8e1dfebf1d58ea0adfefc5