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

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)

About this issue

  • Original URL
  • State: open
  • Created a year ago
  • Reactions: 46
  • Comments: 81 (4 by maintainers)

Commits related to this issue

Most upvoted comments

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"
    }
}
+65
fuma-nama on Jul 7, 2023

Ran into this as well, looking forward to the fix. Thank folks!

+15
leerob on Jul 24, 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} />
}
+9
vinayr on Aug 4, 2023

Same issue, can confirm it

+9
savelichalex on Jul 7, 2023

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.

+8
jorgemasta on Jul 12, 2023

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

+7
elie222 on Oct 15, 2023

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.

+7
schneedotdev on Jul 7, 2023

Hate to be that guy - but I would love to hear if a fix is in the pipeline as I see no comms from the maintainers.

+6
Gbuomprisco on Jul 24, 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 🙏

+5
emkis on Aug 26, 2023

@sakibul-islam

Similar solution worked for me (using npm)

The following can be used inside package.json

"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"
  },

I also rolled back contentlayer to v0.3.2 and next to v13.4.8 and next-contentlayer to v0.3.1

rm -r node_modules then npm i and it was working…

+4
terminalPoltergeist on Jul 17, 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.

+4
fuma-nama on Jul 9, 2023

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?

+3
thedevdavid on Aug 2, 2023

Hate to be that guy - but I would love to hear if a fix is in the pipeline as I see no comms from the maintainers.

Now that https://github.com/open-telemetry/opentelemetry-js/pull/4016 is merged, it’ll be fixed soon ig.

EDIT: Should be fine now, finally.

+3
schardev on Jul 25, 2023

Node v18.15.0 and Ubuntu 20.04.6 LTS. I’ve tested on Node v20.3.0, and it works fine too. I guess I should mention: there is another issue with recent versions of Next.js that makes contentlayer not to be executed automatically. So I also had to tweak the scripts in the package.json:

    "dev": "contentlayer dev & next dev",
    "build": "contentlayer build & next build",

With these, things work as expected.

+3
writeonlycode on Jul 17, 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 🙏

+2
kriscard on Sep 7, 2023

I made it work with the resolution as well, but the issue arises because I’m using a monorepo. I need to add the resolution in the root package.json, not inside the package folder package.json. It needs to be located next to the lock file thanks for everybody 🥇

+2
HamzaAmar on Jul 17, 2023

@seththeskier @ThiagoUnder @luxonauta, have you tried downgrading the version number of contentlayer?

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.

For now, reverting to an earlier patch may work for you. As long as you don’t need 0.3.4, I’ve been running 0.3.1 in a recent project without problems.

In a different reply, @mauriciomutte said they could run 0.3.2 as well without problems.

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

Best of luck!

+2
schneedotdev on Jul 14, 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.

+2
xkrsz on Jul 7, 2023

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

+1
fuma-nama on Sep 5, 2023

The latest version, 0.3.4 works for me

+1
fuma-nama on Sep 5, 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.

+1
jdharms on Aug 4, 2023

I haven’t been able to grasp it fully, but could you please modifying the next.config.mjs file to utilize CommonJS instead of ECMAScript Modules (ESM) and convert the file extensions from .mjs to .js?

+1
HamzaAmar on Jul 15, 2023

I’ve tried adding

"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"
        }
    },

to package.json but now I have the following error running dev server:

- event compiled client and server successfully in 168 ms (20 modules)
<w> [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Parsing of /Users/thiagoleobons/jul/repos/skateshop/node_modules/.pnpm/@contentlayer+core@0.3.4_esbuild@0.18.11/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/thiagoleobons/jul/repos/skateshop/node_modules/.pnpm/@contentlayer+core@0.3.4_esbuild@0.18.11/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/webpack.FileSystemInfo] Parsing of /Users/thiagoleobons/jul/repos/skateshop/node_modules/.pnpm/@contentlayer+core@0.3.4_esbuild@0.18.11/node_modules/@contentlayer/core/dist/generation/generate-dotpkg.js for build dependencies failed at 'import(filePathJoin(generatedPkgPath, 'generated', 'index.mjs'))'.
<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/thiagoleobons/jul/repos/skateshop/node_modules/.pnpm/@contentlayer+core@0.3.4_esbuild@0.18.11/node_modules/@contentlayer/core/dist/markdown'
<w> while resolving 'markdown-wasm/dist/markdown.node.js' in /Users/thiagoleobons/jul/repos/skateshop/node_modules/.pnpm/@contentlayer+core@0.3.4_esbuild@0.18.11/node_modules/@contentlayer/core/dist/markdown as file
<w>  at resolve esm file markdown-wasm/dist/markdown.node.js
<w>  at file dependencies /Users/thiagoleobons/jul/repos/skateshop/node_modules/.pnpm/@contentlayer+core@0.3.4_esbuild@0.18.11/node_modules/@contentlayer/core/dist/markdown/markdown.js
<w>  at file /Users/thiagoleobons/jul/repos/skateshop/node_modules/.pnpm/@contentlayer+core@0.3.4_esbuild@0.18.11/node_modules/@contentlayer/core/dist/markdown/markdown.js
<w>  at resolve esm file ./markdown/markdown.js
<w>  at file dependencies /Users/thiagoleobons/jul/repos/skateshop/node_modules/.pnpm/@contentlayer+core@0.3.4_esbuild@0.18.11/node_modules/@contentlayer/core/dist/index.js
<w>  at file /Users/thiagoleobons/jul/repos/skateshop/node_modules/.pnpm/@contentlayer+core@0.3.4_esbuild@0.18.11/node_modules/@contentlayer/core/dist/index.js
<w>  at resolve esm file @contentlayer/core
<w>  at file dependencies /Users/thiagoleobons/jul/repos/skateshop/node_modules/.pnpm/next-contentlayer@0.3.4_contentlayer@0.3.4_esbuild@0.18.11_next@13.4.8_react-dom@18.2.0_react@18.2.0/node_modules/next-contentlayer/dist/plugin.js
<w>  at file /Users/thiagoleobons/jul/repos/skateshop/node_modules/.pnpm/next-contentlayer@0.3.4_contentlayer@0.3.4_esbuild@0.18.11_next@13.4.8_react-dom@18.2.0_react@18.2.0/node_modules/next-contentlayer/dist/plugin.js
<w>  at resolve esm file ./plugin.js
<w>  at file dependencies /Users/thiagoleobons/jul/repos/skateshop/node_modules/.pnpm/next-contentlayer@0.3.4_contentlayer@0.3.4_esbuild@0.18.11_next@13.4.8_react-dom@18.2.0_react@18.2.0/node_modules/next-contentlayer/dist/index.js
<w>  at file /Users/thiagoleobons/jul/repos/skateshop/node_modules/.pnpm/next-contentlayer@0.3.4_contentlayer@0.3.4_esbuild@0.18.11_next@13.4.8_react-dom@18.2.0_react@18.2.0/node_modules/next-contentlayer/dist/index.js
<w>  at resolve esm file next-contentlayer
<w>  at file dependencies /Users/thiagoleobons/jul/repos/skateshop/next.config.mjs
<w>  at file /Users/thiagoleobons/jul/repos/skateshop/next.config.mjs
<w>  at resolve commonjs /Users/thiagoleobons/jul/repos/skateshop/next.config.mjs

Even I’m getting the same error, did you get any solution for this?

I’m running into this as well when trying the pnpm overriding solution. Does anyone have a solution?

+1
schneedotdev on Jul 15, 2023

I’ve tried adding

"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"
        }
    },

to package.json but now I have the following error running dev server:

- event compiled client and server successfully in 168 ms (20 modules)
<w> [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Parsing of /Users/thiagoleobons/jul/repos/skateshop/node_modules/.pnpm/@contentlayer+core@0.3.4_esbuild@0.18.11/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/thiagoleobons/jul/repos/skateshop/node_modules/.pnpm/@contentlayer+core@0.3.4_esbuild@0.18.11/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/webpack.FileSystemInfo] Parsing of /Users/thiagoleobons/jul/repos/skateshop/node_modules/.pnpm/@contentlayer+core@0.3.4_esbuild@0.18.11/node_modules/@contentlayer/core/dist/generation/generate-dotpkg.js for build dependencies failed at 'import(filePathJoin(generatedPkgPath, 'generated', 'index.mjs'))'.
<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/thiagoleobons/jul/repos/skateshop/node_modules/.pnpm/@contentlayer+core@0.3.4_esbuild@0.18.11/node_modules/@contentlayer/core/dist/markdown'
<w> while resolving 'markdown-wasm/dist/markdown.node.js' in /Users/thiagoleobons/jul/repos/skateshop/node_modules/.pnpm/@contentlayer+core@0.3.4_esbuild@0.18.11/node_modules/@contentlayer/core/dist/markdown as file
<w>  at resolve esm file markdown-wasm/dist/markdown.node.js
<w>  at file dependencies /Users/thiagoleobons/jul/repos/skateshop/node_modules/.pnpm/@contentlayer+core@0.3.4_esbuild@0.18.11/node_modules/@contentlayer/core/dist/markdown/markdown.js
<w>  at file /Users/thiagoleobons/jul/repos/skateshop/node_modules/.pnpm/@contentlayer+core@0.3.4_esbuild@0.18.11/node_modules/@contentlayer/core/dist/markdown/markdown.js
<w>  at resolve esm file ./markdown/markdown.js
<w>  at file dependencies /Users/thiagoleobons/jul/repos/skateshop/node_modules/.pnpm/@contentlayer+core@0.3.4_esbuild@0.18.11/node_modules/@contentlayer/core/dist/index.js
<w>  at file /Users/thiagoleobons/jul/repos/skateshop/node_modules/.pnpm/@contentlayer+core@0.3.4_esbuild@0.18.11/node_modules/@contentlayer/core/dist/index.js
<w>  at resolve esm file @contentlayer/core
<w>  at file dependencies /Users/thiagoleobons/jul/repos/skateshop/node_modules/.pnpm/next-contentlayer@0.3.4_contentlayer@0.3.4_esbuild@0.18.11_next@13.4.8_react-dom@18.2.0_react@18.2.0/node_modules/next-contentlayer/dist/plugin.js
<w>  at file /Users/thiagoleobons/jul/repos/skateshop/node_modules/.pnpm/next-contentlayer@0.3.4_contentlayer@0.3.4_esbuild@0.18.11_next@13.4.8_react-dom@18.2.0_react@18.2.0/node_modules/next-contentlayer/dist/plugin.js
<w>  at resolve esm file ./plugin.js
<w>  at file dependencies /Users/thiagoleobons/jul/repos/skateshop/node_modules/.pnpm/next-contentlayer@0.3.4_contentlayer@0.3.4_esbuild@0.18.11_next@13.4.8_react-dom@18.2.0_react@18.2.0/node_modules/next-contentlayer/dist/index.js
<w>  at file /Users/thiagoleobons/jul/repos/skateshop/node_modules/.pnpm/next-contentlayer@0.3.4_contentlayer@0.3.4_esbuild@0.18.11_next@13.4.8_react-dom@18.2.0_react@18.2.0/node_modules/next-contentlayer/dist/index.js
<w>  at resolve esm file next-contentlayer
<w>  at file dependencies /Users/thiagoleobons/jul/repos/skateshop/next.config.mjs
<w>  at file /Users/thiagoleobons/jul/repos/skateshop/next.config.mjs
<w>  at resolve commonjs /Users/thiagoleobons/jul/repos/skateshop/next.config.mjs
+1
ThiagoUnder on Jul 13, 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.

+1
schneedotdev on Jul 8, 2023

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

+1
mauriciomutte on Jul 8, 2023
Read more comments on GitHub
← contentlayer: `contentlayer build` produces `TypeError: The "code" argument must be of type number. Received an instance of Object`
contentlayer: Eslint Error: Unable to resolve path to module 'next-contentlayer' →