Svelte Frontend

Developers
1

If I follow this guide: Svelte frontend example | Internet Computer

to setup a fresh svelte project, I face the following error with the : @sveltejs/vite-plugin-svelte package.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: learn@0.0.0
npm ERR! Found: svelte@3.59.2
npm ERR! node_modules/svelte
npm ERR! svelte@“^3.59.2” from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer svelte@“^4.0.0 || ^5.0.0-next.0” from @sveltejs/vite-plugin-svelte@3.0.1
npm ERR! node_modules/@sveltejs/vite-plugin-svelte
npm ERR! @sveltejs/vite-plugin-svelte@“*” from the root project

It seems there version @sveltejs/vite-plugin-svelte package version is wrong?

How can I fix this ?

2

After a long try and error session, I found the following working configuration for package.json. with is settings there are no errors. But some packages are outdated, like dfinity/agent. Id you change this to the current version 0.20 then you receive some dependencies errors, because @connect2ic/core uses this old version.

{
“name”: “svelte”,
“version”: “0.0.0”,
“scripts”: {
“dev”: “vite”,
“build”: “tsc && vite build”,
“serve”: “vite preview”
},
“dependencies”: {
“@connect2ic/core”: “^0.1.1”,
“@connect2ic/svelte”: “^0.1.1”,
“@dfinity/agent”: “^0.11.3”
},
“devDependencies”: {
“@sveltejs/vite-plugin-svelte”: “1.0.0-next.49”,
“@types/node”: “^18.0.0”,
“buffer”: “^6.0.3”,
“svelte”: “^3.59.2”,
“svelte-preprocess”: “^4.10.7”,
“typescript”: “^4.7.4”,
“vite”: “^2.9.13”
}
}

So my question is, how can I get an actual setup for svelte. Most packages are outdated even the svelte one.

So this is an official example: Shouldn’t these versions be current?

3

For svelte/ icp stuff you can’t get much better than David and his Juno build GitHub - junobuild/juno: Build Web3 dApps like Web2

I’ve taken a lot of learning from that repo.

@peterparker tagging because you’re a giga-brain with this kind of stuff :smiley:

1 Like
4

You’re right, he’s definitely a rock star. But this repo ist too much for beginners.

By the why also other official svelte examples are still not working: e.g.

5

Oisy Wallet, proposals.network, etc. I always follow the same setup, if those repo sound less ‘too big’.

Regarding the issue, it’s pretty clear: the package.json is outdated and contains incompatibilities. It tries to install Svelte v3, but Vite requires v4.

6

Those repo are not maintained, probably why.

7

Haha, no I’m thinking that I’ve got literally a large over head, I should check in a mirror :rofl:

I just have a single working setup that I replicate across projects, and I make iterative adjustments whenever I encounter an issue. Not big brain at all, just maintainance and constant development.

8

After updating the npm packages from the sveltekit-starter example and some smaller changes, I was able to run the svelte starterkit example for svelte 4.2.3.

The following changes were made:

.prettierrc => remove “pluginSearchDirs”: [“.”],
dfx.json => change local port to 4943
vit.config.ts => change also the local port to 4943

changes to the package.json file

{
	"name": "sveltekit-starter",
	"version": "0.1.0",
	"private": true,
	"description": "Internet Computer SvelteKit starter application",
	"keywords": [
		"Internet Computer",
		"Motoko",
		"JavaScript",
		"Canister",
		"SvelteKit"
	],
	"scripts": {
		"dev": "vite dev",
		"build": "vite build",
		"preview": "vite preview",
		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
		"lint": "prettier --check './**/*.{ts,js,mjs,json,scss,css,svelte,html,md}' && eslint .",
		"format": "prettier --write './**/*.{ts,js,mjs,json,scss,css,svelte,html,md}'",
		"prebuild": "npm run generate",
		"generate": "dfx generate && node ./update.types.mjs && npm run format"
	},
	"devDependencies": {
		"@rollup/plugin-inject": "^5.0.5",
		"@sveltejs/adapter-static": "^2.0.3",
		"@sveltejs/kit": "1.30.3",
 	        "@types/node": "^20.10.4",
		"@typescript-eslint/eslint-plugin": "^6.10.0",
		"@typescript-eslint/parser": "^6.10.0",
		"autoprefixer": "^10.4.16",
		"eslint": "^8.53.0",
		"eslint-config-prettier": "^9.0.0",
		"eslint-plugin-svelte": "^2.35.0",
		"prettier": "^3.0.3",
		"prettier-plugin-organize-imports": "^3.2.4",
		"prettier-plugin-svelte": "^3.1.0",
		"sass": "^1.69.5",
		"svelte": "^4.2.3",
		"svelte-check": "^3.6.0",
		"svelte-preprocess": "^5.1.0",
		"tslib": "^2.6.2",
		"typescript": "^5.2.2"
	},
	"type": "module",
	"dependencies": {
		"@dfinity/agent": "^0.20.2",
		"@dfinity/candid": "^0.20.2",
		"@dfinity/principal": "^0.20.2"
	}
}
9

Thanks for reporting! I’ll work on updating the svelte examples

1 Like