highlight.js cannot be found when using Yarn v3.1 PnP with next.js 12

What version of Next.js are you using?

12.0.0

What version of Node.js are you using?

16.13.0

What browser are you using?

Safari 15.1

What operating system are you using?

MacOS Monterey

How are you deploying your application?

Vercel

Describe the Bug

Using highlight.js, Next.js 12.0.0, Yarn v3.1.0 with strict PnP, the following error occurs upon page load:

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled successfully in 3.2s (172 modules)
wait  - compiling...
event - compiled client successfully in 135 ms (145 modules)
wait  - compiling...
event - compiled server successfully in 34 ms (27 modules)
wait  - compiling /...
event - compiled successfully in 186 ms (194 modules)
error - unhandledRejection: Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'highlight.js' imported from /Users/michael/Dev/next12-highlightjs-error/.next/server/pages/index.js
Did you mean to import highlight.js-npm-11.3.1-3fddf9f392-9adaaa1fe5.zip/node_modules/highlight.js/lib/core.js?
wait  - compiling /_error...
event - compiled successfully in 105 ms (194 modules)

The same code works using Next.js 11.x

Expected Behavior

The import should work correctly and the page should load without error.

To Reproduce

sudo npm install -g yarn

yarn create next-app --typescript

CD in to the project folder.

yarn set version berry

yarn config set nodeLinker pnp

yarn config set pnpMode strict

yarn add highlight.js

In ./pages/index.tsx add the imports:

import hljs from 'highlight.js/lib/core'
import { useEffect } from 'react'

Inside the Home arrow function, add the useEffect hook:

useEffect(() => {
  hljs.highlightAll()
}, [])

Run the dev server:

yarn dev

Visit http://localhost:3000, note error in terminal log.

See https://github.com/mward-sudo/next12-highlightjs-error for a minimal reproduction.

[bencmbrook]

Getting the same issue on Next.js 12.0.2 and Yarn 3.1 with Zero Installs. @jecassis workaround isn’t working for me either and throws

Module not found: ESM packages (remark-unwrap-images) need to be imported. Use ‘import’ to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

FWIW, https://github.com/remarkjs/remark-unwrap-images is ESM only

[jecassis]

To work around this error use require instead of import.