-
-
Notifications
You must be signed in to change notification settings - Fork 4.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
SvelteKit build error with incorrect message, unable to use decorators #14139
Comments
What happens when you enable decorators in your TS config? https://www.typescriptlang.org/docs/handbook/decorators.html |
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 |
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,
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?). |
@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? |
Here's a reproduction of the second issue, with the workaround for the https://github.com/trusktr/sveltekit-issue-14139 (commit 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? |
Some other issues with the same error message:
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)? |
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. |
I was able to reproduce with the "Vanilla" Vite template: |
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 EDIT: Ohh duh, we now configure Vite in
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 Here's the reproduction repo at the commit that shows the working configuration: |
Describe the bug
I bootstrapped an app with
sv create
, choosing theminimal
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
)Logs
System Info
Severity
blocking usage of decorators in SvelteKit
The text was updated successfully, but these errors were encountered: