Search code examples
sveltesveltekit

Loading HTML from variable name as page content in SvelteKit

How can I load an HTML, in a SvelteKit project, using the [slug] param as the page name?

I have a pretty simple SvelteKit project with some basic data loading. The structure (relevant to the question) of the project looks like this:

src
  lib
    cms
      projects
        slug1.html
        slug2.html
  routes
    projects
      [slug]
        +page.server.svelte
        +page.svelte

When the user visits https://example.com/projects/slug1 I'd like to load the slug1.html contents and display it as the page's contents.

In +page.server.js I have the following:

/** @type {import ('./$types').PageServerLoad } */
export async function load({ params }) {
  console.log(params);
  return {
    project: await import(`../../../lib/cms/projects/${params.slug}.html?raw`),
  };
}

My goal is to then have {@html data.project} available to me in +page.svelte. This isn't working out the way I'd hoped though, and I'm getting the following error:

Error: Data returned from `load` while rendering /projects/[slug] is not serializable: Cannot stringify POJOs with symbolic keys (data.project)
    at get_data (/Users/me/Documents/Repositories/site/node_modules/@sveltejs/kit/src/runtime/server/page/render.js:592:9)
    at Module.render_response (/Users/me/Documents/Repositories/site/node_modules/@sveltejs/kit/src/runtime/server/page/render.js:264:27)
    at async Module.render_page (/Users/me/Documents/Repositories/site/node_modules/@sveltejs/kit/src/runtime/server/page/index.js:286:10)
    at async resolve (/Users/me/Documents/Repositories/site/node_modules/@sveltejs/kit/src/runtime/server/respond.js:446:18)
    at async Module.respond (/Users/me/Documents/Repositories/site/node_modules/@sveltejs/kit/src/runtime/server/respond.js:319:20)
    at async file:///Users/me/Documents/Repositories/site/node_modules/@sveltejs/kit/src/exports/vite/dev/index.js:524:22

I'm missing an understanding of a concept for loading the data properly. How can I properly load the slug1.html contents to have available?

Solution

  • This is because of the format things are importing in. You can change the code to grab the default of the import instead:

    return {
    project: (await import(`../../lib/cms/${params.slug}.html?raw`)).default,
};