"builder.writePrerendered is not a function" error

[thdoan]

After updating to most recent versions of packages, I get a "builder.writePrerendered is not a function" error when I do a build.

package.json:

{
  "name": "sveltekit-extension",
  "version": "0.0.1",
  "scripts": {
    "dev:extension": "nodemon --watch src --watch static --ext .* --exec \"npm run build & npx esbuild src/scripts/background.ts src/scripts/content.ts --bundle --outdir=build/js/\"",
    "dev": "svelte-kit dev",
    "build": "svelte-kit build",
    "package": "svelte-kit package",
    "preview": "svelte-kit preview",
    "check": "svelte-check --tsconfig ./tsconfig.json",
    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch"
  },
  "devDependencies": {
    "@sveltejs/adapter-auto": "next",
    "@sveltejs/kit": "next",
    "nodemon": "^2.0.20",
    "svelte": "^3.55.0",
    "svelte-check": "^2.10.2",
    "svelte-preprocess": "^5.0.0",
    "sveltekit-adapter-chrome-extension": "^1.5.0",
    "tslib": "^2.4.1",
    "typescript": "^4.9.4"
  },
  "type": "module",
  "dependencies": {
    "@types/chrome": "^0.0.204",
    "esbuild": "^0.16.6"
  }
}

svelte.config.js

import adapter from 'sveltekit-adapter-chrome-extension';
import preprocess from 'svelte-preprocess';

export default {
  preprocess: preprocess(),
  kit: {
    adapter: adapter(),
    appDir: 'app',
  },
};

Steps to reproduce:

1. npm run dev:extension
2. The following error message is thrown:

> Using sveltekit-adapter-chrome-extension
> builder.writePrerendered is not a function
    at adapt (path/to/node_modules/sveltekit-adapter-chrome-extension/index.js:39:15)
    at adapt (path/to/node_modules/@sveltejs/kit/dist/chunks/index5.js:876:8)
    at path/to/node_modules/@sveltejs/kit/dist/cli.js:1062:11

Another issue I noticed: some files are missing from the build directory.

BEFORE updating to latest versions of packages (extension works fine):

AFTER updating to latest versions of packages (extension doesn't load):

Is it possible this adapter is not compatible with the latest version of Svelte or some other package?

[michmich112]

Hey @thdoan I just checked and the package works with the latest verison of sveltekit (fresh install). Can you check what version you have for @sveltejs/kit in your package-lock.json file? I think the issue comes from there as we added the writePrerendered function in May following a change in the adapter interface from the svelte kit team.

[thdoan]

Hi @michmich112 here you go:

    "node_modules/@sveltejs/kit": {
      "version": "1.0.0-next.287",
      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.287.tgz",
      "integrity": "sha512-aiCCuSpE9U8tX+29fnPfh9qHzWm8dBP7hkWvzcb1SZqbij8WXHyntUg/LXmhqlb8zKflEMLWa8iS+coqYDPmPQ==",
      "dev": true,
      "dependencies": {
        "@sveltejs/vite-plugin-svelte": "^1.0.0-next.32",
        "sade": "^1.7.4",
        "vite": "^2.8.0"
      },
      "bin": {
        "svelte-kit": "svelte-kit.js"
      },
      "engines": {
        "node": ">=14.13"
      },
      "peerDependencies": {
        "svelte": "^3.44.0"
      }
    },

[michmich112]

thanks @thdoan hmm doing a clean install with npm create svelte@latest <project-name> with the demo project, this is what it configures for sveltekit:

    "node_modules/@sveltejs/kit": {
            "version": "1.0.0",
            "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0.tgz",
            "integrity": "sha512-6VgD5C3i2XOT7GRBi5LaPPLiFAmpiDkhKJNVt8fLg1RmaL6f7rT4Kiwi2XGpYRj3V1F4t1QRdsfmAkkDUKY3OA==",
            "dev": true,
            "hasInstallScript": true,
            "dependencies": {
                "@sveltejs/vite-plugin-svelte": "^2.0.0",
                "@types/cookie": "^0.5.1",
                "cookie": "^0.5.0",
                "devalue": "^4.2.0",
                "esm-env": "^1.0.0",
                "kleur": "^4.1.5",
                "magic-string": "^0.27.0",
                "mime": "^3.0.0",
                "sade": "^1.8.1",
                "set-cookie-parser": "^2.5.1",
                "sirv": "^2.0.2",
                "tiny-glob": "^0.2.9",
                "undici": "5.14.0"
            },
            "bin": {
                "svelte-kit": "svelte-kit.js"
            },
            "engines": {
                "node": ">=16.14"
            },
            "peerDependencies": {
                "svelte": "^3.54.0",
                "vite": "^4.0.0"
            }
        },

[thdoan]

Hmm....strange. Thanks for checking it out. It's a bit worrying if we might have to start a fresh project every time we want to update to newer packages. As a last resort, let me delete the lock file and regenerate it...

[michmich112]

A quick fix would be to downgrade to your previous version since it worked and should work with your version of svelte kit. a second fix would be to do a clean upgrade to the latest version of svelte kit but this would require some rewrite for your code as there has been breaking changes.

[michmich112]

Hmm....strange. Thanks for checking it out. It's a bit worrying if we might have to start a fresh project every time we want to update to newer packages. As a last resort, let me delete the lock file and regenerate it...

Yeah there are many changes with Kit making it unstable, i'll try and see if i can post a fix for your since this is a valid issue.

[thdoan]

After running npm i --package-lock-only it regenerated a slightly different entry, but the same error remains:

    "node_modules/@sveltejs/kit": {
      "version": "1.0.0-next.287",
      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.287.tgz",
      "integrity": "sha512-aiCCuSpE9U8tX+29fnPfh9qHzWm8dBP7hkWvzcb1SZqbij8WXHyntUg/LXmhqlb8zKflEMLWa8iS+coqYDPmPQ==",
      "dev": true,
      "dependencies": {
        "@sveltejs/vite-plugin-svelte": "^1.0.0-next.32",
        "sade": "^1.7.4",
        "vite": "^2.8.0"
      },
      "bin": {
        "svelte-kit": "svelte-kit.js"
      },
      "engines": {
        "node": ">=14.13"
      },
      "peerDependencies": {
        "svelte": "^3.44.0"
      }
    },

FYI here is my project folder: sveltekit-template.zip

[thdoan]

@michmich112 can you please share with me your package.json for a minimal MV3 extension? I just tried a new SvelteKit skeleton project and now the build is completely broken 😭. Here's what I did:

1. npm init svelte@next sveltekit-template
2. replaced src directory with the one in the zip above
3. replaced svelte.config.js with the copy in the zip above
4. npm run build -- this error is thrown:

error during build:
Error: No routes found. If you are using a custom src/routes directory, make sure it is specified in svelte.config.js

I don't know why it was building just fine from a SvelteKit project that I initialized in Feb 2022 (based on this template) but not today. The latest SK setup looks different from my last working setup...

Scripts in last working package.json (Feb 2022):

"scripts": {
  "dev:extension": "nodemon --watch src --watch static --ext .* --exec \"npm run build & npx esbuild src/scripts/background.ts src/scripts/content.ts --bundle --outdir=build/js/\"",
  "dev": "svelte-kit dev",
  "build": "svelte-kit build",
  "package": "svelte-kit package",
  "preview": "svelte-kit preview",
  "check": "svelte-check --tsconfig ./tsconfig.json",
  "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch"
},

Scripts in package.json after starting a new SK project (today):

"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 ."
},

Looks like they switched from svelte-kit to vite for the build command. For now I'll revert to all the package versions from Feb 2022, but it would be nice to be able to update to latest packages.

[michmich112]

Hi @thdoan I think this may be related to the stable release of sveltekit v1.0.0. Let me make a few changes to the code you sent over to make it work ;)

[michmich112]

Hi @thdoan Here is your working extension!

Here are the steps i took to make it.

Note with the stable release of Sveltekit v1 i opted into using it.

1. Create a new skeleton project with npm create svelte@latest <project-name>. In this case the project name was svelte template.
2. install dependencies with npm install && npm install -D svelte-kit-adapter-chrome-extension@latest
3. Update the svelte.config.js to use the extension adapter
4. Remove the default /src/routes/+page.svelte
5. Add /src/routes/options/+page.svelte and /src/routes/popup/+page.svelte and populate them with the content from the zip file you sent
6. Add /src/routes/options/+page.ts and /src/routes/popup/+page.ts and insert the following code to tell sveltekit to prerender these routes:

   export const prerender=true;

7. create /src/scripts
8. Add your background.ts and content.ts to /src/scripts/
9. copy css/ , images/ and manifest.json from your folder to the new project under the /static dir
10. Update package.json to add the build:extension script
11. Run npm run build:extension
12. Go to chrome and test it out!

Note: Sveltekit has had many changes since your original code which was why it was failing. Note: step 6 is crucial as that will allow svelte to know it should create raw html files and not user server side rendering!

sveltekit-template.zip

This is a great issue to point out and its probable other people may have it in the future so i'll be updating the documentation and some checks

[thdoan]

@michmich112 thank you SO much! I would never have figured this out on my own since I am just getting back into SK so my knowledge is still pretty basic (I was not able to create my extension the way I wanted back in February so I created it without SK).

On a related note, you may also want to update your helpful article because I noticed if you were to follow the instructions on there with SK v1.0.0 stable release things would not work as expected.

[michmich112]

@thdoan Good to hear :) I also just got back into SK and the new changes had me go through a bit of a learning curve 😂 Glad to know it helped and feel free to let me know if anything else comes up as with SK v1 there might be a few adjustments to be made.

Great point! I might event create a new article specifically for the release of SK v1.0.0 and like the article back to it.

On another note, this has allowed me to realize that I should add instructions for adding typescript support (without the LSP blasting red all over your IDE) and possibly even better support for scripts (background & service worker) so that developing extensions is easier :)

[thdoan]

@michmich112 I look forward to reading your new or updated article ^_^. There might be some more good news on SK front -- I was chatting with a Skeleton team member and they said something interesting regarding SK v1.0:

This could mean that eventually you may not need to maintain a separate adapter for extensions since there might be built-in options to move away from inlining scripts to comply with the CSP required by extensions.

[michmich112]

Ohh Thats awesome! That would be super cool :)