I am experiencing issues with my Svelte 4 Project, migrated to Svelte 4 by a previous developer.
Site it hosted on DigitalOcean App Platform. I am having issues getting it to build or run on the dev server locally (as well as DO).
Running on Node 16.
This is my package.json
{
"scripts": {
"dev": "vite dev --port 3000",
"build": "vite build",
"preview": "vite preview",
"start": "node index.js",
"build:digitalocean": "npm install --production=false && npm run build && npm ci",
"test": "npm run test:integration && npm run test:unit",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --check . && eslint .",
"format": "prettier --write .",
"test:integration": "playwright test",
"test:unit": "vitest",
"postbuild": "node --experimental-json-modules ./generate-sitemap.js"
},
"exports": {},
"devDependencies": {
"@beyonk/svelte-google-analytics": "^2.6.4",
"@playwright/test": "^1.28.1",
"@sveltejs/kit": "1.30.4",
"@sveltejs/adapter-auto": "^2.1.0",
"@sveltejs/adapter-node": "^1.0.0",
"@sveltejs/adapter-static": "^2.0.1",
"@sveltejs/vite-plugin-svelte": "^2.0.0",
"@tailwindcss/forms": "^0.5.7",
"algoliasearch": "^4.22.1",
"autoprefixer": "^10.4.17",
"cookie": "^0.6.0",
"cssnano": "^6.0.3",
"daisyui": "^4.6.0",
"dotenv": "^16.0.1",
"eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.35.1",
"fast-glob": "^3.3.2",
"instantsearch.js": "^4.64.0",
"js-cookie": "^3.0.5",
"lodash.groupby": "^4.6.0",
"lodash.sortby": "^4.7.0",
"lodash.uniq": "^4.5.0",
"lodash.uniqby": "^4.7.0",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.33",
"postcss-color-mod-function": "^3.0.3",
"postcss-preset-env": "^9.3.0",
"postcss-url": "^10.1.3",
"prettier": "^3.2.4",
"prettier-plugin-svelte": "^3.1.2",
"query-string": "^8.1.0",
"rollup-plugin-svelte": "7.1.5",
"svelte": "^4.2.9",
"svelte-check": "^3.6.0",
"tailwindcss": "^3.4.1",
"tslib": "^2.4.1",
"vite": "^4.0.0",
"vitest": "^0.2.0",
"xmlbuilder2": "^3.1.1"
},
"type": "module",
"dependencies": {
"serve": "^14.2.1",
"yarn": "^1.22.21"
},
"engines": {
"node": "16.x",
"npm": "~8.x"
}
}
npm install works fine.
npm dev works too. But when navigating to the site, I get
500 Internal Error
In the terminal, I see
TypeError: Cannot read properties of undefined (reading 'siteConfig')
at C:\Users\devel\Repos\365-Autmotive-Marketing\frontend-user-interface-for-classifieds-sites\src\routes\+layout.svelte:23:38
at Object.$$render (C:\Users\devel\Repos\365-Autmotive-Marketing\frontend-user-interface-for-classifieds-sites\node_modules\svelte\src\runtime\internal\ssr.js:156:16)
at C:\Users\devel\Repos\365-Autmotive-Marketing\frontend-user-interface-for-classifieds-sites\.svelte-kit\generated\root.svelte:44:40
at $$render (C:\Users\devel\Repos\365-Autmotive-Marketing\frontend-user-interface-for-classifieds-sites\node_modules\svelte\src\runtime\internal\ssr.js:156:16)
at Object.render (C:\Users\devel\Repos\365-Autmotive-Marketing\frontend-user-interface-for-classifieds-sites\node_modules\svelte\src\runtime\internal\ssr.js:164:17)
at Module.render_response (C:\Users\devel\Repos\365-Autmotive-Marketing\frontend-user-interface-for-classifieds-sites\node_modules\@sveltejs\kit\src\runtime\server\page\render.js:170:29)
at async Module.render_page (C:\Users\devel\Repos\365-Autmotive-Marketing\frontend-user-interface-for-classifieds-sites\node_modules\@sveltejs\kit\src\runtime\server\page\index.js:286:10)
at async resolve (C:\Users\devel\Repos\365-Autmotive-Marketing\frontend-user-interface-for-classifieds-sites\node_modules\@sveltejs\kit\src\runtime\server\respond.js:407:18)
at async Module.respond (C:\Users\devel\Repos\365-Autmotive-Marketing\frontend-user-interface-for-classifieds-sites\node_modules\@sveltejs\kit\src\runtime\server\respond.js:274:20)
at async file:///C:/Users/devel/Repos/365-Autmotive-Marketing/frontend-user-interface-for-classifieds-sites/node_modules/@sveltejs/kit/src/exports/vite/dev/index.js:510:22
TypeError: Cannot read properties of undefined (reading 'siteConfig')
at C:\Users\devel\Repos\365-Autmotive-Marketing\frontend-user-interface-for-classifieds-sites\src\routes\+layout.svelte:23:38
at Object.$$render (C:\Users\devel\Repos\365-Autmotive-Marketing\frontend-user-interface-for-classifieds-sites\node_modules\svelte\src\runtime\internal\ssr.js:156:16)
at C:\Users\devel\Repos\365-Autmotive-Marketing\frontend-user-interface-for-classifieds-sites\.svelte-kit\generated\root.svelte:44:40
at $$render (C:\Users\devel\Repos\365-Autmotive-Marketing\frontend-user-interface-for-classifieds-sites\node_modules\svelte\src\runtime\internal\ssr.js:156:16)
at Object.render (C:\Users\devel\Repos\365-Autmotive-Marketing\frontend-user-interface-for-classifieds-sites\node_modules\svelte\src\runtime\internal\ssr.js:164:17)
at Module.render_response (C:\Users\devel\Repos\365-Autmotive-Marketing\frontend-user-interface-for-classifieds-sites\node_modules\@sveltejs\kit\src\runtime\server\page\render.js:170:29)
at async Module.respond_with_error (C:\Users\devel\Repos\365-Autmotive-Marketing\frontend-user-interface-for-classifieds-sites\node_modules\@sveltejs\kit\src\runtime\server\page\respond_with_error.js:83:10)
at async Module.render_page (C:\Users\devel\Repos\365-Autmotive-Marketing\frontend-user-interface-for-classifieds-sites\node_modules\@sveltejs\kit\src\runtime\server\page\index.js:305:10)
at async resolve (C:\Users\devel\Repos\365-Autmotive-Marketing\frontend-user-interface-for-classifieds-sites\node_modules\@sveltejs\kit\src\runtime\server\respond.js:407:18)
at async Module.respond (C:\Users\devel\Repos\365-Autmotive-Marketing\frontend-user-interface-for-classifieds-sites\node_modules\@sveltejs\kit\src\runtime\server\respond.js:274:20)
svelte config changed, restarting vite dev-server. changed file: C:\Users\devel\Repos\365-Autmotive-Marketing\frontend-user-interface-for-classifieds-sites\svelte.config.js
npm run build works too. Encountering the same issues, when utilizing npm run preview of course.
I am deploying this to DigtalOcean as well (automatic via Github).
The build log is similar.
[2024-03-13 16:44:30] │ TypeError: Cannot read properties of undefined (reading 'siteConfig')
[2024-03-13 16:44:30] │ at file:///workspace/.svelte-kit/output/server/entries/pages/_layout.svelte.js:97:39
[2024-03-13 16:44:30] │ at Object.$$render (file:///workspace/.svelte-kit/output/server/chunks/ssr.js:127:18)
[2024-03-13 16:44:30] │ at file:///workspace/.svelte-kit/output/server/chunks/internal.js:57:121
[2024-03-13 16:44:30] │ at $$render (file:///workspace/.svelte-kit/output/server/chunks/ssr.js:127:18)
[2024-03-13 16:44:30] │ at Object.render (file:///workspace/.svelte-kit/output/server/chunks/ssr.js:135:20)
[2024-03-13 16:44:30] │ at render_response (file:///workspace/.svelte-kit/output/server/index.js:1401:34)
[2024-03-13 16:44:30] │ at async render_page (file:///workspace/.svelte-kit/output/server/index.js:2219:12)
[2024-03-13 16:44:30] │ at async resolve2 (file:///workspace/.svelte-kit/output/server/index.js:2833:24)
[2024-03-13 16:44:30] │ at async respond (file:///workspace/.svelte-kit/output/server/index.js:2719:22)
[2024-03-13 16:44:30] │ at async visit (file:///workspace/node_modules/@sveltejs/kit/src/core/postbuild/prerender.js:203:20)
[2024-03-13 16:44:30] │ TypeError: Cannot read properties of undefined (reading 'siteConfig')
[2024-03-13 16:44:30] │ at file:///workspace/.svelte-kit/output/server/entries/pages/_layout.svelte.js:97:39
[2024-03-13 16:44:30] │ at Object.$$render (file:///workspace/.svelte-kit/output/server/chunks/ssr.js:127:18)
[2024-03-13 16:44:30] │ at file:///workspace/.svelte-kit/output/server/chunks/internal.js:57:121
[2024-03-13 16:44:30] │ at $$render (file:///workspace/.svelte-kit/output/server/chunks/ssr.js:127:18)
[2024-03-13 16:44:30] │ at Object.render (file:///workspace/.svelte-kit/output/server/chunks/ssr.js:135:20)
[2024-03-13 16:44:30] │ at render_response (file:///workspace/.svelte-kit/output/server/index.js:1401:34)
[2024-03-13 16:44:30] │ at async respond_with_error (file:///workspace/.svelte-kit/output/server/index.js:1771:12)
[2024-03-13 16:44:30] │ at async render_page (file:///workspace/.svelte-kit/output/server/index.js:2236:12)
[2024-03-13 16:44:30] │ at async resolve2 (file:///workspace/.svelte-kit/output/server/index.js:2833:24)
[2024-03-13 16:44:30] │ at async respond (file:///workspace/.svelte-kit/output/server/index.js:2719:22)
[2024-03-13 16:44:30] │ Handling HTTP error: 500 on path: /, referred from null as a linked
[2024-03-13 16:44:30] │ .svelte-kit/output/server/.vite/manifest.json 4.20 kB
[2024-03-13 16:44:30] │ .svelte-kit/output/server/_app/immutable/assets/helpers.2cb07c31.css 0.10 kB
[2024-03-13 16:44:30] │ .svelte-kit/output/server/_app/immutable/assets/_page.e8a8c33b.css 0.87 kB
[2024-03-13 16:44:30] │ .svelte-kit/output/server/_app/immutable/assets/_layout.079db109.css 136.67 kB
[2024-03-13 16:44:30] │ .svelte-kit/output/server/chunks/hooks.server.js 0.00 kB
[2024-03-13 16:44:30] │ .svelte-kit/output/server/internal.js 0.19 kB
[2024-03-13 16:44:30] │ .svelte-kit/output/server/entries/fallbacks/error.svelte.js 0.47 kB
[2024-03-13 16:44:30] │ .svelte-kit/output/server/entries/pages/blog/_page.js 0.59 kB
[2024-03-13 16:44:30] │ .svelte-kit/output/server/chunks/stores.js 0.66 kB
[2024-03-13 16:44:30] │ .svelte-kit/output/server/entries/pages/_page.js 0.68 kB
[2024-03-13 16:44:30] │ .svelte-kit/output/server/entries/pages/_layout.server.js 1.05 kB
[2024-03-13 16:44:30] │ .svelte-kit/output/server/chunks/helpers.js 1.31 kB
[2024-03-13 16:44:30] │ .svelte-kit/output/server/chunks/index.js 1.40 kB
[2024-03-13 16:44:30] │ .svelte-kit/output/server/chunks/search-store.js 1.48 kB
[2024-03-13 16:44:30] │ .svelte-kit/output/server/entries/pages/blog/author/_...author_/_page.svelte.js 2.64 kB
[2024-03-13 16:44:30] │ .svelte-kit/output/server/entries/pages/inventory/_...vehicles_/_page.server.js 3.85 kB
[2024-03-13 16:44:30] │ .svelte-kit/output/server/entries/pages/blog/blog-post/_...post_/_page.svelte.js 4.51 kB
[2024-03-13 16:44:30] │ .svelte-kit/output/server/chunks/ssr.js 5.35 kB
[2024-03-13 16:44:30] │ .svelte-kit/output/server/chunks/internal.js 9.03 kB
[2024-03-13 16:44:30] │ .svelte-kit/output/server/entries/pages/blog/_page.svelte.js 10.23 kB
[2024-03-13 16:44:30] │ .svelte-kit/output/server/entries/pages/_layout.svelte.js 10.73 kB
[2024-03-13 16:44:30] │ .svelte-kit/output/server/entries/pages/_page.svelte.js 15.09 kB
[2024-03-13 16:44:30] │ .svelte-kit/output/server/entries/pages/inventory/_...vehicles_/_page.svelte.js 28.95 kB
[2024-03-13 16:44:30] │ .svelte-kit/output/server/index.js
If anyone has any insight on this, I would greatly appreciate some input, as I am new to Svelte and DigitalOcean.
I tried changing the @sveltejs/kit related dependencies. Previous developer supposedly had the site running locally with:
"@sveltejs/kit": "1.30.4",
"@sveltejs/adapter-auto": "^2.1.0",
"@sveltejs/adapter-node": "^1.0.0",
"@sveltejs/adapter-static": "^2.0.1",
"@sveltejs/vite-plugin-svelte": "^2.0.0",
However, the DigitalOcean App Platform server uses Node 16, of which @sveltejs/kit is incompatible. Had to change the packages accordingly, through trial and error.
He was using a higher version of Node, which is why there were build issues related to Node version in the DO build logs previously.
Those issues were resolved with the changes to package.json I made (downgrading @sveltejs/kit and peer dependency versions, to align with Node 16).
However, I am now seeing the issues I posted about.
I am unfamiliar with this siteConfig object, and am not sure why that suddenly doesn't work.
Edit:
After further investigation I have discovered this:
The $page object in my +layout.svelte.js file seems to be missing data.
When I output $page:
data: {
status: 500,
error: 'No site config found for 365carshop.com',
body: { components: [Array], metaData: [Object] }
},
This is my svelte.config.js:
import node from '@sveltejs/adapter-node';
import staticAdapter from '@sveltejs/adapter-static';
const adapter =
process.env.NODE_ENV === 'production'
? staticAdapter({ fallback: 'index.html' })
: node();
const config = {
kit: {
adapter,
paths: {
base: ''
},
prerender: {
// Implementing handleHttpError
handleHttpError({ status, path, referrer, referenceType }) {
console.log(`Handling HTTP error: ${status} on path: ${path}, referred from ${referrer} as a ${referenceType}`);
if (status === 404) {
return true; // Suppress the error
}
}
}
}
};
export default config;
I am not sure where the issue lies, or why this would be an issue after migrating?