Not working with PNPM

[theprobugmaker]

Bug report

Describe the bug

I tried using Next.js with Rush.js which is a tool that helps developers create and maintain monorepo projects. It has support for NPM, Yarn and PNPM.
I tried using with PNPM cause it's really good compared to Yarn and NPM but I was surprised that it wasn't working with Next.js.
Next.js is working only with Yarn and NPM and it appears that Next.js's server-renderer bundler is not correctly externalizing modules with PNPM.

To Reproduce

https://github.com/zefexdeveloper/nextjs-pnpm

You can clone the repository and follow the readme. There's also a yarn branch with a working example.

Expected behavior

It should work just like with Yarn/NPM.

Additional context

I would like to invite @octogonz (Rush.js), @timneutkens @Timer (Next.js) and @zkochan (PNPM). Great people that are related to those projects and it would be amazing to hear from them to see what might be the problem.

[octogonz]

From a preliminary investigation, we found that Next.js's server-renderer bundler is not correctly externalizing modules installed by PNPM. For example, if we compare the file .next\server\pages\index.js between the Yarn vs PNPM branches from @zefexdeveloper's repro:

For Yarn we will see this:

.next\server\pages\index.js

/***/ "react":
/*!************************!*\
  !*** external "react" ***!
  \************************/

...whereas for PNPM we see this:

.next\server\pages\index.js

/***/ "./node_modules/.pnpm/react@16.13.1/node_modules/react/cjs/react.development.js":
/*!**************************************************************************************!*\
  !*** ./node_modules/.pnpm/react@16.13.1/node_modules/react/cjs/react.development.js ***!
  \**************************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

"use strict";
/** @license React v16.13.1
 * react.development.js

...along with full copies of every NPM dependency, copied inline into every .js file. For example the same is seen in other files .next\server\pages\_document.js, .next\server\pages\_app.js, etc.

As a result, React reports a warning about hooks. The warning is complaining that multiple instances of React are getting loaded (into the Node.js server-side renderer, not the web browser runtime). Next.js seems to be using Webpack to bundle everything, so maybe it is just a configuration problem. Webpack itself certainly is compatible with PNPM.

[octogonz]

The webpack configuration is here: packages/next/build/webpack-config.ts

It references packages/next/lib/resolve-request.ts, which looks to be doing custom module resolution. Perhaps it does not handle symlinks correctly according to the Node.js standard.

[octogonz]

I also found an older PR #8668 where @arcanis fixed Next.js to work with Yarn Plug'n'Play. It is fortunately a pretty small diff. @zkochan I bet these are the exact same places that need to be fixed up to eliminate the incompatibility with PNPM. Maybe this is easy to solve!

[theprobugmaker]

Thank you @bitfrost for the PR, I hope that @Timer or @timneutkens can merge.

[octogonz]

I see that PR #16614 was closed recently.

Is PR #16369 expected to fix this issue?

[elliottsj]

Since #17279 was merged, Next.js works with pnpm.

I proposed some integration tests to help ensure pnpm continues to work in the future: #17882

However, there are some outstanding issues using Next.js on Vercel with pnpm, likely due to how Vercel's file system works:

• Support for pnpm as an alternative to Yarn vercel#3896 (reply in thread)
• https://github.com/elliottsj/nextjs-vercel-pnpm-issue

[Timer]

Closing as fixed by #17279