Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error when building with contentlayer 0.3.4 and Next.js 13 App Router #506

Open
schneedotdev opened this issue Jul 7, 2023 · 84 comments · Fixed by timlrx/contentlayer2#1
Milestone

Comments

@schneedotdev
Copy link

When I run pnpm contentlayer build, I run into an error within node_modules and cannot resolve it.

Versions

"contentlayer": "^0.3.4",
"next": "13.4.9",

Error Message

import { ConsoleSpanExporter, SimpleSpanProcessor } from "@opentelemetry/sdk-trace-base";
         ^^^^^^^^^^^^^^^^^^^
SyntaxError: Named export 'ConsoleSpanExporter' not found. The requested module '@opentelemetry/sdk-trace-base' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@opentelemetry/sdk-trace-base';
const { ConsoleSpanExporter, SimpleSpanProcessor } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:189:5)
@schneedotdev
Copy link
Author

Downgrading to version ^0.3.1 seemed to work. I'm able to run pnpm contentlayer build but the newest version (0.3.4) of contentlayer does not work for me.

@schneedotdev schneedotdev changed the title Error in node_modules when working with Next.js 13 App Router Error with contentlayer 0.3.4 when working with Next.js 13 App Router Jul 7, 2023
@schneedotdev schneedotdev changed the title Error with contentlayer 0.3.4 when working with Next.js 13 App Router Error when building with contentlayer 0.3.4 and Next.js 13 App Router Jul 7, 2023
@savelichalex
Copy link

Same issue, can confirm it

@jorgemasta
Copy link

It's not related to the app router but yes, I'm getting the same error.

@fuma-nama
Copy link

I guess that is because both Next.js and Contentlayer use open telemetry as a dependency.
Dependency conflict is likely the cause of the problem.

@fuma-nama
Copy link

Confirmed.
I fixed it by overriding dependency versions (using pnpm).

{
    "name": "app",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint"
    },
    "pnpm": {
        "overrides": {
            "@opentelemetry/api": "1.4.1",
            "@opentelemetry/core": "1.13.0",
            "@opentelemetry/exporter-trace-otlp-grpc": "0.39.1",
            "@opentelemetry/resources": "1.13.0",
            "@opentelemetry/sdk-trace-base": "1.13.0",
            "@opentelemetry/sdk-trace-node": "1.13.0",
            "@opentelemetry/semantic-conventions": "1.13.0"
        }
    },
    "dependencies": {
        "contentlayer": "^0.3.3",
        "next": "13.4.8",
        "next-contentlayer": "^0.3.3"
    }
}

@xkrsz
Copy link

xkrsz commented Jul 7, 2023

@brianschnee it is not related to the App router, but rather to ESM; don't know what contentlayer has changed but the package stopped building properly when using .mjs/ESM. Using 0.3.1 works for me as well.

@ParkerRex
Copy link

that pnpm override -- what a great discovery. Wish I looked 3 hours ago haha.

@mauriciomutte
Copy link

The same for me... using 0.3.2 works as well but upgrading to 0.3.4 shows the error mentioned

@dgknca
Copy link

dgknca commented Jul 8, 2023

same error

@emptypockets-dev
Copy link

is there a combo of versions for

  • contentlayer
  • next-contentlayer

that will work temporarily?

@schneedotdev
Copy link
Author

schneedotdev commented Jul 8, 2023

@emptypockets-dev I'm using contentlayer: 0.3.1 and next-contentlayer: 0.3.1 for the time being. @mauriciomutte mentioned that 0.3.2 works for them as well.

@abdul-hamid-achik
Copy link

Confirmed. I fixed it by overriding dependency versions (using pnpm).

{
    "name": "app",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint"
    },
    "pnpm": {
        "overrides": {
            "@opentelemetry/api": "1.4.1",
            "@opentelemetry/core": "1.13.0",
            "@opentelemetry/exporter-trace-otlp-grpc": "0.39.1",
            "@opentelemetry/resources": "1.13.0",
            "@opentelemetry/sdk-trace-base": "1.13.0",
            "@opentelemetry/sdk-trace-node": "1.13.0",
            "@opentelemetry/semantic-conventions": "1.13.0"
        }
    },
    "dependencies": {
        "contentlayer": "^0.3.3",
        "next": "13.4.8",
        "next-contentlayer": "^0.3.3"
    }
}

ah mah dude, big props to you, this worked wonderfully

@haxmart
Copy link

haxmart commented Jul 9, 2023

Confirmed. I fixed it by overriding dependency versions (using pnpm).

{
    "name": "app",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint"
    },
    "pnpm": {
        "overrides": {
            "@opentelemetry/api": "1.4.1",
            "@opentelemetry/core": "1.13.0",
            "@opentelemetry/exporter-trace-otlp-grpc": "0.39.1",
            "@opentelemetry/resources": "1.13.0",
            "@opentelemetry/sdk-trace-base": "1.13.0",
            "@opentelemetry/sdk-trace-node": "1.13.0",
            "@opentelemetry/semantic-conventions": "1.13.0"
        }
    },
    "dependencies": {
        "contentlayer": "^0.3.3",
        "next": "13.4.8",
        "next-contentlayer": "^0.3.3"
    }
}

Amazing - thanks!

Unfortunately errors are still thrown if you have any mdxComponents in your mdx file, such as next/image. Here's what i'm facing currently:

error Error: Cannot access .propTypes on the server. You cannot dot into a client module from a server component. You can only pass the imported name through. at stringify (<anonymous>)

@fuma-nama
Copy link

fuma-nama commented Jul 9, 2023

That’s likely a bug caused by Contentlayer itself.
It doesn’t work well for App Router, try (props) => <Image {...props} />.

You can open another issue instead.

@seththeskier
Copy link

I'm seeing this same error after running a plain ol' npm run dev, and I don't use pnpm. Do I need to install/use pnpm to get around this?

@Saadchr
Copy link

Saadchr commented Jul 10, 2023

I'm facing the same issue

@fuma-nama
Copy link

@seththeskier

I'm seeing this same error after running a plain ol' npm run dev, and I don't use pnpm. Do I need to install/use pnpm to get around this?

npm also supports overrides , my solution should be working for npm too.

rjmccluskey added a commit to rjmccluskey/richmccluskey.dev that referenced this issue Jul 12, 2023
@jorgemasta
Copy link

This is the equivalent version for yarn:

    "resolutions": {
        "@opentelemetry/api": "1.4.1",
        "@opentelemetry/core": "1.13.0",
        "@opentelemetry/exporter-trace-otlp-grpc": "0.39.1",
        "@opentelemetry/resources": "1.13.0",
        "@opentelemetry/sdk-trace-base": "1.13.0",
        "@opentelemetry/sdk-trace-node": "1.13.0",
        "@opentelemetry/semantic-conventions": "1.13.0"
    }

Remember to run yarn install --force.

@vinayr
Copy link

vinayr commented Aug 1, 2023

For the next/image error, the workaround suggested here fixed it for me.

import NextImage, { ImageProps } from "next/image"
import { useMDXComponent } from 'next-contentlayer/hooks';

const components = {
  // Image,
  Image: (props: ImageProps) => <NextImage {...props} />,
}

interface MdxProps {
  code: string
}

export function Mdx({ code }: MdxProps) {
  const Component = useMDXComponent(code)

  return <Component components={components} />
}

@thedevdavid
Copy link
Contributor

Not to rush anybody but there's a bunch of people in the issues, discussions, and PRs who would be happy to help. Is there any chance the Maintainers can take a look at/accept some of the help?

@elie222
Copy link

elie222 commented Aug 3, 2023

Started seeing a lot of these errors today:

- error TypeError: Cannot read properties of undefined (reading 'headers')
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/next@13.4.12_@opentelemetry+api@1.4.1_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/future/route-modules/app-route/module.js:265:61)

The fix above had originally worked for me. Not sure if this new error is related to this package.

@fuma-nama
Copy link

fuma-nama commented Aug 4, 2023

Started seeing a lot of these errors today:

- error TypeError: Cannot read properties of undefined (reading 'headers')
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/next@13.4.12_@opentelemetry+api@1.4.1_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/future/route-modules/app-route/module.js:265:61)

The fix above had originally worked for me. Not sure if this new error is related to this package.

It is a Next.js issue that lasted for a while, see vercel/next.js#51130

@jdharms
Copy link

jdharms commented Aug 4, 2023

For the next/image error, the workaround suggested here fixed it for me.

import NextImage, { ImageProps } from "next/image"
import { useMDXComponent } from 'next-contentlayer/hooks';

const components = {
  // Image,
  Image: (props: ImageProps) => <NextImage {...props} />,
}

interface MdxProps {
  code: string
}

export function Mdx({ code }: MdxProps) {
  const Component = useMDXComponent(code)

  return <Component components={components} />

Been researching this for an hour or so (maybe I'm bad at Googling), this is the first workaround I've found that's worked for me.

@GFGarcia
Copy link

GFGarcia commented Aug 6, 2023

After a whole month, i'm still having the same problem:

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

My package.json:
{
"name": "blog-nextjs",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"typecheck": "tsc --project tsconfig.json --noEmit",
"lint": "eslint src --max-warnings=0",
"test": "jest",
"test:watch": "npm test --watch",
"test:coverage": "npm test --coverage --detectOpenHandles",
"test:coverage:text": "npm test --coverageReporters='text-summary'"
},
"npm": {
"overrides": {
"@opentelemetry/api": "1.4.1",
"@opentelemetry/core": "1.13.0",
"@opentelemetry/exporter-trace-otlp-grpc": "0.39.1",
"@opentelemetry/resources": "1.13.0",
"@opentelemetry/sdk-trace-base": "1.13.0",
"@opentelemetry/sdk-trace-node": "1.13.0",
"@opentelemetry/semantic-conventions": "1.13.0"
}
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*": [
"npm run lint --fix",
"npm test --findRelatedTests --bail --passWithNoTests"
]
},
"dependencies": {
"@contentlayer/core": "^0.3.4",
"@openlab/vercel-netlify-cms-github": "^1.1.1",
"@phosphor-icons/react": "^2.0.9",
"@types/node": "20.3.2",
"@types/react": "18.2.13",
"@types/react-dom": "18.2.5",
"autoprefixer": "10.4.14",
"contentlayer": "^0.3.4",
"eslint-config-next": "13.4.7",
"next": "13.4.12",
"next-compose-plugins": "^2.2.1",
"next-contentlayer": "^0.3.4",
"next-pwa": "^5.6.0",
"postcss": "8.4.24",
"react": "18.2.0",
"react-dom": "18.2.0",
"reading-time": "^1.5.0",
"rehype-autolink-headings": "^6.1.1",
"rehype-pretty-code": "^0.9.11",
"rehype-slug": "^5.1.0",
"remark-gfm": "^3.0.1",
"shiki": "^0.14.3",
"tailwindcss": "3.3.2",
"typescript": "5.0.4"
},
"devDependencies": {
"@swc/core": "^1.3.66",
"@swc/jest": "^0.2.26",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^14.0.0",
"@types/jest": "^29.5.1",
"@types/mdx": "^2.0.5",
"@types/next-pwa": "^5.6.4",
"@types/testing-library__jest-dom": "^5.14.6",
"@typescript-eslint/eslint-plugin": "^5.60.1",
"@typescript-eslint/parser": "^5.60.0",
"eslint": "8.43.0",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-import-helpers": "^1.3.1",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"husky": "^8.0.3",
"jest": "^29.5.0",
"jest-environment-jsdom": "^29.5.0",
"lint-staged": "^13.2.2",
"prettier": "^2.8.8",
"prettier-plugin-tailwindcss": "^0.3.0",
"tailwind-styled-components": "^2.2.0"
}
}

I use npm. Does anyone have a clue on what to do? I've already played with contentlayer and next versions but nothing worked.

@emkis
Copy link

emkis commented Aug 26, 2023

I've just tested locally with next version 13.4.19 and I don't have this problem anymore. Hopefully it's solved now 🙏

@thedevdavid
Copy link
Contributor

I've just tested locally with next version 13.4.19 and I don't have this problem anymore. Hopefully it's solved now 🙏

Not on my side. The only way to make it build for me is still:

  • keeping next & eslint-config-next at 13.4.9
  • contentlayer & next-contentlayer at 0.3.4
  • modify the build script "build": "contentlayer build && next build"
  • and add ovrrides to package.json:
"pnpm": {
    "overrides": {
      "@opentelemetry/api": "1.4.1",
      "@opentelemetry/core": "^1.15.1",
      "@opentelemetry/exporter-trace-otlp-grpc": "^0.41.1",
      "@opentelemetry/resources": "^1.15.1",
      "@opentelemetry/sdk-trace-base": "^1.15.1",
      "@opentelemetry/sdk-trace-node": "^1.15.1",
      "@opentelemetry/semantic-conventions": "^1.15.1"
    }
  }

@matthewspear
Copy link

I've found this issue so hard to replicate, for example with @thedevdavid's configuration above, first time I build and push to Vercel it works 🎉, I then squash some commits (force push 🙈 to tidy up this mess) and now I'm getting ❌ build errors...

TypeError: Cannot read properties of undefined (reading 'default')
--
18:55:34.588 | at getMDXComponent (file:///vercel/path0/node_modules/.pnpm/next-contentlayer@0.3.4_contentlayer@0.3.4_esbuild@0.18.10_next@13.4.9_react-dom@18.2.0_react@18.2.0/node_modules/next-contentlayer/dist/hooks/useMDXComponent.js:10:39)
... etc ...

Always builds and works locally, only when deploying to Vercel I get issues...

Seems like something to do with cached files / .contentlayer directory / the pinned dependencies versions but I'm struggling to replicate!

Am I missing anything? Anyone else in this situation?

@shinchima
Copy link

I've just tested locally with next version 13.4.19 and I don't have this problem anymore. Hopefully it's solved now 🙏

hey, cool, with which version of contentlayer?
Cheers

@fuma-nama
Copy link

The latest version, 0.3.4 works for me

@shinchima
Copy link

with which versions of next / next-contentlayer?

@fuma-nama
Copy link

Exactly the latest versions of both of them, next 13.4.19 and contentlayer 0.3.4. Not sure it's working for everyone, but at least I got it working in CodeSandbox

@kriscard
Copy link

kriscard commented Sep 7, 2023

I tried switching from npm to pnpm in my personal project, but I'm still encountering the next/image error even with the latest Contentlayer and NextJS 13 versions. However, it's still working fine when I use npm.

I'm hoping that this issue will be fixed soon 🙏

@elie222
Copy link

elie222 commented Oct 15, 2023

Still facing this same issue with Turbo, pnpm, and Next.js 13.5.4. Been months

@danisaza
Copy link

I encountered this issue after upgrading next from 13.4.16 to 13.5.6.

Checking out the commit before the upgrade resolves the issue.

(I recognize that this isn't a rigorous set of steps to repro, etc - but hopefully this is helpful to anyone reading along)


For now my game plan is to pin next at 13.4.16 and wait until the issue is resolved before upgrading.

@mingyeongmo
Copy link

In next.js 14.0.4, I still have the same issue. I guess I'll just have to do what I suggested above.

@matmac
Copy link

matmac commented Jan 2, 2024

Same problem here... Neither of the proposed changes works for me.

Using Turborepo.

When I run pnpm dev it complains about many unmet dependencies for contentlayer:

esbuild · unmet peer esbuild@"0.17.x || 0.18.x": found 0.19.11
opentelemetry · ...unmet peer @opentelemetry/api@">=1.0.0 <1.5.0": found 1.7.0 in @contentlayer/utils... (many others)
next · unmet peer next@"^12 || ^13": found 14.0.4

This is my package.json

{
  "name": "web",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "contentlayer build && next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@heroicons/react": "^2.1.1",
    "@radix-ui/react-icons": "^1.3.0",
    "clsx": "^1.2.1",
    "contentlayer": "0.3.4",
    "date-fns": "^3.0.6",
    "next": "^14.0.4",
    "next-contentlayer": "0.3.4",
    "next-themes": "^0.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-wrap-balancer": "^1.1.0",
    "tailwind-merge": "^1.13.2",
    "ui": "workspace:*"
  },
  "devDependencies": {
    "@types/node": "^17.0.12",
    "@types/react": "^18.0.22",
    "@types/react-dom": "^18.0.7",
    "autoprefixer": "^10.4.14",
    "eslint-config-custom": "workspace:*",
    "mdast-util-toc": "^7.0.0",
    "postcss": "^8.4.24",
    "rehype-autolink-headings": "^7.1.0",
    "rehype-pretty-code": "^0.12.3",
    "rehype-slug": "^6.0.0",
    "remark": "^15.0.1",
    "remark-code-import": "^1.2.0",
    "remark-gfm": "^4.0.0",
    "shiki": "^0.14.7",
    "tailwindcss": "^3.3.2",
    "tsconfig": "workspace:*",
    "typescript": "^4.5.3"
  }
}

Any support will be much appreciated.

This was referenced Feb 2, 2024
@2-fly-4-ai
Copy link

Struggled so many times with contentlayer and these opentelementary issues. Recommend anyone else running into this just learn how to build a markdown blog from scratch. This is an absolute waste of time and I would not recommend it at all.

I have used contentlayer for several years. And have it installed in many project. I often run into these terrible dependency issues that just take forever to debug. I've solved it several times but my latest nextjs14 install has the same issue again. Pulling the plug on this dependency.

It's a pity that this was not properly maintained. The contenlayer2 repo has the same issues.

@fuma-nama
Copy link

fuma-nama commented Nov 15, 2024

I would recommend content collections, its API is similar to Contentlayer and is well maintained.

@omarabid
Copy link

So the question is: Why does ContentLayer has open-telemetry as one of its dependencies?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.