CodeHike and Next.js 13

[kai687]

Hi 👋,

The docs don't include any specific info about Next.js 13 and the app router.
When I try to follow the instructions for CodeHike + Next.js and contentlayer,
I get an error:

error: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it.

Can I make this work?

[mrboen94]

You can make this work by placing "use client" at the top of the file you are using createContext in. I had the same problem, but the error message does indeed describe the solution.

"use client"
import React from "react";
// etc ...

[kai687]

Sorry, I don't understand where I should add use client.

I tried to follow the docs for Next.js and CodeHike, just with Next's app router instead. Since I didn't create any file with createContext in it, I don't know where to add 'use client'. That's why I didn't find this error message helpful and looked for more information here.

[mrboen94]

You usually need to use it if you have an onClick or similar in your component. For debugging you should be able to set it as far up the tree as possible, then move down through the files. It probably comes from one of the click events on the CH components.

Regardless this is probably a chat you'd want to take with the Next team or the NextJs discord: https://discord.com/invite/nextjs as it is not necessarily a problem with code-hike, but just a quirk of using NextJs.

For reference I have used it in this repo for a test project I did: https://github.com/mrboen94/Haiku/blob/5e91798816508a9cb393c0f7b7de706f1996c5f2/haiku/app/page.tsx#L1

However that project does not use code-hike, but it should still work by just settings "use client" in one of your parent files.