Missing Getting Started Documentation with Critical Notion Information

[airtonix]

Description

print-notion-page.ts

import { NotionAPI } from 'notion-client'

function getPage(id: string) {
  const notion = new NotionAPI()
  return notion.getPage(id)
}

async function printPage(id: string) {
  console.log('id: ', id)
  const recordMap = await getPage(id)
  console.log(typeof recordMap)
}

// take page id from argv and print it
printPage(process.argv[2])

1. copy above into print-notion-page.ts
2. sign up to notion, basic free account
3. change workspace to public
4. make a page
5. copy it's id
6. run below

> npx tsx ./print-notion-page.ts the-page-id

results in :

Error: Notion page not found "efdb8bdfe54c4f279588f765652c5978"
    at Object.getPage (🚧💋/node_modules/notion-client/build/index.js:1:641)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at printPage ((🚧💋/test.ts:13:21)

Notion Test Page ID

efdb8bdfe54c4f279588f765652c5978

> cat ./package.json

{
  "name": "nextjs-notion-starter-kit",
  "version": "2.0.0",
  "private": true,
  "description": "The perfect starter kit for building beautiful websites with Next.js and Notion.",
  "author": "Travis Fischer <travis@transitivebullsh.it>",
  "repository": "transitive-bullshit/nextjs-notion-starter-kit",
  "license": "MIT",
  "engines": {
    "node": ">=16"
  },
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "deploy": "vercel deploy",
    "deps": "run-s deps:*",
    "deps:update": "[ -z $GITHUB_ACTIONS ] && yarn add notion-client notion-types notion-utils react-notion-x || echo 'Skipping deps:update on CI'",
    "deps:link": "[ -z $GITHUB_ACTIONS ] && yarn link notion-client notion-types notion-utils react-notion-x || echo 'Skipping deps:link on CI'",
    "analyze": "cross-env ANALYZE=true next build",
    "analyze:server": "cross-env BUNDLE_ANALYZE=server next build",
    "analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build",
    "test": "run-p test:*",
    "test:lint": "eslint '**/*.{ts,tsx}'",
    "test:prettier": "prettier '**/*.{js,jsx,ts,tsx}' --check"
  },
  "dependencies": {
    "@fisch0920/use-dark-mode": "^2.4.0",
    "@keyvhq/core": "^1.6.9",
    "@keyvhq/redis": "^1.6.10",
    "@react-icons/all-files": "^4.1.0",
    "@vercel/og": "^0.0.19",
    "classnames": "^2.3.1",
    "date-fns": "^2.28.0",
    "expiry-map": "^2.0.0",
    "fathom-client": "^3.4.1",
    "got": "^12.0.3",
    "isomorphic-unfetch": "^3.1.0",
    "lqip-modern": "^1.2.0",
    "next": "^12.3.1",
    "notion-client": "6.16.0",
    "notion-types": "6.16.0",
    "notion-utils": "6.16.0",
    "p-map": "^5.3.0",
    "p-memoize": "^6.0.1",
    "posthog-js": "^1.20.2",
    "react": "^18.2.0",
    "react-body-classname": "^1.3.1",
    "react-dom": "^18.2.0",
    "react-notion-x": "6.16.0",
    "react-tweet-embed": "^2.0.0",
    "react-use": "^17.3.2",
    "rss": "^1.2.2",
    "ts-node": "^10.9.1",
    "tsx": "^3.12.6"
  },
  "devDependencies": {
    "@next/bundle-analyzer": "^12.3.1",
    "@trivago/prettier-plugin-sort-imports": "^3.3.1",
    "@types/node": "^18.8.5",
    "@types/react": "^18.0.21",
    "@typescript-eslint/eslint-plugin": "^5.40.0",
    "@typescript-eslint/parser": "^5.40.0",
    "cross-env": "^7.0.2",
    "eslint": "^8.25.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-react": "^7.31.10",
    "eslint-plugin-react-hooks": "^4.6.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.7.1",
    "typescript": "^4.8.4"
  },
  "overrides": {
    "cacheable-request": {
      "keyv": "npm:@keyvhq/core@~1.6.6"
    }
  }
}

[airtonix]

There's also this from notion settings page:

[airtonix]

example stackblitz:

https://stackblitz.com/edit/express-simple-ac4t1u?file=index.js

[airtonix]

ehh not sure whats going on but more investigation led me to believe that this project could do with some pretty basic getting started guide that makes no assumptions about knowledge of Notion.

I've never used it before so I just spent the last couple of hours wondering if this repo even works.

After pushing/pressing/sliding/toggling/deleting/creating/screaming at every setting/page/slider/button/toggle/error i could find I eventually discovered that:

> cd Projects
> mkdir notion-test
> git steal git@github.com:NotionX/react-notion-x.git examples/minimal master
💫 stealing git@github.com:NotionX/react-notion-x.git/examples/minimal from master into 💋 /nextjs-notion/
Cloning into '.'...
remote: Enumerating objects: 380, done.
remote: Counting objects: 100% (380/380), done.
remote: Compressing objects: 100% (295/295), done.
remote: Total 380 (delta 84), reused 274 (delta 72), pack-reused 0
Receiving objects: 100% (380/380), 669.34 KiB | 1.54 MiB/s, done.
Resolving deltas: 100% (84/84), done.
Already on 'master'
Your branch is up to date with 'origin/master'.
.
└── examples
    └── minimal
        ├── components
        │   └── NotionPage.tsx
        ├── lib
        │   ├── config.ts
        │   └── notion.ts
        ├── next.config.js
        ├── next-env.d.ts
        ├── package.json
        ├── pages
        │   ├── _app.tsx
        │   ├── _document.tsx
        │   ├── index.tsx
        │   └── [pageId].tsx
        ├── public
        │   ├── favicon.ico
        │   └── robots.txt
        ├── readme.md
        ├── styles
        │   └── globals.css
        ├── tsconfig.json
        └── yarn.lock

8 directories, 16 files
Done ✅

> cd minimal  

✋🏻 🛑 The Minimal Example has Errors

Some errors with the minimal example due to it assuming it runs within the main repo

• @next/bundle-analyzer isn't in the package.json, so delete from next.config.js all references to it.
• yarn dev now errors because yarn.lock refers to deps that are only installed in the context of the main repo. I'm only stealing a slice of the main repo.
• the yarn.lock is invalid now, so remove it and yarn again.
• yarn dev works now

> yarn dev
# site works with the example root page: 067dd719a912471ea9a3ac10710e7fdf

switch the root page id to my own.

> yarn dev

yarn run v1.22.19
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 256 ms (179 modules)
wait  - compiling /_error (client and server)...
event - compiled client and server successfully in 72 ms (180 modules)
warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works
wait  - compiling / (client and server)...
event - compiled client and server successfully in 65 ms (230 modules)
error - Error: Notion page not found "💋"
    at E.getPage (file:///home/zenobius/Projects/Mine/Github/nextjs-notion/minimal/node_modules/notion-client/build/index.js:1:641)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async getStaticProps (webpack-internal:///./pages/index.tsx:22:23)
    at async Object.renderToHTML (/home/zenobius/Projects/Mine/Github/nextjs-notion/minimal/node_modules/next/dist/server/render.js:386:20)
    at async doRender (/home/zenobius/Projects/Mine/Github/nextjs-notion/minimal/node_modules/next/dist/server/base-server.js:687:38)
    at async cacheEntry.responseCache.get.isManualRevalidate.isManualRevalidate (/home/zenobius/Projects/Mine/Github/nextjs-notion/minimal/node_modules/next/dist/server/base-server.js:796:28)
    at async /home/zenobius/Projects/Mine/Github/nextjs-notion/minimal/node_modules/next/dist/server/response-cache/index.js:80:36 {
  page: '/'
}

here is where I stumbled upon:

🤔

./toggle

> yarn dev

yarn run v1.22.19
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 257 ms (179 modules)
wait  - compiling / (client and server)...
event - compiled client and server successfully in 105 ms (229 modules)
Hi there, 💋 {
  block: {
    '💋-8d0d-5e398197e645': { role: 'reader', value: [Object] },
    '💋-bd17-d6334e62a5a9': { role: 'reader', value: [Object] },
    '💋-badf-4a95625088fe': { role: 'reader', value: [Object] },
    '💋-9d8c-acc40648401e': { role: 'reader', value: [Object] },
    '💋-bb01-d647c27d85e8': { role: 'reader', value: [Object] },
    '💋-bf3f-fc1b44895b3c': { role: 'reader', value: [Object] },
    '💋-a907-bd2c886edef4': { role: 'reader', value: [Object] },
    '💋-8e13-e72466ef0c89': { role: 'reader', value: [Object] },
    '💋-a634-66976ec7b492': { role: 'reader', value: [Object] },
    '💋-bba5-fe4fa96af942': { role: 'reader', value: [Object] },
    '💋-866c-9784cf57fc97': { role: 'reader', value: [Object] },
    '💋-a226-d938877c54d9': { role: 'reader', value: [Object] },
    '💋-991b-02994bc9456a': { role: 'reader', value: [Object] },
    '💋-9416-5a064a335a81': { role: 'reader', value: [Object] },
    '💋-8742-2fe5a5b3f0c8': { role: 'reader', value: [Object] },
    '💋-a599-d006c7d4dde9': { role: 'reader', value: [Object] },
    '💋-8fe3-7c049b70b24c': { role: 'reader', value: [Object] },
    '💋-9881-074096f47b63': { role: 'reader', value: [Object] },
    '💋-9500-ed9573159c5d': { role: 'reader', value: [Object] },
    '💋-b9e9-812007b734bb': { role: 'reader', value: [Object] }
  },
  team: {},
  space: {},
  collection: {},
  collection_view: {},
  notion_user: {},
  collection_query: {},
  signed_urls: {}
}

This is pretty critical information missing from this repo IMO.

[airtonix]

btw raised the example errors here #475