timlrx / contentlayer2

Contentlayer turns your content into data - making it super easy to import MD(X) and CMS content in your app
https://contentlayer.dev
MIT License
184 stars 11 forks source link

Issue on migrating from 0.4.6 to 0.5.x #47

Open kunatastic opened 1 day ago

kunatastic commented 1 day ago

Issue Summary:

I am encountering an error after migrating from contentlayer2 version 0.4.6 to 0.5.3.

Error Details:

TypeError: Cannot read properties of undefined (reading 'ReactCurrentDispatcher')
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/react@18.3.1/node_modules/react/cjs/react-jsx-runtime.development.js:328:51)
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/react@18.3.1/node_modules/react/cjs/react-jsx-runtime.development.js:1332:5)
    at (rsc)/./node_modules/.pnpm/react@18.3.1/node_modules/react/cjs/react-jsx-runtime.development.js ([...x]/.next/server/vendor-chunks/react@18.3.1.js:20:1)
    at __webpack_require__ ([...x]/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js:4:20)
    at (rsc)/./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js ([...x]/.next/server/vendor-chunks/react@18.3.1.js:50:1)
    at __webpack_require__ ([...x]/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/mdx-bundler@10.0.3_acorn@8.14.0_esbuild@0.24.0/node_modules/mdx-bundler/dist/client.js:9:44)
    at (rsc)/./node_modules/.pnpm/mdx-bundler@10.0.3_acorn@8.14.0_esbuild@0.24.0/node_modules/mdx-bundler/dist/client.js ([...x]/.next/server/vendor-chunks/mdx-bundler@10.0.3_acorn@8.14.0_esbuild@0.24.0.js:30:1)
    at __webpack_require__ ([...x]/.next/server/webpack-runtime.js:33:43) {
  type: 'TypeError',
  page: '/social/blog/how-to-book-train-tickets-for-your-pets'
}

Steps to Reproduce:

In Dev env

  1. Migrate from contentlayer2 version 0.4.6 to 0.5.3.
  2. Run the application.
  3. Visit the page contentlayer implemented route.
  4. Observe the error in the console/logs.

For Prod env

Build fails

Expected Behavior:

The application should run without any errors when visiting the specified page.

Actual Behavior:

Encountering a TypeError indicating an undefined property (ReactCurrentDispatcher).

Environment Details:

Node.js version: v20.18.0 Operating System: MacOS Sequoia 15.0.1 Package Manager: pnpm Next.js version: 15.0.2 React version: 18.3.1

package.json:

{
  "name": "xxx",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev -p 8000",
    "build": "next build",
    "start": "next start -p 8000",
    "lint": "next lint"
  },
  "dependencies": {
    "@react-google-maps/api": "^2.20.3",
    "@vercel/analytics": "^1.3.2",
    "agora-rtc-sdk-ng": "4.19.3",
    "contentlayer2": "^0.5.3",
    "cookies-next": "^4.3.0",
    "date-fns": "^4.1.0",
    "dayjs": "^1.11.13",
    "feed": "^4.2.2",
    "linkify-react": "^4.1.3",
    "linkifyjs": "^4.1.3",
    "mixpanel-browser": "2.55.1",
    "next": "15.0.2",
    "next-contentlayer2": "^0.5.3",
    "nprogress": "^0.2.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-hook-form": "^7.53.1",
    "react-icons": "^5.3.0",
    "react-lottie": "^1.2.4",
    "react-toastify": "^10.0.6",
    "reading-time": "^1.5.0",
    "rehype-slug": "^6.0.0",
    "remark-gfm": "^4.0.0",
    "sharp": "^0.33.5",
    "swiper": "^8.4.7"
  },
  "devDependencies": {
    "@tailwindcss/typography": "^0.5.15",
    "@types/cookie-parser": "^1.4.7",
    "@types/mixpanel-browser": "^2.50.2",
    "@types/node": "22.8.7",
    "@types/nprogress": "^0.2.3",
    "@types/react": "18.3.12",
    "@types/react-dom": "18.3.1",
    "@types/react-lottie": "^1.2.10",
    "@typescript-eslint/eslint-plugin": "8.12.2",
    "@typescript-eslint/parser": "8.12.2",
    "autoprefixer": "^10.4.20",
    "eslint": "9.14.0",
    "eslint-config-next": "15.0.2",
    "next-bundle-analyzer": "^0.6.8",
    "postcss": "^8.4.47",
    "readline": "^1.3.0",
    "tailwindcss": "^3.4.14",
    "typescript": "5.6.3"
  },
  "pnpm": {
    "overrides": {
      "@types/react": "18.3.12",
      "@types/react-dom": "18.3.1"
    }
  }
}

Additional Context:

  1. I am not sure if this is a compatibility issue between the new contentlayer2 version and React 18.3.1 or Next.js 15.0.2.
  2. The error does not appear with contentlayer2 version 0.4.6.

PS: Are there known compatibility issues between contentlayer2 version 0.5.3 and React 18?

timlrx commented 1 day ago

If you are using Next 15, you should use React 19rc, I think it's required if you are using the app directory.

I tried using the latest contentlayer with React 18 and Next 14 - no issues with it.