Thank you! - Githubissues

natikgadzhi commented 1 month ago

Seriously, @timlrx, thank you for putting in the work. ❤️‍🩹

I'm very novice in Javascript / Typescript and used Contentlayer in my blog, and footgunned myself before with gfm 4 incompatibility. Thought I'd drop a note in the blog and was very happy to see this fork. Made my week! 👏

That's it. Nothing to solve here.

Virous77 commented 1 month ago

is this package is fully compatible with Next-15 and React-19?

Right now I'm still using main package and working well with latest React and Next versions but when upgrading with Next-15 and React-19 im facing below issue.

https://github.com/contentlayerdev/contentlayer/issues/660

natikgadzhi commented 1 month ago

@Virous77 I haven't tested Next 15 and React 19 tbh, but it works fine with every other dependency on the latest available stable version (Next 14.2.5, React 18.3.1 AFAIK): https://github.com/natikgadzhi/respawn-io/pull/4/files#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519

Virous77 commented 1 month ago

@natikgadzhi will check it.

ceddybi commented 4 weeks ago

@Virous77 nope it's not working

i keep getting

Error: Cannot read properties of undefined (reading 'A')

timlrx commented 3 weeks ago

@Virous77 @ceddybi it works on the latest next 15 and react 19. See example stackblitz repo here: https://stackblitz.com/edit/github-ekmxur-ba82kk?file=package.json

If you encounter further problems, please open a new issue with a reproducible example. Thanks.

Virous77 commented 3 weeks ago

@timlrx I see with latest version everything working fine there is no issue and also it was smooth transition from old contentlayer to this one. Thank you for all this.

But with latest RC of Next, React I'm still getting below issue showing in image.

Image 18-08-24 at 11 02 AM

I used same version of Next and React which was used on stackblitz. Im attaching my package.json below so you can get more info.

{
  "name": "frontend",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "prettier": "npx prettier --write .",
    "dr:build": "npx declarative-routing build",
    "dr:build:watch": "npx declarative-routing build --watch"
  },
  "dependencies": {
    "@radix-ui/react-accordion": "^1.1.2",
    "@radix-ui/react-avatar": "^1.0.4",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-tabs": "^1.1.0",
    "@radix-ui/react-tooltip": "^1.0.7",
    "@react-email/components": "^0.0.21",
    "@stackblitz/sdk": "^1.11.0",
    "@tailwindcss/typography": "^0.5.14",
    "@tanstack/react-query": "^5.51.23",
    "@vercel/analytics": "^1.3.1",
    "@vercel/kv": "^2.0.0",
    "@vercel/speed-insights": "^1.0.12",
    "add": "^2.0.6",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "cmdk": "^1.0.0",
    "contentlayer2": "^0.5.0",
    "framer-motion": "^11.3.28",
    "html-react-parser": "^5.1.12",
    "lucide-react": "^0.428.0",
    "markdown-to-jsx": "^7.4.7",
    "marked": "^14.0.0",
    "mongoose": "^8.5.3",
    "next": "15.0.0-rc.0",
    "next-contentlayer2": "^0.5.0",
    "next-themes": "^0.3.0",
    "open-graph-scraper": "^6.8.0",
    "query-string": "^9.1.0",
    "react": "19.0.0-rc-19bd26be-20240815",
    "react-dom": "19.0.0-rc-19bd26be-20240815",
    "react-syntax-highlighter": "^15.5.0",
    "react-textarea-autosize": "^8.5.3",
    "resend": "^4.0.0",
    "sanitize-html": "^2.13.0",
    "sharp": "^0.33.5",
    "shikiji": "^0.10.2",
    "tailwind-merge": "^2.5.2",
    "tailwindcss-animate": "^1.0.7",
    "turndown": "^7.2.0",
    "vaul": "^0.9.1",
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "@types/node": "^22.4.0",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@types/react-syntax-highlighter": "^15.5.13",
    "@types/sanitize-html": "^2.11.0",
    "@types/turndown": "^5.0.5",
    "autoprefixer": "^10.4.20",
    "eslint": "9.9.0",
    "eslint-config-next": "^14.2.5",
    "eslint-plugin-react": "^7.35.0",
    "postcss": "^8.4.41",
    "prettier": "^3.3.3",
    "prettier-plugin-tailwindcss": "^0.6.6",
    "reading-time": "^1.5.0",
    "rehype": "^13.0.1",
    "rehype-autolink-headings": "^7.1.0",
    "rehype-pretty-code": "^0.13.2",
    "rehype-slug": "^6.0.0",
    "remark-gfm": "4.0.0",
    "tailwindcss": "^3.4.10",
    "typescript": "^5.5.4",
    "unist-util-visit": "^5.0.0"
  }
}

As in project I'm using so many other packages which need .env to work so i don't know how i can create stackblitz for that.

ceddybi commented 3 weeks ago

@timlrx it turned out to work, i did some tweaks

@Virous77 i had the same issue, but it looks like you're either:

not running next with turbo, you must pass --turbo when running the application, you might face some issues when running with turbo like contentlayer will not autocomplile, so you'll have to run next without turbo to compile, then re-run with turbo again.
you're adding the "use client" in the place where you define the mdxComponents, please move the "use client" in the individual components, not where you define the components object

Virous77 commented 3 weeks ago

@ceddybi Ok so im using PNPM and still webpack no Turbo and have to check.

But with second point MDX component is server component but yes it contains clients components. You can see it here. https://github.com/Virous77/Reetesh/blob/main/frontend/components/blog/signle-blog/mdx.tsx

ceddybi commented 3 weeks ago

https://github.com/Virous77/Reetesh/blob/main/frontend/components/blog/signle-blog/mdx.tsx @ceddybi Ok so im using PNPM and still webpack no Turbo and have to check.

But with second point MDX component is server component but yes it contains clients components. You can see it here. https://github.com/Virous77/Reetesh/blob/main/frontend/components/blog/signle-blog/mdx.tsx

@Virous77 i think you can just install turbo, then add the "dev": next dev --turbo

Virous77 commented 3 weeks ago

@ceddybi GG man it works. ✨

We just have to add "dev": "next dev --turbo" --turbo in dev script. For build I didn't get any issue it successfully able to build and i checked start command so apps working well as expected.

@timlrx The only issue is there with --turbo is that even with next.config.ts configure with contentlayer it not live reload when we change content in our mdx files. Also when we start dev server it not generate so if user delete .contentlayer files they will get error.

The fix was is build manually before contentlayer2 build command or just run first without --turbo flag and the start with --turbo.

timlrx / contentlayer2

Thank you! #36