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.

Preview Not Working for Next.js Project Using SliceZone

See original GitHub issue

Version

Prismic CLI version (know it by running prismic --version): 3.8.3-beta.0

Reproduction

Create a next.js project configured with slice machine
Use SliceZone component from next-slicezone in a dynamically generated page route
Set up prismic previews
Deploy to Vercel
Attempt to preview on deployed site

e.g. pages/[uid].js:

import SliceZone from "next-slicezone";
import { useGetStaticPaths } from "next-slicezone/hooks";
import Head from "next/head";
import Layout from "../../components/layout";
import { useGetStaticProps } from "../../next-slicezone/hooks";
import { Client } from "../../prismic";
import resolver from "../../sm-resolver.js";

export default function Page(props) {
  return (
    <Layout>
        <Head>
          <title>Test Page</title>
        </Head>
        <SliceZone {...props} resolver={resolver} />
    </Layout>
  );
}

export const getStaticPaths = useGetStaticPaths({
  client: Client(),
  formatPath: ({ uid }) => ({ params: { uid } }),
});

export const getStaticProps = useGetStaticProps({
  client: Client(),
  uid: ({ params }) => params.uid,
});

What is expected?

I should be able to preview a prismic page and see the updated SliceZone components when deployed to Vercel.

What is actually happening?

The preview works locally, but when deployed the SliceZone component does not render anything.

Any additional information

The problem seems to lie in useGetStaticProps from next-slicezone/hooks. When deployed to Vercel, useGetStaticProps makes a call to next-slicezone/features/registry.js, and Vercel cannot find the config file here.

When deployed, pathToSmFile is /var/task/sm.json, which doesn’t seem to exist when Preview mode is used. So the props passed to my SliceZone component don’t include any registries.

useGetStaticProps is behaving as expected when not using Preview.

Issue Analytics

State:
Created 3 years ago
Reactions:5
Comments:8 (2 by maintainers)

Top GitHub Comments

6reactions

hypervillaincommented, Jan 18, 2021

Thanks for the detailed report! I believe this would require a rewrite, let me talk about it with the team tomorrow and see how we can tackle it

4reactions

hypervillaincommented, Jan 20, 2021

Alright, who wants to try next-slicezone@0.0.12-alpha.0? 😊

The only change to your code it requires would be to add a condition on when the resolver is being called in pages/_document. Mine is like this at the moment:

import Document, { Html, Head, Main, NextScript } from 'next/document'

import { createResolver } from 'next-slicezone/resolver'

export default class extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    if (process.env.NODE_ENV === 'development') {
      await createResolver()
    }
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

Hope that helps. Let me know!