SvelteKit PageLoad module not found

Question

I have a SvelteKit project and for some reason, ./$types doesn't have the module PageLoad (which other projects do. I'm not sure what I did/didn't do to not have it. This is the error I'm getting:

Module '"./$types"' has no exported member 'PageLoad'.ts(2305)

This is how I'm using it (for testing):

import { error } from '@sveltejs/kit';
import type { PageLoad } from './$types';

export const load: PageLoad = async ({ params, fetch }) => {
  console.log('props from +page.ts: ', params.db_item)
  // We fetch the post here using a Worker/Lambda
  return params.db_item
}

Here is my package.json file:

{
    "name": "test",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "dev": "vite dev",
        "build": "vite build",
        "preview": "vite preview",
        "test": "playwright test",
        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
        "lint": "prettier --check .",
        "format": "prettier --write .",
        "surge deploy": "rollup -c; surge public"
    },
    "devDependencies": {
        "@playwright/test": "^1.25.0",
        "@sveltejs/adapter-auto": "next",
        "@sveltejs/kit": "next",
        "node-sass": "^7.0.3",
        "prettier": "^2.6.2",
        "prettier-plugin-svelte": "^2.7.0",
        "svelte": "^3.44.0",
        "svelte-check": "^2.7.1",
        "svelte-preprocess": "^4.10.6",
        "tslib": "^2.3.1",
        "typescript": "^4.7.4",
        "vite": "^3.1.0"
    },
    "type": "module",
    "dependencies": {
        "svelte-share-buttons-component": "^1.5.0"
    }
}

Here is my svelte.config file:

import adapter from '@sveltejs/adapter-cloudflare';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess(),

    kit: {
        adapter: adapter()
    }
};

export default config;

Footlight

Does this answer your question? SvelteKit, import type LayoutServerLoad/PageLoad – Crysta

Answer 1

This is absolutely crazy, but I figured it out.

I had initially named the file +page.js and renamed it to .ts. Apparently, that throws everything off. After deleting the file and creating it with .ts extension, the $types import worked perfectly. Nowhere does it say anything in the documentation, but that's what it was.

Footlight

You should tell the sveltekit team about this. Thanks for the finding. – Kopple

I did. That's where I found the fix. :) – Footlight

For future googlers, I just found out that I was trying to call PageLoad inside a +layout.ts file, which is a wrong thing to do. We can only call PageLoad if we have a +page.ts and ServerLoad for +layout.ts. – Erasme

@JoelHager - would you mind linking to the GitHub issue or wherever else you found the fix? I have been looking for it but unable to find it – Firebrick

There wasn't a specific 'fix' for it. It's some common knowledge thing about how Svelte builds types. You either have to force a type rebuild (I think npm run check would do it) but I ended up deleting the file after copying, and just creating a new file with the .ts extension. I wish I could be of more help. :/ – Footlight

Answer 2

Per the Svelte Blog: Zero-effort type safety

SvelteKit creates a hidden file $types.d.ts in every route directory. This file contains route specific types. Because of this, it's no longer even necessary to annotate Svelte-specific file exports (+page, +layout, +server, hooks, params, etc.).

However, when the name of a .ts/.js file in a particular route changes, the route's $types.d.ts file may loose integrity.

You can fix the problem by restarting the Svelte language server.

In VSCode:

• ctrl+p
• Enter >
• Select "Svelte: Restart Language Server"

Madness

I tried restarting the language server, and it did not work for me. I had to delete the file and create it under .ts extension rather than rename it from .js to .ts. Maybe it was a one-off bug, but recreating the file is what fixed it for me. – Footlight

Answer 3

One other time you'll run into this is if you've added a new file but aren't running the development server. In this case, the $types.d.ts file won't have been generated yet.

In that case, the fix is just to run your local dev server.

Unscratched

`Yup, that was it! – Monney

Answer 4

If anyone else is having this trouble - I found issues caused by moving from Svelte 3.X to Svelte 4.X, where my .eslintrc.cjs was still referencing some old "svelte3" configuration.

My outdated config:

module.exports = {
    // ...
    extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
    plugins: ['svelte3', '@typescript-eslint'],
    ignorePatterns: ['*.cjs'],
    overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
    settings: {
        'svelte3/typescript': () => require('typescript'),
    },
    // ...
}

Steps to fix.

1. Replace .eslintrc.js by copying latest config from a SvelteKit project generated with npm create svelte@latest my-app (also shared below)
2. Stop running dev server
3. Remove any generated types by deleting the .svelte-kit directory
4. Generate new types with npx svelte-kit sync
5. Reload VS Code window, some files may still be showing old errors but as soon as you edit them, they will display correctly

module.exports = {
    root: true,
    extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:svelte/recommended',
        'prettier',
    ],
    parser: '@typescript-eslint/parser',
    plugins: ['@typescript-eslint'],
    parserOptions: {
        sourceType: 'module',
        ecmaVersion: 2020,
        extraFileExtensions: ['.svelte'],
    },
    env: {
        browser: true,
        es2017: true,
        node: true,
    },
    overrides: [
        {
            files: ['*.svelte'],
            parser: 'svelte-eslint-parser',
            parserOptions: {
                parser: '@typescript-eslint/parser',
            },
        },
    ],
};

Firebrick