question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Trouble converting svelte skeleton site to static, using adapter-static

See original GitHub issue

Describe the bug

Hi, and thank you for working on a dev tool I love!

I’m attempting to make a static site with Svelte. My ultimate goal is to convert a two-page site I’ve already built into something I can host on GH Pages instead of its current hosting on Netlify. However, I’ve run into a problem while using adapter-static, so I am now try to convert just the basic starter “skeleton” into a static site, and … I’m running into the same problem.

In summary, adapter-static keeps telling me:

@sveltejs/adapter-static: all routes must be fully prerenderable, but found the following routes that are dynamic:
    - src/routes/

I’ve tried to follow the advice that follows, but adding export const prerender = true; to my src/routes/+layout.svelte file doesn’t seem to make a difference.

Reproduction

To keep things simple, I’ll just say how to reproduce this with the skeleton site.

  1. Start a new project with npm create svelte@latest my-app (following the Creating a Project guide)
  2. Follow the prompts to set up the project. I’m using JS, ESLint, and Prettier, but not Playwright
  3. Test that the basic npm run dev works (it did for me)
  4. Follow the adapter-static docs to convert the project to a static one.
// svelte.config.js

import adapter from '@sveltejs/adapter-static';

const dev = process.env.NODE_ENV === 'development';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		adapter: adapter({
			// default options are shown. On some platforms
			// these options are set automatically — see below
			pages: 'docs',
			assets: 'docs',
			fallback: null,
			precompress: false,
			strict: true
		  }),
		paths: {
			base: dev ? '' : '/svelte-static-test-from_skeleton',
		},
	}
};

export default config;

I tried to follow a suggestion, adding a file at src/routes/+layout.svelte. that simply includes the following:

<script>
    export const prerender = true;
</script>

…but this didn’t change the error.

I can’t get the build to work, so I don’t have browser logs, but the following is the full result from my terminal when I run the command npm run build.

Logs

~/code/svelte-static-test-from_skeleton  master ✗                                                                                                  21m ⚑ ◒  ⍉
▶ npm run build

> my-app@0.0.1 build
> vite build

polyfillModulePreload is deprecated. Use modulePreload.polyfill instead.
vite v3.2.0 building for production...
✓ 36 modules transformed.
polyfillModulePreload is deprecated. Use modulePreload.polyfill instead.
vite v3.2.0 building SSR bundle for production...
✓ 44 modules transformed.
Generated an empty chunk: "hooks"
.svelte-kit/output/server/vite-manifest.json                  1.03 KiB
.svelte-kit/output/server/index.js                            71.03 KiB
.svelte-kit/output/server/entries/pages/_layout.svelte.js     0.24 KiB
.svelte-kit/output/server/entries/fallbacks/error.svelte.js   1.50 KiB
.svelte-kit/output/server/entries/pages/_page.svelte.js       0.31 KiB
.svelte-kit/output/server/chunks/index.js                     3.15 KiB
.svelte-kit/output/server/chunks/hooks.js                     0.00 KiB

Run npm run preview to preview your production build locally.
.svelte-kit/output/client/vite-manifest.json                                           2.11 KiB
.svelte-kit/output/client/_app/immutable/components/error.svelte-6882d5bf.js           2.07 KiB / gzip: 0.95 KiB
.svelte-kit/output/client/_app/immutable/components/pages/_layout.svelte-95eb34a5.js   0.43 KiB / gzip: 0.30 KiB
.svelte-kit/output/client/_app/immutable/chunks/0-39c7f10b.js                          0.09 KiB / gzip: 0.10 KiB
.svelte-kit/output/client/_app/immutable/components/pages/_page.svelte-7a1cdd0a.js     0.81 KiB / gzip: 0.47 KiB
.svelte-kit/output/client/_app/immutable/chunks/singletons-1b0e5fcb.js                 1.81 KiB / gzip: 0.99 KiB
.svelte-kit/output/client/_app/immutable/chunks/index-a22ecbec.js                      6.08 KiB / gzip: 2.51 KiB
.svelte-kit/output/client/_app/immutable/chunks/2-eb11e36a.js                          0.09 KiB / gzip: 0.10 KiB
.svelte-kit/output/client/_app/immutable/chunks/1-e1814a8c.js                          0.09 KiB / gzip: 0.09 KiB
.svelte-kit/output/client/_app/immutable/start-77a5842c.js                             24.87 KiB / gzip: 9.73 KiB

> Using @sveltejs/adapter-static
  @sveltejs/adapter-static: all routes must be fully prerenderable, but found the following routes that are dynamic:
    - src/routes/
  
  You have the following options:
    - set the `fallback` option — see https://github.com/sveltejs/kit/tree/master/packages/adapter-static#spa-mode for more info.
    - add `export const prerender = true` to your root `+layout.js/.ts` or `+layout.server.js/.ts` file. This will try to prerender all pages.
    - add `export const prerender = true` to any `+server.js/ts` files that are not fetched by page `load` functions.
  
    - pass `strict: false` to `adapter-static` to ignore this error. Only do this if you are sure you don't need the routes in question in your final app, as they will be unavailable. See https://github.com/sveltejs/kit/tree/master/packages/adapter-static#strict for more info.
  
  If this doesn't help, you may need to use a different adapter. @sveltejs/adapter-static can only be used for sites that don't need a server for dynamic rendering, and can run on just a static file server.
  See https://kit.svelte.dev/docs/page-options#prerender for more details
error during build:
Error: Encountered dynamic routes
    at adapt (file:///Users/stephennixon/code/svelte-static-test-from_skeleton/node_modules/@sveltejs/adapter-static/index.js:53:12)
    at adapt (file:///Users/stephennixon/code/svelte-static-test-from_skeleton/node_modules/@sveltejs/kit/src/core/adapt/index.js:28:8)
    at Object.handler (file:///Users/stephennixon/code/svelte-static-test-from_skeleton/node_modules/@sveltejs/kit/src/exports/vite/index.js:493:12)
    at async PluginDriver.hookParallel (file:///Users/stephennixon/code/svelte-static-test-from_skeleton/node_modules/rollup/dist/es/shared/rollup.js:22670:17)
    at async Object.close (file:///Users/stephennixon/code/svelte-static-test-from_skeleton/node_modules/rollup/dist/es/shared/rollup.js:23750:13)
    at async Promise.all (index 0)
    at async build (file:///Users/stephennixon/code/svelte-static-test-from_skeleton/node_modules/vite/dist/node/chunks/dep-61d2428a.js:48150:13)
    at async CAC.<anonymous> (file:///Users/stephennixon/code/svelte-static-test-from_skeleton/node_modules/vite/dist/node/cli.js:758:9)

System Info

System:
    OS: macOS 12.5
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 2.00 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.12.0 - ~/.nvm/versions/node/v18.12.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v18.12.0/bin/npm
  Browsers:
    Chrome: 106.0.5249.119
    Chrome Canary: 109.0.5384.0
    Firefox: 105.0.1
    Safari: 15.6
    Safari Technology Preview: 16.0
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.84 
    @sveltejs/adapter-static: ^1.0.0-next.46 => 1.0.0-next.46 
    @sveltejs/kit: next => 1.0.0-next.525 
    svelte: ^3.44.0 => 3.52.0 
    vite: ^3.1.0 => 3.2.0

Severity

blocking all usage of SvelteKit

(at least, all usage of SvelteKit to make a static site, which is my current main goal)

Additional Information

My understanding of the concept of what exactly “dynamic rendering” means is pretty surface level. So, I might be missing some part of what I need to do to convert a site to static.

A specific question I have: can I run a Svelte store file if a site is converted to static, or would that make it dynamic? I’m using a Svelte store on a website to have a play/pause button in the navigation menu, which can play/pause CSS animations on either the home page or the about page (the site is just two pages, and won’t need frequent updates, so making it static seems ideal).

At the end of the day, my main goal is making a simple font specimen website that I can put up on GH Pages, and which I can trust to continue working for the foreseeable future. Svelte is awesome for this, because it makes it fun to see up interactive things like a “type tester” with variable axis sliders, and makes overall site composition really nice. I have a dynamic version that currently works well on Netlify, but I worry that maybe it may stop working (or be subject to hosting pricing changes) sooner than a static site would. If I am wrong to worry here, I’m also happy to hear if those concerns are unfounded.

Thank you so much for any insights or help!

Issue Analytics

  • State:open
  • Created a year ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

3reactions
leereamsnydercommented, Oct 29, 2022

Confusion over adding export const prerender = true to the root +layout.js vs +layout.svelte just bit me too. Following a migration from like next.398 or so, that file wasn’t there.

Maybe the error message could specify if the root +layout.js doesn’t exist already? Or say to create the root +layout.js if it doesn’t exist?

3reactions
dummdidummcommented, Oct 27, 2022

export const prerender = true; should be added to +layout.js (note the file ending), not +layout.svelte. Do that and it should work.

Keeping this open as it has come up a bunch of times now - is there any way we can make this more obvious? People seem to glance over the file ending and adding it to their +layout.svelte, probably also biased by the fact they often do not have a +layout.js present at that time.

Read more comments on GitHub >

github_iconTop Results From Across the Web

unable to build skeleton template with `@sveltejs/adapter-static`
Describe the bug. I'm having an issue building the "Skeleton project" template with the latest versions of SvelteKit and the static adapter ...
Read more >
Let's learn SvelteKit by building a static Markdown blog from ...
This is a walkthrough of using SvelteKit to set up a prerendered static blog with Markdown, Sass and an API. (That's how this...
Read more >
Adapters • Docs • SvelteKit
Most adapters will generate static HTML for any prerenderable pages of your site. In some cases, your entire app might be prerenderable, in...
Read more >
Getting Started with SvelteKit - Medium
Adapter-static allows you to compile to a completely static website with no server side rendering. Adapter-node compiles a node server that ...
Read more >
Learn SvelteKit by Building a Reddit Clone Application
Server-Side Rendering and Static-Site Generation (With Client-Side Hydration) ... @svelte/adapter-static - Pre-renders the application as a ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found