JSX.IntrinsicElements error in notes.tsx

[twhite96]

I have forked your repo with your permission. I've modified a lot of it, deleting your posts, adding some of my own styles, etc.

I am having an issue with the notes.tsx file when running npx next build:

Type error: Property 'className' does not exist on type 'IntrinsicAttributes'.

The issue comes from these lines here:

https://github.com/healeycodes/healeycodes.com/blob/2238baf91ffb88ef353e721e5c061f7a3aef3cf8/pages/notes.tsx#L36-L40

I've tried to add a type in the notes.ts file like so:

const NOTES_DIRECTORY = path.join(process.cwd(), "notes")

export type Note = {
    id: number,
    content: string,
    className?: string
}

however I am still running into the error.

I've checked the React docs for React.createElement and the values you need to pass to it. I've scoured StackOverflow. And I've even tried to look through the markdown-to-jsx repo to see what I am missing.

Can you help out?

[healeycodes]

Hi @twhite96! Happy to take a look. Do you have a branch or repo that I can pull and test locally?

[twhite96]

Hi @twhite96! Happy to take a look. Do you have a branch or repo that I can pull and test locally?

Yep! I just need to push the changes. Created a new branch and will push here soon.

[healeycodes]

👍 a link to the branch on your fork would be perfect.

[twhite96]

👍 a link to the branch on your fork would be perfect.

Here ya go https://github.com/twhite96/fork.healeycodes.com/tree/migrate-to-me

[twhite96]

@healeycodes there is also a bug you may run into where the old Jekyll posts I've added have a weird syntax for tags instead of an array of strings so building will throw and error, something about

serializing '.allPostsData[0].tags' returned from 'getStaticProps' in "/". Reason: 'undefined' cannot be serialized as JSON. Please use 'null' or omit this value.

Just know I am aware of that.

[healeycodes]

@twhite96 thanks for the branch. I checked out your fork, ran npm i and npx next build but didn't run into this error: Type error: Property 'className' does not exist on type 'IntrinsicAttributes'. (I searched the build log). The Node.js version I tried this with is v18.11.0.

But I did run into some other errors – in case you haven't solved them yet, here are some ideas.

The code in this repo makes some assumptions about the content files.

• "notes" (or "shorts" in your fork) need to be named as a timestamp.
• posts need to have a title, description, and date set in their frontmatter (maybe tags too but I don't think so).
• images need to be moved to a directory that matches the post id/slug (more info in this note: https://healeycodes.com/notes#1676477346145)