SyntaxError: Named export 'addMessageListener' not found.

[marcofranssen]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 22.4.0: Mon Mar  6 21:00:17 PST 2023; root:xnu-8796.101.5~3/RELEASE_X86_64
    Binaries:
      Node: 18.16.0
      npm: 9.5.1
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.3.1
      eslint-config-next: 13.3.1
      react: 18.2.0
      react-dom: 18.2.0

warn  - Latest canary version not detected, detected: "13.3.1", newest: "13.3.2-canary.9".
        Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
        Read more - https://nextjs.org/docs/messages/opening-an-issue

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue

https://vercel.com/marcofranssen/nextjs-blog/A99wwoPqfuJC6W5agpDFvQdfRjed

To Reproduce

I have following dependencies in package.json. I hope that is sufficient to get this reproduced.

{
  "name": "marcofranssen-nl",
  "version": "0.1.0",
  "private": true,
  "engines": {
    "node": "18.x"
  },
  "scripts": {
    "dev": "next dev",
    "dev:watch": "next-remote-watch ./_data",
    "lint": "next lint",
    "build": "next build",
    "postbuild": "next-sitemap",
    "start": "next start",
    "cl:build": "contentlayer build --verbose",
    "cl:dev": "contentlayer build --verbose"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.4.0",
    "@fortawesome/free-brands-svg-icons": "^6.4.0",
    "@fortawesome/free-solid-svg-icons": "^6.4.0",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@u-wave/react-vimeo": "^0.9.10",
    "@vercel/analytics": "^1.0.0",
    "axios": "^1.3.4",
    "classnames": "^2.3.2",
    "contentlayer": "^0.3.2",
    "date-fns": "^2.29.3",
    "disqus-react": "^1.1.5",
    "gray-matter": "^4.0.3",
    "image-size": "^1.0.2",
    "js-cookie": "^3.0.5",
    "js-yaml": "^4.1.0",
    "next": "^13.3.1",
    "next-contentlayer": "^0.3.2",
    "next-pwa": "^5.6.0",
    "next-seo": "^6.0.0",
    "next-sitemap": "^4.0.6",
    "prism-react-renderer": "^2.0.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "reading-time": "^1.5.0",
    "rehype-autolink-headings": "^6.1.1",
    "rehype-code-titles": "^1.2.0",
    "rehype-external-links": "^2.0.1",
    "rehype-prism-plus": "^1.5.1",
    "rehype-slug": "^5.1.0",
    "remark": "^14.0.2",
    "remark-emoji": "^3.1.1",
    "remark-gfm": "^3.0.1",
    "sharp": "^0.32.0",
    "strip-markdown": "^5.0.0",
    "xml": "^1.0.1"
  },
  "devDependencies": {
    "@tailwindcss/forms": "^0.5.3",
    "@tailwindcss/typography": "^0.5.9",
    "autoprefixer": "^10.4.14",
    "cheerio": "^1.0.0-rc.12",
    "eslint": "^8.38.0",
    "eslint-config-next": "^13.3.1",
    "next-remote-watch": "2.0.0",
    "postcss": "^8.4.22",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-import": "^15.1.0",
    "postcss-preset-env": "^8.3.2",
    "prettier": "^2.8.7",
    "remark-frontmatter": "^4.0.1",
    "remark-textr": "^5.0.1",
    "tailwindcss": "^3.3.1",
    "typescript": "5.0.4",
    "unist-util-find": "^1.0.2",
    "yargs": "^17.7.1"
  }
}

Describe the Bug

error - file:///Users/marco/code/nextjs-blog/node_modules/next-contentlayer/dist/hooks/useLiveReload.js:1
import { addMessageListener } from 'next/dist/client/dev/error-overlay/websocket.js';
         ^^^^^^^^^^^^^^^^^^
SyntaxError: Named export 'addMessageListener' not found. The requested module 'next/dist/client/dev/error-overlay/websocket.js' 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 'next/dist/client/dev/error-overlay/websocket.js';
const { addMessageListener } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5) {
  digest: undefined
}

Expected Behavior

Everything just works like it does in 13.2.x. The problem occurs as soon I bump nextjs from 13.2.4 to 13.3.1. I have also tested the latest canary and all just works. Prior to testing this I ensured all my other dependencies are fully bumped.

Which browser are you using? (if relevant)

Chrome 112.0.5615.165

How are you deploying your application? (if relevant)

yarn dev or yarn build && yarn start or on vercel.

[typeofweb]

We're also facing this issue in multiple places and it was introduced in 13.3.1 – 13.3.0 works just fine.

import { useRouter } from "next/router.js";
         ^^^^^^^^^
SyntaxError: Named export 'useRouter' not found. The requested module 'next/router.js' is a CommonJS module, which may not support all module.exports as named exports.

import { ApiError } from "next/dist/server/api-utils/index.js";
         ^^^^^^^^
SyntaxError: Named export 'ApiError' not found. The requested module 'next/dist/server/api-utils/index.js' is a CommonJS module, which may not support all module.exports as named exports.

[typeofweb]

@arialpew is this related to SyntaxError: Named export '...' not found. ?

[arialpew]

@mmiszy I opened a new issue #48991 - I don't think it's related anyway, probably a new issue on its own.

Maybe try 13.3.2 to see if your problem is solved.

[marcofranssen]

I tried again with the recent 13.3.4 release. I also did refactor some components from client-side to server side and bumped all other dependencies first. That made it work for me. Not sure what was the solution now, as I did a whole bunch of things in between to optimize my setup as a preparation to migrate to the appDir as well.

In the release notes of 13.3.3 and 13.3.4 I don't see anything mentioned specifically for the error I had before. I wish I could have a more clear explanation why it works now for any future reader.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.