Migration to svelte4 and sveltekit 2 breaking with peer dependencies

[gorayaa66]

Describe the bug

new package.json after updating svelte4

{
"name": "appName",
"version": "0.0.1",
"private": true,
"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 --plugin-search-dir . --check . && eslint .",
"format": "prettier --plugin-search-dir . --write .",
},
"devDependencies": {
"@sveltejs/adapter-vercel": "^5.1.0",
"@sveltejs/kit": "^1.20.4",
"@tailwindcss/forms": "^0.5.3",
"@tailwindcss/typography": "^0.5.9",
"@types/dompurify": "^3.0.1",
"@types/jsonwebtoken": "^9.0.2",
"@types/mailgun-js": "^0.22.13",
"@types/marked": "^4.0.8",
"@typescript-eslint/eslint-plugin": "^5.45.0",
"@typescript-eslint/parser": "^5.45.0",
"autoprefixer": "^10.4.13",
"eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-svelte3": "^4.0.0",
"postcss": "^8.4.21",
"prettier": "^2.8.4",
"prettier-plugin-svelte": "^2.10.1",
"prettier-plugin-tailwindcss": "^0.2.3",
"stripe": "^11.17.0",
"supabase": "^1.61.3",
"svelte": "^4.0.0",
"svelte-check": "^3.4.3",
"svelte-stripe": "^0.0.22",
"tailwindcss": "^3.4.1",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^4.0.0"
},
"type": "module",
"dependencies": {
"@supabase/auth-helpers-sveltekit": "^0.9.4",
"@supabase/supabase-js": "^2.10.0",
"@tailwindcss/line-clamp": "^0.4.4",
"@types/uuid": "^9.0.1",
"compressorjs": "^1.2.1",
"dayjs": "^1.11.7",
"dompurify": "^3.0.2",
"gray-matter": "^4.0.3",
"jsonwebtoken": "^9.0.2",
"mailgun-js": "^0.22.0",
"markdown-it": "^13.0.1",
"marked": "^4.3.0",
"uuid": "^9.0.0"
}
}

old package.json

{
"name": "appName",
"version": "0.0.1",
"private": true,
"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 --plugin-search-dir . --check . && eslint .",
"format": "prettier --plugin-search-dir . --write .",
},
"devDependencies": {
"@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/kit": "^1.5.0",
"@tailwindcss/forms": "^0.5.3",
"@tailwindcss/typography": "^0.5.9",
"@types/dompurify": "^3.0.1",
"@types/jsonwebtoken": "^9.0.2",
"@types/mailgun-js": "^0.22.13",
"@types/marked": "^4.0.8",
"@typescript-eslint/eslint-plugin": "^5.45.0",
"@typescript-eslint/parser": "^5.45.0",
"autoprefixer": "^10.4.13",
"eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-svelte3": "^4.0.0",
"postcss": "^8.4.21",
"prettier": "^2.8.4",
"prettier-plugin-svelte": "^2.8.1",
"prettier-plugin-tailwindcss": "^0.2.3",
"stripe": "^11.17.0",
"supabase": "^1.61.3",
"svelte": "^3.54.0",
"svelte-check": "^3.0.1",
"svelte-stripe": "^0.0.22",
"tailwindcss": "^3.2.7",
"tslib": "^2.4.1",
"typescript": "^4.9.3",
"vite": "^4.0.0"
},
"type": "module",
"dependencies": {
"@supabase/auth-helpers-sveltekit": "^0.9.0",
"@supabase/supabase-js": "^2.10.0",
"@tailwindcss/line-clamp": "^0.4.4",
"@types/uuid": "^9.0.1",
"compressorjs": "^1.2.1",
"dayjs": "^1.11.7",
"dompurify": "^3.0.2",
"gray-matter": "^4.0.3",
"jsonwebtoken": "^9.0.2",
"mailgun-js": "^0.22.0",
"markdown-it": "^13.0.1",
"marked": "^4.3.0",
"uuid": "^9.0.0"
}
}

Reproduction

update svelte 1.5.0 to svelte 4, i have attached the old and new package.json files.

Logs

npm ERR! While resolving: @sveltejs/[email protected]
10:34:15.959	npm ERR! Found: @sveltejs/[email protected]
10:34:15.959	npm ERR! node_modules/@sveltejs/kit
10:34:15.960	npm ERR!   dev @sveltejs/kit@"^1.20.4" from the root project
10:34:15.960	npm ERR!   peer @sveltejs/kit@"^1.15.2" from @supabase/[email protected]
10:34:15.960	npm ERR!   node_modules/@supabase/auth-helpers-sveltekit
10:34:15.960	npm ERR!     @supabase/auth-helpers-sveltekit@"^0.9.4" from the root project
10:34:15.961	npm ERR!   1 more (@sveltejs/adapter-auto)
10:34:15.961	npm ERR! 
10:34:15.961	npm ERR! Could not resolve dependency:
10:34:15.961	npm ERR! peer @sveltejs/kit@"^2.4.0" from @sveltejs/[email protected]
10:34:15.961	npm ERR! node_modules/@sveltejs/adapter-vercel
10:34:15.962	npm ERR!   dev @sveltejs/adapter-vercel@"^5.1.0" from the root project
10:34:15.962	npm ERR! 
10:34:15.962	npm ERR! Conflicting peer dependency: @sveltejs/[email protected]
10:34:15.962	npm ERR! node_modules/@sveltejs/kit
10:34:15.962	npm ERR!   peer @sveltejs/kit@"^2.4.0" from @sveltejs/[email protected]
10:34:15.962	npm ERR!   node_modules/@sveltejs/adapter-vercel
10:34:15.963	npm ERR!     dev @sveltejs/adapter-vercel@"^5.1.0" from the root project
10:34:15.963	npm ERR! 
10:34:15.963	npm ERR! Fix the upstream dependency conflict, or retry
10:34:15.963	npm ERR! this command with --force or --legacy-peer-deps
10:34:15.963	npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

System Info

I'm encountering an build failure during Vercel deployment, even though my application runs perfectly on localhost development. The "error log" pasted above is available for reference.

Severity

blocking an upgrade

Additional Information

Can you help me identify and resolve the issue?

[dummdidumm]

Downgrade adapter-vercel to version 3, or use npx svelte-migrate sveltekit-2 to upgrade SvelteKit to version 2.

[gorayaa66]

Thanks @dummdidumm, this did resolve the peer dependencies issue but after npx svelte-migrate sveltekit-2 i'm getting below error as i'm using dayjs 1.11.7

Bug log
[vite] Named export 'Dayjs' not found. The requested module 'dayjs' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'dayjs';
const {Dayjs} = pkg;
SyntaxError: [vite] Named export 'Dayjs' not found. The requested module 'dayjs' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'dayjs';
const {Dayjs} = pkg;

[dummdidumm]

Did you do what the error message suggests?

This sounds unrelated to SvelteKit, converted to a discussion since this is a help request

[gorayaa66]

It doesnot suggested anything, here is the whole error log:
[vite] Named export 'Dayjs' not found. The requested module 'dayjs' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'dayjs';
const {Dayjs} = pkg;
SyntaxError: [vite] Named export 'Dayjs' not found. The requested module 'dayjs' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'dayjs';
const {Dayjs} = pkg
at analyzeImportedModDifference (file:///Users/apple/Documents/svelte%20projects/appName-S/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:54798:19)
at nodeImport (file:///Users/apple/Documents/svelte%20projects/appName-S/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:54749:9)
at async ssrImport (file:///Users/apple/Documents/svelte%20projects/appName-S/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:54644:24)
at async eval (eval at instantiateModule (file:///Users/apple/Documents/svelte%20projects/appName-S/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:54703:28), :3:44)
at async instantiateModule (file:///Users/apple/Documents/svelte%20projects/appName-S/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:54706:9)

[gorayaa66]

changed from
import { Dayjs } from 'dayjs'
to
import { type Dayjs } from 'dayjs'
type keyword was missing which was causing the issue.

[gorayaa66]

changed from
import { Dayjs } from 'dayjs'
to
import { type Dayjs } from 'dayjs'
type keyword was missing which was causing the issue.