Build Error NextJS

Prismic Administrative Support
,
1

I started using Custom Types, and now I get this Build Error in Next.js.

./node_modules/slice-machine-ui/src/features/customTypes/customTypesBuilder/useCustomType.ts:1:28
Type error: Cannot find module '@prismicio/editor-support/Suspense' or its corresponding type declarations.

  1 | import { useRequest } from "@prismicio/editor-support/Suspense";
    |                            ^
  2 | import type { CustomType } from "@prismicio/types-internal/lib/customtypes";
  3 |
  4 | import { managerClient } from "@/managerClient";

I installed "'@prismicio/editor-support" but then the Error changed to this:

./node_modules/slice-machine-ui/src/features/customTypes/customTypesBuilder/useCustomType.ts:4:31
Type error: Cannot find module '@/managerClient' or its corresponding type declarations.

  2 | import type { CustomType } from "@prismicio/types-internal/lib/customtypes";
  3 |
  4 | import { managerClient } from "@/managerClient";
    |                               ^
  5 |
  6 | export function useCustomType(id: string): CustomType | undefined {
  7 |   return useRequest(readCustomType, [id]);

My dependency versions:

"dependencies": {
    "@prismicio/client": "^7.6.0",
    "@prismicio/next": "^1.6.0",
    "@prismicio/react": "^2.8.0",
    "axios": "^1.7.3",
    "axios-hooks": "^5.0.2",
    "bootstrap-icons": "^1.11.3",
    "flowbite": "^2.5.1",
    "flowbite-react": "^0.10.1",
    "next": "^14.2.4",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@slicemachine/adapter-next": "^0.3.45",
    "@types/node": "^20.14.2",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "autoprefixer": "^10.4.19",
    "concurrently": "^8.2.2",
    "eslint": "^8.57.0",
    "eslint-config-next": "^14.2.4",
    "postcss": "^8.4.39",
    "slice-machine-ui": "^2.4.1",
    "tailwindcss": "^3.4.4",
    "typescript": "^5.4.5"
  }
2

Hi @accounts13 ,

Welcome to the community :slight_smile:

Can you tell us more about how you got to this step and what you've tried?

  1. Did you set up your project using the npx @slicemachine/init@latest comannd?
  2. Did you try deleting the node_modules folder, package-lock and re-running npm install?
  3. Do you have a Prismic types file?

Thanks.

3

Hi @Phil ,
thanks for your reply!

  1. I used Install Prismic with Next.js - Documentation - Prismic and also did npx @slicemachine/init@latest
  2. Yes, this didn't work, and building also doesn't work in Vercel Action, so I would say it is not related to my local environment, which was a concern of mine too
  3. I have the file and I would love to share it, but I can't upload it here, and it is too long to post.

Here the custom type part (I think it is the custom type part)

/**
 * Content for Email Newsletter Signup documents
 */
interface EmailNewsletterSignupDocumentData {
  /**
   * Success Page field in *Email Newsletter Signup*
   *
   * - **Field Type**: Link
   * - **Placeholder**: *None*
   * - **API ID Path**: email_newsletter_signup.success_page
   * - **Tab**: Main
   * - **Documentation**: https://prismic.io/docs/field#link-content-relationship
   */
  success_page: prismic.LinkField;
}

/**
 * Email Newsletter Signup document from Prismic
 *
 * - **API ID**: `email_newsletter_signup`
 * - **Repeatable**: `false`
 * - **Documentation**: https://prismic.io/docs/custom-types
 *
 * @typeParam Lang - Language API ID of the document.
 */
export type EmailNewsletterSignupDocument<Lang extends string = string> =
  prismic.PrismicDocumentWithoutUID<
    Simplify<EmailNewsletterSignupDocumentData>,
    "email_newsletter_signup",
    Lang
  >;

/**
 * Item in *Navigation → NavigationItems*
 */
export interface NavigationDocumentDataNavigationitemsItem {
  /**
   * NavigationItem field in *Navigation → NavigationItems*
   *
   * - **Field Type**: Content Relationship
   * - **Placeholder**: *None*
   * - **API ID Path**: navigation.navigationitems[].navigationitem
   * - **Documentation**: https://prismic.io/docs/field#link-content-relationship
   */
  navigationitem: prismic.ContentRelationshipField;
}

type NavigationDocumentDataSlicesSlice = NavigationItemSlice;

/**
 * Content for Navigation documents
 */
interface NavigationDocumentData {
  /**
   * NavigationItems field in *Navigation*
   *
   * - **Field Type**: Group
   * - **Placeholder**: *None*
   * - **API ID Path**: navigation.navigationitems[]
   * - **Tab**: Main
   * - **Documentation**: https://prismic.io/docs/field#group
   */
  navigationitems: prismic.GroupField<
    Simplify<NavigationDocumentDataNavigationitemsItem>
  >;

  /**
   * Slice Zone field in *Navigation*
   *
   * - **Field Type**: Slice Zone
   * - **Placeholder**: *None*
   * - **API ID Path**: navigation.slices[]
   * - **Tab**: Main
   * - **Documentation**: https://prismic.io/docs/field#slices
   */
  slices: prismic.SliceZone<NavigationDocumentDataSlicesSlice>;
}

/**
 * Navigation document from Prismic
 *
 * - **API ID**: `navigation`
 * - **Repeatable**: `false`
 * - **Documentation**: https://prismic.io/docs/custom-types
 *
 * @typeParam Lang - Language API ID of the document.
 */
export type NavigationDocument<Lang extends string = string> =
  prismic.PrismicDocumentWithUID<
    Simplify<NavigationDocumentData>,
    "navigation",
    Lang
  >;
4

Hey @accounts13 ! Would you be able to put your project on Github so we can take a look? Might be easier for us to spot any issues by seeing the full picture.