TypeError: Cannot read properties of undefined (reading 'id')

Developing with Prismic
1

Describe your question/issue in detail

I am following the steps given in GitHub - prismicio-community/course-glisten-next and when I run the command npm run set-up-content then I am getting this Error:
TypeError: Cannot read properties of undefined (reading 'id')

Impacted feature

I am not able to find the exact issue behind this TypeError.

Errors

PS D:\demo-app> npm run set-up-content

> glisten-ai@0.1.0 set-up-content
> npx tsx@latest ./set-up-content.ts

Fetching source documents from "glisten-ai"...
Copying documents to "demo-app-lp"...
D:\Trading Minds\LandingPageClone\demo-app\node_modules\@prismicio\src\WriteClient.ts:401
                const masterLocale = repository.languages.find((lang) => lang.is_master)!.id
                                                                                       ^


TypeError: Cannot read properties of undefined (reading 'id')
    at WriteClient.migrateCreateDocuments (D:\demo-app\node_modules\@prismicio\src\WriteClient.ts:401:74)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at WriteClient.migrate (D:\demo-app\node_modules\@prismicio\src\WriteClient.ts:295:9)
    at main (d:\demo-app\set-up-content.ts:49:3)

Node.js v20.11.1

Package.json file

{
  "name": "glisten-ai",
  "version": "0.1.0",
  "private": true,
  "license": "Apache-2.0",
  "author": "Prismic <contact@prismic.io> (https://prismic.io)",
  "scripts": {
    "dev": "concurrently \"npm:next:dev\" \"npm:slicemachine\" --names \"next,slicemachine\" --prefix-colors blue,magenta",
    "next:dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "slicemachine": "start-slicemachine",
    "format": "prettier --write .",
    "set-up-content": "npx tsx@latest ./set-up-content.ts"
  },
  "dependencies": {
    "@gsap/react": "^2.1.1",
    "@prismicio/client": "^7.15.1",
    "@prismicio/next": "^1.7.1",
    "@prismicio/react": "^2.9.1",
    "@types/node": "^20.14.10",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "clsx": "^2.1.1",
    "gsap": "^3.12.5",
    "next": "^14.2.5",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-icons": "^5.2.1",
    "typescript": "^5.5.3"
  },
  "devDependencies": {
    "@slicemachine/adapter-next": "^0.3.64",
    "@tailwindcss/typography": "^0.5.13",
    "autoprefixer": "^10.4.19",
    "concurrently": "^8.2.2",
    "eslint-config-next": "^14.2.5",
    "postcss": "^8.4.39",
    "prettier": "^3.3.2",
    "prettier-plugin-tailwindcss": "^0.6.5",
    "slice-machine-ui": "^2.12.2",
    "tailwindcss": "^3.4.4"
  }
}
2

Hi @captainwalter11,

Welcome to the community :slight_smile:

The error you're encountering occurs because the repository.languages array is empty or undefined when trying to find the master locale in the migrateCreateDocuments method of @prismicio/client. Specifically, the code is failing at:

const masterLocale = repository.languages.find((lang) => lang.is_master)!.id;

This suggests that the script is not able to retrieve the expected repository information, particularly the languages array. Here are some steps to debug and resolve this issue:

1. Check Repository Access

Ensure that:

  • The repository name glisten-ai (or the one you are using) is correct.
  • Your API token (if needed) is correctly configured in your environment variables or prismic.config.js.

2. Verify API Response

Log the repository object to inspect the structure:

console.log('Repository object:', repository);

Place this above the line causing the error to check if languages is available and populated.

3. Handle Empty languages Array

Modify the set-up-content.ts script to include a fallback in case repository.languages is empty:

const masterLocale = repository.languages?.find((lang) => lang.is_master)?.id;

if (!masterLocale) {
    throw new Error('Master locale not found in repository.languages');
}

This ensures that the error is more descriptive if languages is missing or empty.

4. Check Prismic Repository Setup

Ensure your Prismic repository has at least one locale set up. To verify:

  1. Log into your Prismic dashboard.
  2. Navigate to Settings > Translations & Locales.
  3. Confirm that at least one locale is configured and marked as the master locale.

5. Update Dependencies

Ensure you're using compatible versions of the @prismicio packages. Run:

npm install @prismicio/client@latest

6. Debugging the Migration Script

If the issue persists, try running the migration script with debug logs:

DEBUG=* npm run set-up-content

This will provide detailed logs of what’s happening during the execution.

7. Verify Repository API Access

Check if the repository API is accessible:

  1. Retrieve your API endpoint (e.g., https://<your-repo>.cdn.prismic.io/api/v2).
  2. Use a tool like curl or Postman to confirm the API returns data. If it doesn't, the issue might be with your repository configuration or API token.

If none of this works, let me know what you tried and investigated and we'll take another look! :slight_smile: