Support NextJS 14

[nebrelbug]

npm ERR! code ERESOLVE
--
14:57:32.907 | npm ERR! ERESOLVE could not resolve
14:57:32.908 | npm ERR!
14:57:32.908 | npm ERR! While resolving: next-contentlayer@0.3.4
14:57:32.908 | npm ERR! Found: next@14.0.0
14:57:32.908 | npm ERR! node_modules/next
14:57:32.908 | npm ERR!   next@"^14.0.0" from the root project
14:57:32.908 | npm ERR!
14:57:32.908 | npm ERR! Could not resolve dependency:
14:57:32.908 | npm ERR! peer next@"^12 \|\| ^13" from next-contentlayer@0.3.4
14:57:32.908 | npm ERR! node_modules/next-contentlayer
14:57:32.909 | npm ERR!   next-contentlayer@"^0.3.4" from the root project
14:57:32.909 | npm ERR!
14:57:32.909 | npm ERR! Conflicting peer dependency: next@13.5.6
14:57:32.909 | npm ERR! node_modules/next
14:57:32.909 | npm ERR!   peer next@"^12 \|\| ^13" from next-contentlayer@0.3.4
14:57:32.909 | npm ERR!   node_modules/next-contentlayer
14:57:32.909 | npm ERR!     next-contentlayer@"^0.3.4" from the root project

[Shubhdeep12]

cc @schickling

[marcofranssen]

For me it only fails when running with next dev --turbo.

[nebrelbug]

@marcofranssen it runs fine for me too, but when I run npm i from scratch, it'll cause a Vercel build to fail (see #576)

[Fionn96]

For me it only fails when running with next dev --turbo.

Me too hope fix it.

[weichunnn]

Same error as @nebrelbug faced, I 'resolved' in the short term by:

• using npm install --force; OR
• downgrading to next.js 13

[mohsentaleb]

Until people get this fixed you can add --legacy-peer-deps to your npm i and proceed with your installation.

npm install contentlayer next-contentlayer date-fns --legacy-peer-deps

[januarionclx]

I believe that not only support should be added but errors should be replaced for warnings to avoid builds failing.

Like, in this specific case, if it wasn't throwing but showing a warning instead, we wouldn't be having this issue.

Support would be requested, yes, but wouldn't be critical as it is of now 🥲

[marcofranssen]

I believe that not only support should be added but errors should be replaced for warnings to avoid builds failing.

Like, in this specific case, if it wasn't throwing but showing a warning instead, we wouldn't be having this issue.

Support would be requested, yes, but wouldn't be critical as it is of now 🥲

This is the NPM ecosystem throwing the errors. Nothing this project can do about that.

[januarionclx]

I believe that not only support should be added but errors should be replaced for warnings to avoid builds failing. Like, in this specific case, if it wasn't throwing but showing a warning instead, we wouldn't be having this issue. Support would be requested, yes, but wouldn't be critical as it is of now 🥲

This is the NPM ecosystem throwing the errors. Nothing this project can do about that.

Is there a way to prevent this? I find this somewhat dangerous, it literally blocks the production builds (in this case, for no reason, basically above my own will).

[tunedsphere]

Any news related to this issue? Has it been fixed yet ?

[XahidEx]

Unexpected scalar at node end at line 4, column 201: (like this). This error occurs when I'm adding a new mdx. Even if It's simple as this:

---
title: 'test'
publishedAt: '2023-12-12'
summary: 'test'
---

Test

Only facing this issue when I'm using the latest contentlayer. (I'm using nextjs14)

[gitgudchannel]

+1 for nextjs14 support. It works fine so it shouldn't be hard to clean up the dependency requirements of the package.

[swe]

Just use the "next": "latest", at your package.json file, and it will be updated

[tunedsphere]

For the ones looking for a fix!

I was using npm and merge to pnpm! it did the trick for me!

[Gerald-ux-ux]

Yeah definitely downgrade to next 13 or 13.5.6

[agonist]

No issues seems to be addressed and PR merged, is the project dying and we should consider other options?

[willmruzek]

Looks like 3 options until this issue is addressed:

• npm install --force
• npm install contentlayer next-contentlayer date-fns --legacy-peer-deps

• Downgrade to Next 13

Ran into the below with both Next 13 and 14. If you install esbuild@0.18.x and markdown-wasm@1.x, the warning/error goes away.

<w> [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Parsing of /Users/mruzekw/Code/willmruzekdotcom/node_modules/@contentlayer/core/dist/dynamic-build.js for build dependencies failed at 'import(`file://${compiledConfigPath}`)'.
<w> Build dependencies behind this expression are ignored and might cause incorrect cache invalidation.
<w> [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Parsing of /Users/mruzekw/Code/willmruzekdotcom/node_modules/@contentlayer/core/dist/getConfig/index.js for build dependencies failed at 'import(`file://${modulePath}?x=${Date.now()}`)'.
<w> Build dependencies behind this expression are ignored and might cause incorrect cache invalidation.
<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: Can't resolve 'markdown-wasm/dist/markdown.node.js' in '/Users/mruzekw/Code/willmruzekdotcom/node_modules/@contentlayer/core/dist/markdown'
<w> while resolving 'markdown-wasm/dist/markdown.node.js' in /Users/mruzekw/Code/willmruzekdotcom/node_modules/@contentlayer/core/dist/markdown as file
<w>  at resolve esm file markdown-wasm/dist/markdown.node.js
<w>  at file dependencies /Users/mruzekw/Code/willmruzekdotcom/node_modules/@contentlayer/core/dist/markdown/markdown.js
<w>  at file /Users/mruzekw/Code/willmruzekdotcom/node_modules/@contentlayer/core/dist/markdown/markdown.js
<w>  at resolve esm file ./markdown/markdown.js
<w>  at file dependencies /Users/mruzekw/Code/willmruzekdotcom/node_modules/@contentlayer/core/dist/index.js
<w>  at file /Users/mruzekw/Code/willmruzekdotcom/node_modules/@contentlayer/core/dist/index.js
<w>  at resolve esm file @contentlayer/core
<w>  at file dependencies /Users/mruzekw/Code/willmruzekdotcom/node_modules/next-contentlayer/dist/plugin.js
<w>  at file /Users/mruzekw/Code/willmruzekdotcom/node_modules/next-contentlayer/dist/plugin.js
<w>  at resolve esm file ./plugin.js
<w>  at file dependencies /Users/mruzekw/Code/willmruzekdotcom/node_modules/next-contentlayer/dist/index.js
<w>  at file /Users/mruzekw/Code/willmruzekdotcom/node_modules/next-contentlayer/dist/index.js
<w>  at resolve esm file next-contentlayer
<w>  at file dependencies /Users/mruzekw/Code/willmruzekdotcom/next.config.mjs
<w>  at file /Users/mruzekw/Code/willmruzekdotcom/next.config.mjs
<w>  at resolve commonjs /Users/mruzekw/Code/willmruzekdotcom/next.config.mjs

[emmalexandria]

Looks like 3 options until this issue is addressed:

@piotrszubert pointed out this solution in another thread on this issue, which is to put this in your package.json:

"overrides": {
    "next-contentlayer": {
      "next": "$next"
    }
  },

Personally, I think it's the cleanest solution.

[alamenai]

Until people get this fixed you can add --legacy-peer-deps to your npm i and proceed with your installation.

npm install contentlayer next-contentlayer date-fns --legacy-peer-deps

Is it recommended for production?

[emmalexandria]

Is it recommended for production?

All of these fixes are somewhat janky. They bypass the error without resolving the underlying issue. If stability in your production environment is really critical it seems best to downgrade your Next version instead.

Otherwise, I think --force is better, as:

• --legacy-peer-deps ignores all peer dependencies entirely and just installs the package.
• --force makes changes to dependency versions if there's a conflict.

(I'm no expert on NPM)

[nicolasgomeztoua]

any news on this? if the code is open source we can just PR the change

[marcofranssen]

any news on this? if the code is open source we can just PR the change

Yeah, but even current open PRs are not handled. And who is going to cut releases so people can get a new version? :(

Or they are closed by a bot https://github.com/contentlayerdev/contentlayer/pull/556

[nicolasgomeztoua]

https://www.codemotion.com/magazine/frontend/how-to-create-an-mdx-blog-in-typescript-with-next-js/

Here bro come follow this guide and just build your own components

[elie222]

This is how I migrated from ContentLayer to Next MDX: elie222/inbox-zero@cf42b0b (#79)

Was tired of wrestling with this library :(

[phukon]

Unexpected scalar at node end at line 4, column 201: (like this). This error occurs when I'm adding a new mdx. Even if It's simple as this:

---
title: 'test'
publishedAt: '2023-12-12'
summary: 'test'
---

Test

Only facing this issue when I'm using the latest contentlayer. (I'm using nextjs14)

@XahidEx just change the line endings for your mdx file from CRLF to LF. It's an old issue for contentlayer, cuz Windows uses CRLF endings.

[AnweshGangula]

Contentlayer is probably not being maintained anymore as per this issue: #429

[temrb]

yea i cant move on using contentlayer anymore even though it was an excellent solution!

for anyone that is looking for other alternatives: I'm now using mintlify free plan. for my usecase of just having blog posts setting this up was super simple! it also comes with lots of helpful components as well

[cpatti97100]

Looks like 3 options until this issue is addressed:

@piotrszubert pointed out this solution in another thread on this issue, which is to put this in your package.json:

"overrides": {
    "next-contentlayer": {
      "next": "$next"
    }
  },

Personally, I think it's the cleanest solution.

is there something I should pay particular attention to when using this solution?

[emmalexandria]

Looks like 3 options until this issue is addressed:

@piotrszubert pointed out this solution in another thread on this issue, which is to put this in your package.json:

"overrides": {
    "next-contentlayer": {
      "next": "$next"
    }
  },

Personally, I think it's the cleanest solution.

is there something I should pay particular attention to when using this solution?

What it's doing is pretty simple. It's basically overriding Contentlayer's desired version of Next to whatever you have installed. The main thing to be aware of is that this only works because Contentlayer doesn't actually have any compatibility issues with NextJS 14. However, in the future it may indeed actually break and this fix won't do anything.

[nickzelei]

This is becoming more critical due to a recent CVE CVE-2024-34351

[aimahusnain]

Locally, we can use the -force option to run it, but what should we do during deployment?

[nicolasgomeztoua]

Locally, we can use the -force option to run it, but what should we do during deployment?

You can edit your package installation command on Vercel.

And if you are deploying somewhere else you always have control over than anyways, but seriously as I've said above, why bother putting a deprecated package in your project. Especially with other options

[nebrelbug]

I highly recommend switching over to https://github.com/sdorra/content-collections. I was able to switch over quite easily and Zod schemas are super nice. Feature parity seems completely on par with Contentlayer.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[aimahusnain]

I highly recommend switching over to https://github.com/sdorra/content-collections. I was able to switch over quite easily and Zod schemas are super nice. Feature parity seems completely on par with Contentlayer.

Hi, can we use content collections in next.js latest versions?