redirectToPreviewURL is not a function

Developing with Prismic
1

I'm experiencing issues with implementing the preview functionality using Svelte-Kit.

This is the error:

TypeError: __vite_ssr_import_0__.redirectToPreviewURL is not a function
    at GET (/Users/me/Documents/rk-website-frontend/src/routes/[[preview=preview]]/api/preview/+server.js:7:16)
    at Module.render_endpoint (/Users/me/Documents/rk-website-frontend/node_modules/@sveltejs/kit/src/runtime/server/endpoint.js:43:24)
    at resolve (/Users/me/Documents/rk-website-frontend/node_modules/@sveltejs/kit/src/runtime/server/respond.js:404:23)
    at async Module.respond (/Users/me/Documents/rk-website-frontend/node_modules/@sveltejs/kit/src/runtime/server/respond.js:274:20)
    at async file:///Users/me/Documents/rk-website-frontend/node_modules/@sveltejs/kit/src/exports/vite/dev/index.js:510:22

It's in my +.server.js file which is located in

src > routes > [[preview=preview]] > API > preview

I followed this documentation Preview Drafts in Svelte - Documentation - Prismic.

I'm quite lost here! Anyone has an idea?

Note: Would be nice if there was an example project which has implemented this preview functionality in Svelte-Kit.

3

Hi @robotkittens,

Are your dependencies all up-to-date? This function was recently added to the package.

Sam

5

Hi Sam,

Thank you for your reply. This is my package.json:

{
  "name": "rk-website",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "vite dev",
    "build": "npm run routes && vite build",
    "preview": "vite preview",
    "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
    "routes": "node ./src/lib/utils/dynamic_routes",
    "lint": "prettier --plugin-search-dir . --check . && eslint .",
    "format": "prettier --plugin-search-dir . --write .",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build -o build",
    "test": "vitest --run",
    "slicemachine": "start-slicemachine",
    "sst:deploy": "sst deploy",
    "sst:dev": "sst dev"
  },
  "devDependencies": {
    "@silvermine/serverless-plugin-cloudfront-lambda-edge": "^2.2.2",
    "@slicemachine/adapter-sveltekit": "^0.3.19",
    "@storybook/addon-essentials": "^7.0.8",
    "@storybook/addon-interactions": "^7.0.8",
    "@storybook/addon-links": "^7.0.8",
    "@storybook/addon-svelte-csf": "^3.0.2",
    "@storybook/blocks": "^7.0.8",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/svelte": "^7.0.8",
    "@storybook/sveltekit": "^7.0.8",
    "@storybook/testing-library": "^0.0.14-next.2",
    "@sveltejs/adapter-auto": "^2.0.0",
    "@sveltejs/adapter-static": "^2.0.2",
    "@sveltejs/kit": "^1.5.0",
    "@types/gtag.js": "0.0.10",
    "autoprefixer": "^10.4.16",
    "aws-cdk-lib": "2.101.1",
    "constructs": "10.2.69",
    "eslint": "^8.28.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-svelte": "^2.26.0",
    "gsap": "file:gsap-bonus.tgz",
    "jsdom": "^22.0.0",
    "postcss": "^8.4.31",
    "postcss-load-config": "^4.0.1",
    "prettier": "^2.8.8",
    "prettier-plugin-svelte": "^2.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "sass": "^1.62.1",
    "serverless-cloudfront-invalidate": "^1.9.0",
    "serverless-s3-deploy": "^0.10.1",
    "slice-machine-ui": "^1.16.0",
    "sst": "^2.36.1",
    "storybook": "^7.0.8",
    "svelte": "^3.54.0",
    "svelte-check": "^3.0.1",
    "svelte-kit-sst": "^2.36.1",
    "svelte-meta-tags": "^2.7.0",
    "tailwindcss": "^3.3.3",
    "typescript": "^5.0.0",
    "vite": "^4.4.11",
    "vitest": "^0.31.0"
  },
  "type": "module",
  "dependencies": {
    "@prismicio/client": "^6.7.1",
    "@prismicio/helpers": "^2.3.9",
    "@prismicio/svelte": "^0.0.9",
    "@storybook/addon-styling": "^1.0.6",
    "@vimeo/player": "^2.19.0",
    "gsap": "file:gsap-bonus.tgz",
    "node-fetch": "^3.3.2",
    "svelte-gestures": "^1.5.2",
    "three": "^0.152.2"
  }
}
7

Yep, your @prismicio/svelte is a little out of date.

npm i @prismicio/svelte@latest

Should solve your problem. Let me know if that helps.

11

Hi Sam, thanks for your help. I've reviewed my steps and made some mistakes here and there, which I've now fixed. Now when I want to see a preview of a Prismic page, it redirects to http://localhost:5173/preview. This seems almost correct, but shouldn't it redirect to http://localhost:5173/preview/prismic-page instead?

12

It also appears that this URL doesn't work for me:

https://rk-website-2023.prismic.io/api/v2/documents/search?ref=ZWiYTBEAANVDkcre~ZWb8axEAACAAikj5

13

when I want to see a preview of a Prismic page, it redirects to http://localhost:5173/preview . This seems almost correct, but shouldn't it redirect to http://localhost:5173/preview/prismic-page instead?

You're right, it should redirect to /preview/prismic-page. In your prismicio.js document, do you have a routes array defined with a route that looks like this?

{
  path: "/:uid",
  type: "page"
}

It also appears that this URL doesn't work for me

It looks like you're trying to use an outdated ref. If you go here https://rk-website-2023.prismic.io/api/v2 you'll be able to find the current ref. Note that when you use @prismicio/client it automatically fetches the ref for you.

Sam

14

Hi Sam,

Thank you for your fast reply. No, I don't have any routes array defined.

This is what my prismicio.js looks like:

import * as prismic from '@prismicio/client';

// Update your repository name here
const repoName = 'rk-website-2023';

/**
 * Creates a Prismic client for the project's repository. The client is
 * used to query content from the Prismic API.
 *
 * @param {import('@prismicio/svelte/kit').CreateClientConfig} config
 */
export const createClient = ({ cookies, request, fetch, ...config } = {}) => {
  const clientOptions = {
    fetch,
    ...config,
  };

  const client = prismic.createClient(repoName, clientOptions);

  if (request) {
    client.enableAutoPreviewsFromReq(client, cookies, request);
  }

  return client;
};
export default createClient;

Why is this routes array needed?

16

Hi Sam,

It works with implementing the routes array and defining every page I have. Thank you so much for your help :slight_smile:

1 Like
17

I'm glad it worked!

1 Like