Open Nukiloco opened 2 years ago
Can't reproduce this given the steps above. Can you provide a reproduction repository?
I'm getting this issue with almost every typescript-exclusive syntax
Please provide a reproduction repository or steps on how to reproduce this, which include your setup (Rollup / Vite / SvelteKit )
Please provide a reproduction repository or steps on how to reproduce this, which include your setup (Rollup / Vite / SvelteKit )
launcher
and run yarn install
(make sure you have yarn installed)make web
launcher/src/lib/components/QuickLaunchCard.svelte
and try to add explicit typings for the props@dummdidumm in case you havent seen it yet ^
It doesn't work on my machine, either.
environment:
@Suyashtnt After some tests, I find that it's icons
and pictograms
preprocessor you(we) import from 'carbon-preprocess-svelte' that cause this issue. Removing these two preprocessors makes it work.
@Suyashtnt After some tests, I find that it's
icons
andpictograms
preprocessor you(we) import from 'carbon-preprocess-svelte' that cause this issue. Removing these two preprocessors makes it work.
well that sucks. Atleast i can use typescript now. Maybe this will actually give me the motivation to continue working on glowsquid @Nukiloco are you also using this plugins?
2 | let sheetCount;
3 |
4 | function squareFootage(sheetLength: number, sheetCount: number) {
^
5 | return sheetLength * sheetCount * 4;
6 | }
not using any library, its fresh vite create project
Ran into the same issue. Fresh vite project as well created using npm create svelte@latest my-app
.
EDIT: In my case it was a missing lang prop in script tag like:
<script lang="ts">
....
</script>
Adding it solved the problem.
they told me to install svelte-preprocessor, did you install that?
I have svelte preprocess configured as follows:
import preprocess from 'svelte-preprocess';
const config = {
// Consult https://github.com/sveltejs/svelte-preprocess
// for more information about preprocessors
preprocess: [
preprocess({
postcss: true,
}),
],
kit: {
adapter: adapter()
}
};
I started new project with Comand line 'npm init vite@latest' and then it's gonna ask you all the options. Choose svelte' and typescript. Now it's working
Same problem, the project was initialized with npm create svelte@latest .
(property) NavigationState.step_id: number Unexpected token
If you expect this syntax to work, here are some suggestions: If you use typescript with
svelte-preprocess
, did you addlang="ts"
to yourscript
tag? Did you setup asvelte.config.js
? See https://github.com/sveltejs/language-tools/tree/master/docs#using-with-preprocessors for more info.svelte(parse-error)
package.json
"devDependencies": {
"@sveltejs/adapter-auto": "next",
"@sveltejs/kit": "next",
"@types/validator": "^13.7.9",
"@typescript-eslint/eslint-plugin": "^5.27.0",
"@typescript-eslint/parser": "^5.27.0",
"croppie": "^2.6.5",
"dayjs": "^1.11.5",
"eslint": "^8.16.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-svelte3": "^4.0.0",
"jwt-decode": "^3.1.2",
"prettier": "^2.6.2",
"prettier-plugin-svelte": "^2.7.0",
"svelte": "^3.44.0",
"svelte-check": "^2.7.1",
"svelte-preprocess": "^4.10.6",
"tslib": "^2.3.1",
"typescript": "^4.7.4",
"validator": "^13.7.0",
"vite": "^3.1.0"
},
"type": "module"
svelte.config.js
import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';
import path from "path";
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://github.com/sveltejs/svelte-preprocess
// for more information about preprocessors
preprocess: preprocess(),
kit: {
adapter: adapter(),
alias: {
"@": path.resolve('./src'),
}
}
};
export default config;
Fixed by specifiying "target": "es2021"
in tsconfig.json
{
"extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": {
+ "target": "es2021",
"allowJs": true,
"checkJs": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true,
"moduleResolution": "node"
}
}
I think this issue simply needs better logging to fix it, since it can be caused by a variety of issues
For what it's worth, coming from the Vercel-generated project, I solved this for myself follows:
import adapter from '@sveltejs/adapter-vercel';
+import { vitePreprocess } from '@sveltejs/kit/vite';
/** @type {import('@sveltejs/kit').Config} */
const config = {
+ // Consult https://kit.svelte.dev/docs/integrations#preprocessors
+ // for more information about preprocessors
+ preprocess: vitePreprocess(),
+
kit: {
adapter: adapter()
}
Found this solution by running npm create vite@latest
and picking all the project config files from the new project into my existing one until it worked.
I found that I had to place the optimizeImports from carbon-preprocess-svelte, after the preprocess with postcss.
import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';
import { optimizeImports } from 'carbon-preprocess-svelte';
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors for more information about preprocessors
preprocess: [
preprocess({
postcss: true
}),
optimizeImports()
],
kit: {
adapter: adapter()
}
};
export default config;
Oddly, I'm still experiencing this with Sveltekit 1.0.0
created via vite project-name
, choosing Svelte
, choosing Sveltekit
, Yes, using Typescript syntax
and still the same Unexpected Token error as before.
<script lang="ts">
interface User {
name: string
id: number
}
class UserAccount {
name: string
id: number
constructor(name: string, id: number) {
this.name = name
this.id = id
}
}
</script>
<div class="mt-20 max-w-lg mx-auto p-10 rounded-lg bg-slate-100 border-2 border-slate-200">
Tesing this.
</div>
The name : string
on line 4 still throws the Unexpected Token error. I've tried everything listed in this thread. Any thoughts?
Exactly the same as nrthbound and tried in both PHPStorm and Visual Studio Code with svelte 3 snippets, svelte for VS Code and Svelte Intellisense plugins installed.
get the same error on svelte-preprocess 4.10.7 if my tsconfig.json has "target": "es2022" strangely it starts working if I set "target": "es2021"
For what it's worth: I returned to earlier version of svelte-preprocess
to work around this problem.
From my package.json:
"devDependencies": {
"@supabase/supabase-js": "2.7.1",
"@sveltejs/adapter-auto": "2.0.0",
"@sveltejs/kit": "1.5.5",
"@types/uuid": "9.0.0",
"@typescript-eslint/eslint-plugin": "5.51.0",
"@typescript-eslint/parser": "5.51.0",
"autoprefixer": "10.4.13",
"date-fns": "2.29.3",
"eslint": "8.34.0",
"eslint-config-prettier": "8.6.0",
"eslint-plugin-svelte3": "4.0.0",
"postcss": "8.4.21",
"prettier": "2.8.4",
"prettier-plugin-tailwindcss": "0.2.2",
"svelte": "3.55.1",
"svelte-check": "3.0.3",
"svelte-markdown": "0.2.3",
"svelte-preprocess": "4.10.7", <============= instead of 5.x.x
"tailwindcss": "3.2.6",
"tslib": "2.5.0",
"typescript": "4.9.5",
"uuid": "9.0.0",
"vite": "4.1.1",
"vitest": "0.28.4"
},
That's sveltejs/svelte#6900
That fixed the problem with Svelte/Vite.
I moved my index.html
inside src
and changed the project root to src
in svelte.config.js
.
svelte.config.js
needs to reference vite.config.ts
relative to the project root. In my case:
svelte({
configFile: '../svelte.config.js'
})
In my case, preprocess version and target version didn't change anything. the fix was even simpler: moving "svelte.config.ts" to "svelte.config.js". Not sure where along the way that got changed, but make sure your svelte config file has a .js extension.
In my case, I had an old svelte script that I moved to a new sveltekit project, and typescript was specified like this :
<script type="ts">
I changed type to lang and it works !
<script lang="ts">
Looks like everyone has a different explanation for the same error !
That's sveltejs/svelte#6900
That fixed the problem with Svelte/Vite.
I moved my
index.html
insidesrc
and changed the project root tosrc
insvelte.config.js
.
svelte.config.js
needs to referencevite.config.ts
relative to the project root. In my case:svelte({ configFile: '../svelte.config.js' })
Boost to this! I changed my root to root : 'src'
which was the problem! When I pointed svelte to the config file relative to the root directory it worked!
I solved with esnext
in tsconfig and sevlte.config.js file like this
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"
export default {
// Consult https://svelte.dev/docs#compile-time-svelte-preprocess
// for more information about preprocessors
preprocess: vitePreprocess(),
}
Leaving it here in case someone makes the same mistake as me, as this is the top result on Google: If your SvelteKit config is called svelte.config.ts
(not .js
), this will happen too. Renaming it to .js
solves the issue.
Renaming it to
.js
solves the issue.
Just commenting to let other people know that this also solved the issue for me. I have no idea why. I'm also getting a warning that vitePreprocess
is not resolvable. The config file is the one generated when I made an empty TS sveltekit project like in the tutorial. I think it generated a js
file initially, but I made it into a ts
one because it "made sense"
import adapter from '@sveltejs/adapter-node';
import { vitePreprocess } from '@sveltejs/kit/vite';
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
preprocess: vitePreprocess(),
kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
adapter: adapter()
}
};
export default config;
In case if help someone: on my side is happen because IntellijIdea editor set <script type="ts">
.
Changed to be <script lang="ts">
, it started to work
In case if help someone: on my side is happen because IntellijIdea editor set
<script type="ts">
. Changed to be<script lang="ts">
, it started to work
type="TS" is incorrect, so it makes sense. Sveltes preprocess only accepts Lang="ts" afaik.
Check:
type: "module"
is set in package.jsonP.S.
You can use import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
My closing script tag had a space is it. <\script >
was fixed to <\script>
Renaming it to
.js
solves the issue.
.mjs
also has this issue. Renaming to .js
fixes it as well.
Describe the bug Upgrading from 4.9.5 to 4.10.1, a new bug seems to appear with TypeScript classes resulting in svelte-preprocess to return unexpected token errors.
Currently to prevent this issue, you need to downgrade svelte-preprocess to 4.9.5.
Logs
To Reproduce
Note that TypeScript allows class variables to have initializers in them and this was working before upgrading svelte-preprocess from 4.9.5 to 4.10.1.
Expected behavior There should be no errors returning when this happens.
Information about your project: Browser: Version 89.0.4389.114 (Developer Build, ungoogled-chromium) (64-bit) Operating System: Windows 10 svelte-preprocess: 4.10.1 Build Process: Vite